Refactor with usePageTitle

djhi · djhi · commit a42f048859bb · 2025-01-09T14:38:11.000+01:00
diff --git a/examples/demo/src/categories/CategoryList.tsx b/examples/demo/src/categories/CategoryList.tsx
@@ -4,9 +4,7 @@ import {
     List,
     RecordContextProvider,
     useDefaultTitle,
-    useGetResourceLabel,
     useListContext,
-    useTranslate,
 } from 'react-admin';
 import {
     Grid,
@@ -20,14 +18,11 @@ import { humanize } from 'inflection';
 
 import LinkToRelatedProducts from './LinkToRelatedProducts';
 import { Category } from '../types';
+import { usePageTitle } from '../usePageTitle';
 
 const CategoriesTitle = () => {
     const title = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('categories', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     return (
         <>
             <title>{`${title} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/invoices/InvoiceList.tsx b/examples/demo/src/invoices/InvoiceList.tsx
@@ -13,13 +13,12 @@ import {
     ReferenceInput,
     FilterButton,
     useDefaultTitle,
-    useTranslate,
-    useGetResourceLabel,
 } 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 />,
@@ -38,11 +37,7 @@ const ListActions = () => (
 
 const InvoicesTitle = () => {
     const title = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('invoices', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     return (
         <>
             <title>{`${title} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/orders/OrderEdit.tsx b/examples/demo/src/orders/OrderEdit.tsx
@@ -17,9 +17,10 @@ import {
 } from 'react-admin';
 import { Card, CardContent, Box, Grid, Typography, Link } from '@mui/material';
 
-import { Order, Customer } from '../types';
+import { Customer } from '../types';
 import Basket from './Basket';
 import Totals from './Totals';
+import { usePageTitle } from '../usePageTitle';
 
 const OrderEdit = () => (
     <Edit title={<OrderTitle />} component="div">
@@ -29,17 +30,13 @@ 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 ? (
+    const pageTitle = usePageTitle({ view: 'edit' });
+    return (
         <>
             <title>{`${appTitle} - ${pageTitle}`}</title>
             <span>{pageTitle}</span>
         </>
-    ) : null;
+    );
 };
 
 const CustomerDetails = () => {
diff --git a/examples/demo/src/orders/OrderList.tsx b/examples/demo/src/orders/OrderList.tsx
@@ -20,16 +20,15 @@ import {
     TextField,
     TopToolbar,
     useDefaultTitle,
-    useGetResourceLabel,
     useListContext,
-    useTranslate,
 } from 'react-admin';
 import { useMediaQuery, Divider, Tabs, Tab, Theme } from '@mui/material';
 
 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>
@@ -41,11 +40,7 @@ const ListActions = () => (
 
 const OrdersTitle = () => {
     const title = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('orders', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     return (
         <>
             <title>{`${title} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/products/ProductCreate.tsx b/examples/demo/src/products/ProductCreate.tsx
@@ -5,10 +5,9 @@ import {
     TextInput,
     required,
     useDefaultTitle,
-    useGetResourceLabel,
-    useTranslate,
 } 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,
@@ -17,11 +16,8 @@ const RichTextInput = React.lazy(() =>
 
 const ProductTitle = () => {
     const appTitle = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.create', {
-        name: getResourceLabel('products', 1),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
+
     return (
         <>
             <title>{`${appTitle} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/products/ProductList.tsx b/examples/demo/src/products/ProductList.tsx
@@ -17,20 +17,16 @@ import {
     Title,
     TopToolbar,
     useTranslate,
-    useGetResourceLabel,
     useDefaultTitle,
 } from 'react-admin';
 
 import ImageList from './GridList';
 import Aside from './Aside';
+import { usePageTitle } from '../usePageTitle';
 
 const ProductList = () => {
     const appTitle = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('products', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
     return (
         <ListBase perPage={24} sort={{ field: 'reference', order: 'ASC' }}>
diff --git a/examples/demo/src/reviews/ReviewCreate.tsx b/examples/demo/src/reviews/ReviewCreate.tsx
@@ -11,20 +11,15 @@ import {
     useRedirect,
     getRecordFromLocation,
     useDefaultTitle,
-    useTranslate,
-    useGetResourceLabel,
 } from 'react-admin';
 import { useLocation } from 'react-router';
 
 import StarRatingInput from './StarRatingInput';
+import { usePageTitle } from '../usePageTitle';
 
 const ReviewTitle = () => {
     const appTitle = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.create', {
-        name: getResourceLabel('reviews', 1),
-    });
+    const pageTitle = usePageTitle({ view: 'create' });
     return (
         <>
             <title>{`${appTitle} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/reviews/ReviewList.tsx b/examples/demo/src/reviews/ReviewList.tsx
@@ -8,8 +8,6 @@ import {
     SelectColumnsButton,
     TopToolbar,
     useDefaultTitle,
-    useGetResourceLabel,
-    useTranslate,
 } from 'react-admin';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import { Box, Drawer, useMediaQuery, Theme } from '@mui/material';
@@ -18,6 +16,7 @@ import ReviewListMobile from './ReviewListMobile';
 import ReviewListDesktop from './ReviewListDesktop';
 import reviewFilters from './reviewFilters';
 import ReviewEdit from './ReviewEdit';
+import { usePageTitle } from '../usePageTitle';
 
 const ReviewListActions = () => (
     <TopToolbar>
@@ -30,11 +29,7 @@ const ReviewListActions = () => (
 
 const ReviewsTitle = () => {
     const title = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('reviews', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     return (
         <>
             <title>{`${title} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/segments/Segments.tsx b/examples/demo/src/segments/Segments.tsx
@@ -11,11 +11,12 @@ import { useTranslate, Title, useDefaultTitle } 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 = translate('resources.segments.name', { smart_count: 2 });
+    const pageTitle = usePageTitle({ view: 'list' });
 
     return (
         <>
diff --git a/examples/demo/src/usePageTitle.tsx b/examples/demo/src/usePageTitle.tsx
@@ -0,0 +1,36 @@
+import {
+    HintedString,
+    RaRecord,
+    useGetRecordRepresentation,
+    useGetResourceLabel,
+    useRecordContext,
+    useResourceContext,
+    useTranslate,
+} from 'react-admin';
+
+export const usePageTitle = (props: {
+    view: HintedString<'list' | 'edit' | 'show' | 'create'>;
+    record?: RaRecord;
+    resource?: string;
+    count?: number;
+}) => {
+    const { view, count = view === 'list' ? 2 : 1 } = props;
+    const translate = useTranslate();
+    const record = useRecordContext(props);
+    const resource = useResourceContext(props);
+    const getResourceLabel = useGetResourceLabel();
+    const getRecordRepresentation = useGetRecordRepresentation();
+
+    if (!resource) {
+        throw new Error(
+            'usePageTitle must be used inside a <Resource> component or provide a resource prop'
+        );
+    }
+
+    const pageTitle = translate(`ra.page.${view}`, {
+        name: getResourceLabel(resource, count),
+        recordRepresentation: getRecordRepresentation(record),
+    });
+
+    return pageTitle;
+};
diff --git a/examples/demo/src/visitors/VisitorCreate.tsx b/examples/demo/src/visitors/VisitorCreate.tsx
@@ -8,9 +8,9 @@ import {
     PasswordInput,
     email,
     useDefaultTitle,
-    useGetResourceLabel,
 } from 'react-admin';
 import { Box, Typography } from '@mui/material';
+import { usePageTitle } from '../usePageTitle';
 
 export const validateForm = (
     values: Record<string, any>
@@ -39,11 +39,7 @@ export const validateForm = (
 
 const VisitorTitle = () => {
     const appTitle = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.create', {
-        name: getResourceLabel('customers', 1),
-    });
+    const pageTitle = usePageTitle({ view: 'create' });
     return (
         <>
             <title>{`${appTitle} - ${pageTitle}`}</title>
diff --git a/examples/demo/src/visitors/VisitorEdit.tsx b/examples/demo/src/visitors/VisitorEdit.tsx
@@ -8,15 +8,14 @@ import {
     SimpleForm,
     useTranslate,
     useDefaultTitle,
-    useRecordContext,
 } from 'react-admin';
 import { Grid, Box, Typography } from '@mui/material';
 
 import Aside from './Aside';
 import FullNameField from './FullNameField';
 import SegmentsInput from './SegmentsInput';
 import { validateForm } from './VisitorCreate';
-import { Customer } from '../types';
+import { usePageTitle } from '../usePageTitle';
 
 const VisitorEdit = () => {
     const translate = useTranslate();
@@ -118,10 +117,10 @@ const VisitorEdit = () => {
 
 const VisitorTitle = () => {
     const appTitle = useDefaultTitle();
-    const record = useRecordContext<Customer>();
+    const pageTitle = usePageTitle({ view: 'edit' });
     return (
         <>
-            <title>{`${appTitle} - ${record?.first_name} ${record?.last_name}`}</title>
+            <title>{`${appTitle} - ${pageTitle}`}</title>
             <FullNameField
                 source="last_name"
                 size="32"
diff --git a/examples/demo/src/visitors/VisitorList.tsx b/examples/demo/src/visitors/VisitorList.tsx
@@ -13,8 +13,6 @@ import {
     SelectColumnsButton,
     TopToolbar,
     useDefaultTitle,
-    useGetResourceLabel,
-    useTranslate,
 } from 'react-admin';
 import { useMediaQuery, Theme } from '@mui/material';
 
@@ -24,6 +22,7 @@ import CustomerLinkField from './CustomerLinkField';
 import ColoredNumberField from './ColoredNumberField';
 import MobileGrid from './MobileGrid';
 import VisitorListAside from './VisitorListAside';
+import { usePageTitle } from '../usePageTitle';
 
 const visitorFilters = [
     <SearchInput source="q" alwaysOn />,
@@ -43,11 +42,7 @@ const VisitorListActions = () => (
 
 const VisitorTitle = () => {
     const title = useDefaultTitle();
-    const translate = useTranslate();
-    const getResourceLabel = useGetResourceLabel();
-    const pageTitle = translate('ra.page.list', {
-        name: getResourceLabel('customers', 2),
-    });
+    const pageTitle = usePageTitle({ view: 'list' });
     return (
         <>
             <title>{`${title} - ${pageTitle}`}</title>
