From deb2aa998674b4586d1b4a4bea44f9869526fbd9 Mon Sep 17 00:00:00 2001 From: Vadim Panfilov Date: Tue, 28 Sep 2021 12:33:39 -0500 Subject: [PATCH 1/2] Added ability to override onFailure property in useShowController.ts, also added "error" to data returned object --- docs/Show.md | 18 ++++++++++------ .../controller/details/useShowController.ts | 21 +++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/docs/Show.md b/docs/Show.md index cf50515ad1e..d478a74ef01 100644 --- a/docs/Show.md +++ b/docs/Show.md @@ -148,7 +148,7 @@ const PostShow = props => ( ``` {% endraw %} -You can use the `useRecordContext` hook to display non-editable details about the current record in the aside component: +You can use the `useRecordContext` hook to display non-editable details about the current record in the aside component: {% raw %} ```jsx @@ -184,7 +184,7 @@ const PostShow = props => ( ); -// use a custom component as root component +// use a custom component as root component const PostShow = props => ( ... @@ -224,7 +224,7 @@ React-admin provides guessers for the `List` view (`ListGuesser`), the `Edit` vi The `` component takes care of two things: 1. (the "controller") Fetching data based on the URL and transforming it -2. (the "view") Rendering the page title, the actions, the content and aside areas +2. (the "view") Rendering the page title, the actions, the content and aside areas In some cases, you may want to customize the view entirely (i.e. keep the code for step 1, and provide your own code for step 2). For these cases, react-admin provides a hook called `useShowController()`, which contains just the controller part of the `` component. @@ -242,7 +242,10 @@ const MyShow = props => { record, // record fetched via dataProvider.getOne() based on the id from the location resource, // the resource name, deduced from the location. e.g. 'posts' version, // integer used by the refresh feature - } = useShowController(props); + error, // error returned by dataProvider (not accessible by default ) + // This property is not accessible by default:due to redirect to basePath + // In order to access error, override props.onFailure + } = useShowController({ ...props, onFailure: () => {} }); return (

{defaultTitle}

@@ -251,6 +254,7 @@ const MyShow = props => { record, resource, version, + error, })}
); @@ -267,7 +271,9 @@ const PostShow = props => ( This custom Show view has no action buttons or aside component - it's up to you to add them in pure React. -**Tip**: You don't have to clone the child element. If you can't reuse an existing form component like ``, feel free to write the form code inside your custom `MyShow` component. +**Tip**: You don't have to clone the child element. If you can't reuse an existing form component like ``, feel free to write the form code inside your custom `MyShow` component. + +**Tip**: When data provider returns an error, users are notified and redirected to component's base URL; to override this behavior, provide `onFailure` property to `useShowController`. ## The `` component @@ -409,7 +415,7 @@ You can find components for react-admin in third-party repositories. ## Displaying Fields depending on the user permissions -You might want to display some fields only to users with specific permissions. +You might want to display some fields only to users with specific permissions. Before rendering the `Show` component, react-admin calls the `authProvider.getPermissions()` method, and passes the result to the component as the `permissions` prop. It's up to your `authProvider` to return whatever you need to check roles and permissions inside your component. diff --git a/packages/ra-core/src/controller/details/useShowController.ts b/packages/ra-core/src/controller/details/useShowController.ts index 1f9fb0167b3..5368fda9fe9 100644 --- a/packages/ra-core/src/controller/details/useShowController.ts +++ b/packages/ra-core/src/controller/details/useShowController.ts @@ -15,6 +15,7 @@ export interface ShowProps { hasList?: boolean; id?: Identifier; resource?: string; + onFailure?: (e: any) => void; [key: string]: any; } @@ -34,6 +35,7 @@ export interface ShowControllerProps { record?: RecordType; refetch: Refetch; version: number; + error?: any; } /** @@ -64,18 +66,18 @@ export const useShowController = ( const redirect = useRedirect(); const refresh = useRefresh(); const version = useVersion(); - const { data: record, loading, loaded, refetch } = useGetOne( - resource, - id, - { - action: CRUD_GET_ONE, - onFailure: () => { + const { data: record, loading, loaded, refetch, error } = useGetOne< + RecordType + >(resource, id, { + action: CRUD_GET_ONE, + onFailure: + props.onFailure ?? + (() => { notify('ra.notification.item_doesnt_exist', 'warning'); redirect('list', basePath); refresh(); - }, - } - ); + }), + }); const getResourceLabel = useGetResourceLabel(); const defaultTitle = translate('ra.page.show', { @@ -97,5 +99,6 @@ export const useShowController = ( hasList, hasShow, version, + error, }; }; From abf2df29876b0bad4442e3e07ab8a329d8df9ad1 Mon Sep 17 00:00:00 2001 From: Vadim Panfilov Date: Fri, 1 Oct 2021 09:52:39 -0500 Subject: [PATCH 2/2] Reversed whitespace changes in docs; clarified redirect usage --- docs/Show.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/Show.md b/docs/Show.md index d478a74ef01..0fac02651a0 100644 --- a/docs/Show.md +++ b/docs/Show.md @@ -148,7 +148,7 @@ const PostShow = props => ( ``` {% endraw %} -You can use the `useRecordContext` hook to display non-editable details about the current record in the aside component: +You can use the `useRecordContext` hook to display non-editable details about the current record in the aside component: {% raw %} ```jsx @@ -184,7 +184,7 @@ const PostShow = props => ( ); -// use a custom component as root component +// use a custom component as root component const PostShow = props => ( ... @@ -224,7 +224,7 @@ React-admin provides guessers for the `List` view (`ListGuesser`), the `Edit` vi The `` component takes care of two things: 1. (the "controller") Fetching data based on the URL and transforming it -2. (the "view") Rendering the page title, the actions, the content and aside areas +2. (the "view") Rendering the page title, the actions, the content and aside areas In some cases, you may want to customize the view entirely (i.e. keep the code for step 1, and provide your own code for step 2). For these cases, react-admin provides a hook called `useShowController()`, which contains just the controller part of the `` component. @@ -243,8 +243,8 @@ const MyShow = props => { resource, // the resource name, deduced from the location. e.g. 'posts' version, // integer used by the refresh feature error, // error returned by dataProvider (not accessible by default ) - // This property is not accessible by default:due to redirect to basePath - // In order to access error, override props.onFailure + // This property is not accessible by default due to redirect to basePath + // In order to access error, override props.onFailure to prevent default redirect } = useShowController({ ...props, onFailure: () => {} }); return (
@@ -271,7 +271,7 @@ const PostShow = props => ( This custom Show view has no action buttons or aside component - it's up to you to add them in pure React. -**Tip**: You don't have to clone the child element. If you can't reuse an existing form component like ``, feel free to write the form code inside your custom `MyShow` component. +**Tip**: You don't have to clone the child element. If you can't reuse an existing form component like ``, feel free to write the form code inside your custom `MyShow` component. **Tip**: When data provider returns an error, users are notified and redirected to component's base URL; to override this behavior, provide `onFailure` property to `useShowController`. @@ -415,7 +415,7 @@ You can find components for react-admin in third-party repositories. ## Displaying Fields depending on the user permissions -You might want to display some fields only to users with specific permissions. +You might want to display some fields only to users with specific permissions. Before rendering the `Show` component, react-admin calls the `authProvider.getPermissions()` method, and passes the result to the component as the `permissions` prop. It's up to your `authProvider` to return whatever you need to check roles and permissions inside your component.