Fix <SimpleList> throws an error when no data in standalone mode

## Problem Since #10184, published in 5.2.0, `<SimpleList>` and `<Datagrid>` throw an error when used in standalone mode (i.e., outside of a ListContext) with an empty `data`. ## Solution The problem comes from `ListNoResults`, which reads the `ListContext` to determine if there is an active filter. ## Solution Use the alternative `useListContextWithProps` instead of `useListContext`.
marmelab · Oct 29, 2024 · a510725 · a510725
1 parent 60bae65
commit a510725
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CardContent, Typography } from '@mui/material';
 import {
     useGetResourceLabel,
-    useListContext,
+    useListContextWithProps,
     useResourceContext,
     useTranslate,
 } from 'ra-core';
@@ -12,7 +12,7 @@ import { Button } from '../button';
 export const ListNoResults = () => {
     const translate = useTranslate();
     const resource = useResourceContext();
-    const { filterValues, setFilters } = useListContext();
+    const { filterValues, setFilters } = useListContextWithProps();
     const getResourceLabel = useGetResourceLabel();
     if (!resource) {
         throw new Error(
@@ -22,7 +22,9 @@ export const ListNoResults = () => {
     return (
         <CardContent>
             <Typography variant="body2">
-                {filterValues && Object.keys(filterValues).length > 0 ? (
+                {filterValues &&
+                setFilters &&
+                Object.keys(filterValues).length > 0 ? (
                     <>
                         {translate('ra.navigation.no_filtered_results', {
                             resource,

diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx
@@ -11,7 +11,11 @@ import { ListContext, ResourceContextProvider } from 'ra-core';
 import { AdminContext } from '../../AdminContext';
 import { SimpleList } from './SimpleList';
 import { TextField } from '../../field/TextField';
-import { NoPrimaryText } from './SimpleList.stories';
+import {
+    NoPrimaryText,
+    Standalone,
+    StandaloneEmpty,
+} from './SimpleList.stories';
 import { Basic } from '../filter/FilterButton.stories';
 
 const Wrapper = ({ children }: any) => (
@@ -193,4 +197,15 @@ describe('<SimpleList />', () => {
         render(<NoPrimaryText />);
         await screen.findByText('War and Peace');
     });
+
+    describe('standalone', () => {
+        it('should work without a ListContext', async () => {
+            render(<Standalone />);
+            await screen.findByText('War and Peace');
+        });
+        it('should display a message when there is no result', async () => {
+            render(<StandaloneEmpty />);
+            await screen.findByText('No results found.');
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx
@@ -201,3 +201,29 @@ export const FullAppInError = () => (
         </AdminUI>
     </AdminContext>
 );
+
+export const Standalone = () => (
+    <TestMemoryRouter>
+        <SimpleList
+            data={data.books}
+            primaryText={record => record.title}
+            secondaryText={record => record.author}
+            tertiaryText={record => record.year}
+            linkType={false}
+        />
+    </TestMemoryRouter>
+);
+
+export const StandaloneEmpty = () => (
+    <TestMemoryRouter>
+        <ResourceContextProvider value="books">
+            <SimpleList<any>
+                data={[]}
+                primaryText={record => record.title}
+                secondaryText={record => record.author}
+                tertiaryText={record => record.year}
+                linkType={false}
+            />
+        </ResourceContextProvider>
+    </TestMemoryRouter>
+);