Add more page titles

djhi · djhi · commit 775837213060 · 2025-01-09T12:00:07.000+01:00
diff --git a/examples/demo/src/categories/CategoryEdit.tsx b/examples/demo/src/categories/CategoryEdit.tsx
@@ -10,6 +10,8 @@ import {
     TextInput,
     useTranslate,
     useRecordContext,
+    useDefaultTitle,
+    useGetResourceLabel,
 } from 'react-admin';
 
 import ThumbnailField from '../products/ThumbnailField';
@@ -59,14 +61,21 @@ 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 ? (
-        <span>
-            {translate('resources.categories.name', { smart_count: 1 })} &quot;
-            {record.name}&quot;
-        </span>
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
     ) : null;
 };
 
diff --git a/examples/demo/src/categories/CategoryList.tsx b/examples/demo/src/categories/CategoryList.tsx
@@ -3,7 +3,10 @@ import {
     EditButton,
     List,
     RecordContextProvider,
+    useDefaultTitle,
+    useGetResourceLabel,
     useListContext,
+    useTranslate,
 } from 'react-admin';
 import {
     Grid,
@@ -18,13 +21,29 @@ import { humanize } from 'inflection';
 import LinkToRelatedProducts from './LinkToRelatedProducts';
 import { Category } from '../types';
 
+const CategoriesTitle = () => {
+    const title = useDefaultTitle();
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.list', {
+        name: getResourceLabel('categories', 2),
+    });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const CategoryList = () => (
     <List
         sort={{ field: 'name', order: 'ASC' }}
         perPage={20}
         pagination={false}
         component="div"
         actions={false}
+        title={<CategoriesTitle />}
     >
         <CategoryGrid />
     </List>
diff --git a/examples/demo/src/invoices/InvoiceList.tsx b/examples/demo/src/invoices/InvoiceList.tsx
@@ -12,6 +12,9 @@ import {
     SelectColumnsButton,
     ReferenceInput,
     FilterButton,
+    useDefaultTitle,
+    useTranslate,
+    useGetResourceLabel,
 } from 'react-admin';
 
 import FullNameField from '../visitors/FullNameField';
@@ -33,12 +36,28 @@ const ListActions = () => (
     </TopToolbar>
 );
 
+const InvoicesTitle = () => {
+    const title = useDefaultTitle();
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.list', {
+        name: getResourceLabel('invoices', 2),
+    });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const InvoiceList = () => (
     <List
         filters={listFilters}
         perPage={25}
         sort={{ field: 'date', order: 'DESC' }}
         actions={<ListActions />}
+        title={<InvoicesTitle />}
     >
         <DatagridConfigurable
             rowClick="expand"
diff --git a/examples/demo/src/orders/OrderEdit.tsx b/examples/demo/src/orders/OrderEdit.tsx
@@ -13,6 +13,7 @@ import {
     Toolbar,
     useRecordContext,
     useTranslate,
+    useDefaultTitle,
 } from 'react-admin';
 import { Card, CardContent, Box, Grid, Typography, Link } from '@mui/material';
 
@@ -27,14 +28,17 @@ const OrderEdit = () => (
 );
 
 const OrderTitle = () => {
+    const appTitle = useDefaultTitle();
     const translate = useTranslate();
     const record = useRecordContext<Order>();
+    const pageTitle = translate('resources.orders.title', {
+        reference: record?.reference,
+    });
     return record ? (
-        <span>
-            {translate('resources.orders.title', {
-                reference: record.reference,
-            })}
-        </span>
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
     ) : null;
 };
 
diff --git a/examples/demo/src/orders/OrderList.tsx b/examples/demo/src/orders/OrderList.tsx
@@ -19,7 +19,10 @@ import {
     SelectColumnsButton,
     TextField,
     TopToolbar,
+    useDefaultTitle,
+    useGetResourceLabel,
     useListContext,
+    useTranslate,
 } from 'react-admin';
 import { useMediaQuery, Divider, Tabs, Tab, Theme } from '@mui/material';
 
@@ -36,13 +39,29 @@ const ListActions = () => (
     </TopToolbar>
 );
 
+const OrdersTitle = () => {
+    const title = useDefaultTitle();
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.list', {
+        name: getResourceLabel('orders', 2),
+    });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const OrderList = () => (
     <List
         filterDefaultValues={{ status: 'ordered' }}
         sort={{ field: 'date', order: 'DESC' }}
         perPage={25}
         filters={orderFilters}
         actions={<ListActions />}
+        title={<OrdersTitle />}
     >
         <TabbedDatagrid />
     </List>
diff --git a/examples/demo/src/products/ProductCreate.tsx b/examples/demo/src/products/ProductCreate.tsx
@@ -6,7 +6,6 @@ import {
     required,
     useDefaultTitle,
     useGetResourceLabel,
-    useResourceContext,
     useTranslate,
 } from 'react-admin';
 import { ProductEditDetails } from './ProductEditDetails';
@@ -17,22 +16,16 @@ const RichTextInput = React.lazy(() =>
 );
 
 const ProductTitle = () => {
-    const title = useDefaultTitle();
+    const appTitle = useDefaultTitle();
     const translate = useTranslate();
-    const resource = useResourceContext();
     const getResourceLabel = useGetResourceLabel();
-    if (!resource) {
-        throw new Error(
-            'useCreateController requires a non-empty resource prop or context'
-        );
-    }
-    const defaultTitle = translate('ra.page.create', {
-        name: getResourceLabel(resource, 1),
+    const pageTitle = translate('ra.page.create', {
+        name: getResourceLabel('products', 1),
     });
     return (
         <>
-            <title>{`${title} - ${defaultTitle}`}</title>
-            <span>{defaultTitle}</span>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
         </>
     );
 };
diff --git a/examples/demo/src/products/ProductEdit.tsx b/examples/demo/src/products/ProductEdit.tsx
@@ -13,6 +13,8 @@ import {
     TextInput,
     useRecordContext,
     useDefaultTitle,
+    useTranslate,
+    useGetResourceLabel,
 } from 'react-admin';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import AspectRatioIcon from '@mui/icons-material/AspectRatio';
@@ -33,13 +35,19 @@ const RichTextInput = React.lazy(() =>
 );
 
 const ProductTitle = () => {
-    const title = useDefaultTitle();
-
+    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 ? (
         <>
-            <title>{`${title} - Poster "${record.reference}`}</title>
-            <span>Poster "{record.reference}"</span>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
         </>
     ) : null;
 };
diff --git a/examples/demo/src/products/ProductList.tsx b/examples/demo/src/products/ProductList.tsx
@@ -25,13 +25,17 @@ import ImageList from './GridList';
 import Aside from './Aside';
 
 const ProductList = () => {
-    const title = useDefaultTitle();
+    const appTitle = useDefaultTitle();
+    const translate = useTranslate();
     const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.list', {
+        name: getResourceLabel('products', 2),
+    });
     const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
     return (
         <ListBase perPage={24} sort={{ field: 'reference', order: 'ASC' }}>
-            <title>{`${title} - ${getResourceLabel('products', 2)}`}</title>
-            <Title defaultTitle={getResourceLabel('products', 2)} />
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <Title defaultTitle={pageTitle} />
             <FilterContext.Provider value={productFilters}>
                 <ListActions isSmall={isSmall} />
                 {isSmall && (
diff --git a/examples/demo/src/reviews/ReviewCreate.tsx b/examples/demo/src/reviews/ReviewCreate.tsx
@@ -10,11 +10,29 @@ import {
     useNotify,
     useRedirect,
     getRecordFromLocation,
+    useDefaultTitle,
+    useTranslate,
+    useGetResourceLabel,
 } from 'react-admin';
 import { useLocation } from 'react-router';
 
 import StarRatingInput from './StarRatingInput';
 
+const ReviewTitle = () => {
+    const appTitle = useDefaultTitle();
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.create', {
+        name: getResourceLabel('reviews', 1),
+    });
+    return (
+        <>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const ReviewCreate = () => {
     const notify = useNotify();
     const redirect = useRedirect();
@@ -31,7 +49,7 @@ const ReviewCreate = () => {
     };
 
     return (
-        <Create mutationOptions={{ onSuccess }}>
+        <Create mutationOptions={{ onSuccess }} title={<ReviewTitle />}>
             <SimpleForm
                 defaultValues={{ status: 'pending' }}
                 sx={{
diff --git a/examples/demo/src/reviews/ReviewList.tsx b/examples/demo/src/reviews/ReviewList.tsx
@@ -7,6 +7,9 @@ import {
     List,
     SelectColumnsButton,
     TopToolbar,
+    useDefaultTitle,
+    useGetResourceLabel,
+    useTranslate,
 } from 'react-admin';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import { Box, Drawer, useMediaQuery, Theme } from '@mui/material';
@@ -25,6 +28,21 @@ const ReviewListActions = () => (
     </TopToolbar>
 );
 
+const ReviewsTitle = () => {
+    const title = useDefaultTitle();
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
+    const pageTitle = translate('ra.page.list', {
+        name: getResourceLabel('reviews', 2),
+    });
+    return (
+        <>
+            <title>{`${title} - ${pageTitle}`}</title>
+            <span>{pageTitle}</span>
+        </>
+    );
+};
+
 const ReviewList = () => {
     const isXSmall = useMediaQuery<Theme>(theme =>
         theme.breakpoints.down('sm')
@@ -53,6 +71,7 @@ const ReviewList = () => {
                 perPage={25}
                 sort={{ field: 'date', order: 'DESC' }}
                 actions={<ReviewListActions />}
+                title={<ReviewsTitle />}
             >
                 {isXSmall ? (
                     <ReviewListMobile />
diff --git a/examples/demo/src/segments/Segments.tsx b/examples/demo/src/segments/Segments.tsx
diff --git a/examples/demo/src/visitors/VisitorCreate.tsx b/examples/demo/src/visitors/VisitorCreate.tsx
diff --git a/examples/demo/src/visitors/VisitorEdit.tsx b/examples/demo/src/visitors/VisitorEdit.tsx
diff --git a/examples/demo/src/visitors/VisitorList.tsx b/examples/demo/src/visitors/VisitorList.tsx
