Simplify demo titles

marmelab · Jan 22, 2025 · cf47d5a · cf47d5a
1 parent a8beb34
commit cf47d5a
Show file tree

Hide file tree

Showing 16 changed files with 76 additions and 119 deletions.
diff --git a/examples/demo/src/categories/CategoryEdit.tsx b/examples/demo/src/categories/CategoryEdit.tsx
@@ -8,15 +8,12 @@ import {
     ReferenceManyField,
     SimpleForm,
     TextInput,
-    useTranslate,
-    useRecordContext,
     useDefaultTitle,
-    useGetResourceLabel,
+    useEditContext,
 } from 'react-admin';
 
 import ThumbnailField from '../products/ThumbnailField';
 import ProductRefField from '../products/ProductRefField';
-import { Category } from '../types';
 
 const CategoryEdit = () => (
     <Edit title={<CategoryTitle />}>
@@ -62,21 +59,13 @@ const CategoryEdit = () => (
 
 const CategoryTitle = () => {
     const appTitle = useDefaultTitle();
-    const record = useRecordContext<Category>();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-
-    const pageTitle = translate('ra.page.edit', {
-        name: getResourceLabel('categories', 1),
-        recordRepresentation: `"${record?.name}"`,
-    });
-
-    return record ? (
+    const { defaultTitle } = useEditContext();
+    return (
         <>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
-    ) : null;
+    );
 };
 
 export default CategoryEdit;
diff --git a/examples/demo/src/categories/CategoryList.tsx b/examples/demo/src/categories/CategoryList.tsx
@@ -18,15 +18,14 @@ import { humanize } from 'inflection';
 
 import LinkToRelatedProducts from './LinkToRelatedProducts';
 import { Category } from '../types';
-import { usePageTitle } from '../usePageTitle';
 
 const CategoriesTitle = () => {
     const title = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'list' });
+    const { defaultTitle } = useListContext();
     return (
         <>
-            <title>{`${title} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${title} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/invoices/InvoiceList.tsx b/examples/demo/src/invoices/InvoiceList.tsx
@@ -13,12 +13,12 @@ import {
     ReferenceInput,
     FilterButton,
     useDefaultTitle,
+    useListContext,
 } from 'react-admin';
 
 import FullNameField from '../visitors/FullNameField';
 import AddressField from '../visitors/AddressField';
 import InvoiceShow from './InvoiceShow';
-import { usePageTitle } from '../usePageTitle';
 
 const listFilters = [
     <DateInput source="date_gte" alwaysOn />,
@@ -37,11 +37,11 @@ const ListActions = () => (
 
 const InvoicesTitle = () => {
     const title = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'list' });
+    const { defaultTitle } = useListContext();
     return (
         <>
-            <title>{`${title} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${title} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/orders/OrderEdit.tsx b/examples/demo/src/orders/OrderEdit.tsx
@@ -14,13 +14,13 @@ import {
     useRecordContext,
     useTranslate,
     useDefaultTitle,
+    useEditContext,
 } from 'react-admin';
 import { Card, CardContent, Box, Grid, Typography, Link } from '@mui/material';
 
 import { Customer } from '../types';
 import Basket from './Basket';
 import Totals from './Totals';
-import { usePageTitle } from '../usePageTitle';
 
 const OrderEdit = () => (
     <Edit title={<OrderTitle />} component="div">
@@ -30,11 +30,11 @@ const OrderEdit = () => (
 
 const OrderTitle = () => {
     const appTitle = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'edit' });
+    const { defaultTitle } = useEditContext();
     return (
         <>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/orders/OrderList.tsx b/examples/demo/src/orders/OrderList.tsx
@@ -28,7 +28,6 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import AddressField from '../visitors/AddressField';
 import MobileGrid from './MobileGrid';
 import { Customer } from '../types';
-import { usePageTitle } from '../usePageTitle';
 
 const ListActions = () => (
     <TopToolbar>
@@ -40,11 +39,11 @@ const ListActions = () => (
 
 const OrdersTitle = () => {
     const title = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'list' });
+    const { defaultTitle } = useListContext();
     return (
         <>
-            <title>{`${title} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${title} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/products/ProductCreate.tsx b/examples/demo/src/products/ProductCreate.tsx
@@ -4,10 +4,10 @@ import {
     TabbedForm,
     TextInput,
     required,
+    useCreateContext,
     useDefaultTitle,
 } from 'react-admin';
 import { ProductEditDetails } from './ProductEditDetails';
-import { usePageTitle } from '../usePageTitle';
 const RichTextInput = React.lazy(() =>
     import('ra-input-rich-text').then(module => ({
         default: module.RichTextInput,
@@ -16,12 +16,12 @@ const RichTextInput = React.lazy(() =>
 
 const ProductTitle = () => {
     const appTitle = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'create' });
+    const { defaultTitle } = useCreateContext();
 
     return (
         <>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/products/ProductEdit.tsx b/examples/demo/src/products/ProductEdit.tsx
@@ -11,10 +11,8 @@ import {
     TabbedForm,
     TextField,
     TextInput,
-    useRecordContext,
     useDefaultTitle,
-    useTranslate,
-    useGetResourceLabel,
+    useEditContext,
 } from 'react-admin';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import AspectRatioIcon from '@mui/icons-material/AspectRatio';
@@ -25,7 +23,6 @@ import { ProductEditDetails } from './ProductEditDetails';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from '../reviews/StarRatingField';
 import Poster from './Poster';
-import { Product } from '../types';
 import CreateRelatedReviewButton from './CreateRelatedReviewButton';
 
 const RichTextInput = React.lazy(() =>
@@ -36,20 +33,13 @@ const RichTextInput = React.lazy(() =>
 
 const ProductTitle = () => {
     const appTitle = useDefaultTitle();
-    const translate = useTranslate();
-    const record = useRecordContext<Product>();
-    const getResourceLabel = useGetResourceLabel();
-
-    const pageTitle = translate('ra.page.edit', {
-        name: getResourceLabel('products', 1),
-        recordRepresentation: `"${record?.reference}"`,
-    });
-    return record ? (
+    const { defaultTitle } = useEditContext();
+    return (
         <>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
-    ) : null;
+    );
 };
 
 const ProductEdit = () => (

diff --git a/examples/demo/src/products/ProductList.tsx b/examples/demo/src/products/ProductList.tsx
@@ -18,20 +18,17 @@ import {
     TopToolbar,
     useTranslate,
     useDefaultTitle,
+    useListContext,
 } from 'react-admin';
 
 import ImageList from './GridList';
 import Aside from './Aside';
-import { usePageTitle } from '../usePageTitle';
 
 const ProductList = () => {
-    const appTitle = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'list' });
     const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
     return (
         <ListBase perPage={24} sort={{ field: 'reference', order: 'ASC' }}>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <Title defaultTitle={pageTitle} />
+            <ProductTitle />
             <FilterContext.Provider value={productFilters}>
                 <ListActions isSmall={isSmall} />
                 {isSmall && (
@@ -51,6 +48,18 @@ const ProductList = () => {
     );
 };
 
+const ProductTitle = () => {
+    const appTitle = useDefaultTitle();
+    const { defaultTitle } = useListContext();
+
+    return (
+        <>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <Title defaultTitle={defaultTitle} />
+        </>
+    );
+};
+
 const QuickFilter = ({ label }: InputProps) => {
     const translate = useTranslate();
     return <Chip sx={{ mb: 1 }} label={translate(label as string)} />;

diff --git a/examples/demo/src/reviews/ReviewCreate.tsx b/examples/demo/src/reviews/ReviewCreate.tsx
@@ -11,19 +11,19 @@ import {
     useRedirect,
     getRecordFromLocation,
     useDefaultTitle,
+    useCreateContext,
 } from 'react-admin';
 import { useLocation } from 'react-router';
 
 import StarRatingInput from './StarRatingInput';
-import { usePageTitle } from '../usePageTitle';
 
 const ReviewTitle = () => {
     const appTitle = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'create' });
+    const { defaultTitle } = useCreateContext();
     return (
         <>
-            <title>{`${appTitle} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${appTitle} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/reviews/ReviewEdit.tsx b/examples/demo/src/reviews/ReviewEdit.tsx
@@ -7,6 +7,7 @@ import {
     DateField,
     Labeled,
     useDefaultTitle,
+    useEditContext,
 } from 'react-admin';
 import { Box, Grid, Stack, IconButton, Typography } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -16,7 +17,6 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from './StarRatingField';
 import ReviewEditToolbar from './ReviewEditToolbar';
 import { Review } from '../types';
-import { usePageTitle } from '../usePageTitle';
 
 interface ReviewEditProps {
     id: Review['id'];
@@ -25,8 +25,8 @@ interface ReviewEditProps {
 
 const ReviewTitle = () => {
     const appTitle = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'edit' });
-    return <title>{`${appTitle} - ${pageTitle}`}</title>;
+    const { defaultTitle } = useEditContext();
+    return <title>{`${appTitle} - ${defaultTitle}`}</title>;
 };
 
 const ReviewEdit = ({ id, onCancel }: ReviewEditProps) => {

diff --git a/examples/demo/src/reviews/ReviewList.tsx b/examples/demo/src/reviews/ReviewList.tsx
@@ -8,6 +8,7 @@ import {
     SelectColumnsButton,
     TopToolbar,
     useDefaultTitle,
+    useListContext,
 } from 'react-admin';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import { Box, Drawer, useMediaQuery, Theme } from '@mui/material';
@@ -16,7 +17,6 @@ import ReviewListMobile from './ReviewListMobile';
 import ReviewListDesktop from './ReviewListDesktop';
 import reviewFilters from './reviewFilters';
 import ReviewEdit from './ReviewEdit';
-import { usePageTitle } from '../usePageTitle';
 
 const ReviewListActions = () => (
     <TopToolbar>
@@ -29,11 +29,11 @@ const ReviewListActions = () => (
 
 const ReviewsTitle = () => {
     const title = useDefaultTitle();
-    const pageTitle = usePageTitle({ view: 'list' });
+    const { defaultTitle } = useListContext();
     return (
         <>
-            <title>{`${title} - ${pageTitle}`}</title>
-            <span>{pageTitle}</span>
+            <title>{`${title} - ${defaultTitle}`}</title>
+            <span>{defaultTitle}</span>
         </>
     );
 };

diff --git a/examples/demo/src/segments/Segments.tsx b/examples/demo/src/segments/Segments.tsx
@@ -7,16 +7,23 @@ import {
     TableHead,
     TableRow,
 } from '@mui/material';
-import { useTranslate, Title, useDefaultTitle } from 'react-admin';
+import {
+    useTranslate,
+    Title,
+    useDefaultTitle,
+    useGetResourceLabel,
+} from 'react-admin';
 
 import LinkToRelatedCustomers from './LinkToRelatedCustomers';
 import segments from './data';
-import { usePageTitle } from '../usePageTitle';
 
 const Segments = () => {
     const appTitle = useDefaultTitle();
     const translate = useTranslate();
-    const pageTitle = usePageTitle({ view: 'list', resource: 'segments' });
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate(`ra.page.list`, {
+        name: getResourceLabel('segments', 2),
+    });
 
     return (
         <>