Fix lotout doesn't reset resource registration

Closes #7527

Author: fzaninotto

packages/ra-core/src/auth/useLogout.ts

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useRef } from 'react';
+import { removeDoubleSlashes } from '../routing/useCreatePath';
+import { useLocation, useNavigate, Path } from 'react-router-dom';
 
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
 import { useResetStore } from '../store';
 import { useBasename } from '../routing';
-import { removeDoubleSlashes } from '../routing/useCreatePath';
-import { useLocation, useNavigate, Path } from 'react-router-dom';
+import { useResetResourceDefinitions } from '../core/useResetResourceDefinitions';
 
 /**
  * Get a callback for calling the authProvider.logout() method,
@@ -27,6 +28,7 @@ import { useLocation, useNavigate, Path } from 'react-router-dom';
 const useLogout = (): Logout => {
     const authProvider = useAuthProvider();
     const resetStore = useResetStore();
+    const resetResources = useResetResourceDefinitions();
     const navigate = useNavigate();
     // useNavigate forces rerenders on every navigation, even if we don't use the result
     // see https://github.com/remix-run/react-router/issues/7634
@@ -64,6 +66,7 @@ const useLogout = (): Logout => {
             authProvider.logout(params).then(redirectToFromProvider => {
                 if (redirectToFromProvider === false) {
                     resetStore();
+                    resetResources();
                     // do not redirect
                     return;
                 }
@@ -94,10 +97,11 @@ const useLogout = (): Logout => {
                 }
                 navigateRef.current(newLocation, newLocationOptions);
                 resetStore();
+                resetResources();
 
                 return redirectToFromProvider;
             }),
-        [authProvider, resetStore, loginUrl]
+        [authProvider, resetStore, resetResources, loginUrl]
     );
 
     const logoutWithoutProvider = useCallback(

packages/ra-core/src/core/ResourceDefinitionContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, useCallback, useState } from 'react';
+import { createContext, useCallback, useState, useMemo } from 'react';
 import isEqual from 'lodash/isEqual';
 
 import { ResourceDefinition } from '../types';
@@ -8,14 +8,15 @@ export type ResourceDefinitions = {
     [name: string]: ResourceDefinition;
 };
 
-export type ResourceDefinitionContextValue = [
-    ResourceDefinitions,
-    (config: ResourceDefinition) => void
-];
+export type ResourceDefinitionContextValue = {
+    definitions: ResourceDefinitions;
+    setDefinition: (config: ResourceDefinition) => void;
+    reset: () => void;
+};
 
 export const ResourceDefinitionContext = createContext<
     ResourceDefinitionContextValue
->([{}, () => {}]);
+>({ definitions: {}, setDefinition: () => {}, reset: () => {} });
 
 /**
  * Context to store the current resource Definition.
@@ -56,10 +57,17 @@ export const ResourceDefinitionContextProvider = ({
         );
     }, []);
 
+    const reset = useCallback(() => {
+        setState(defaultDefinitions);
+    }, [defaultDefinitions]);
+
+    const contextValue = useMemo(
+        () => ({ definitions, setDefinition, reset }),
+        [definitions] // eslint-disable-line react-hooks/exhaustive-deps
+    );
+
     return (
-        <ResourceDefinitionContext.Provider
-            value={[definitions, setDefinition]}
-        >
+        <ResourceDefinitionContext.Provider value={contextValue}>
             {children}
         </ResourceDefinitionContext.Provider>
     );

packages/ra-core/src/core/index.ts

@@ -9,6 +9,7 @@ export * from './ResourceContextProvider';
 export * from './ResourceDefinitionContext';
 export * from './useGetResourceLabel';
 export * from './useRegisterResource';
+export * from './useResetResourceDefinitions';
 export * from './useResourceContext';
 export * from './useResourceDefinition';
 export * from './useResourceDefinitions';

packages/ra-core/src/core/useRegisterResource.ts

@@ -3,17 +3,36 @@ import { useCallback, useContext } from 'react';
 import { ResourceDefinitionContext } from './ResourceDefinitionContext';
 import { ResourceDefinition } from '../types';
 
+/**
+ * Register one or more resources.
+ *
+ * @example // single parameter
+ * const registerResource = useRegisterResource();
+ * registerResource({
+ *     name: 'posts',
+ *     options: {},
+ *     hasList: true,
+ *     hasEdit: true,
+ *     hasShow: true,
+ *     hasCreate: true,
+ *     icon: <PostIcon />,
+ * });
+ *
+ * @example // register several resources at once
+ * const registerResource = useRegisterResource();
+ * registerResource(resourceDef1, resourceDef2, resourceDef3);
+ */
 export const useRegisterResource = () => {
-    const [, setResourceConfiguration] = useContext(ResourceDefinitionContext);
+    const { setDefinition } = useContext(ResourceDefinitionContext);
 
-    const registerResource = useCallback(
+    const registerResources = useCallback(
         (...resources: ResourceDefinition[]) => {
             resources.forEach(resource => {
-                setResourceConfiguration(resource);
+                setDefinition(resource);
             });
         },
-        [setResourceConfiguration]
+        [setDefinition]
     );
 
-    return registerResource;
+    return registerResources;
 };

packages/ra-core/src/core/useResetResourceDefinitions.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+
+import { ResourceDefinitionContext } from './ResourceDefinitionContext';
+
+export const useResetResourceDefinitions = () => {
+    const { reset } = useContext(ResourceDefinitionContext);
+    return reset;
+};

packages/ra-core/src/core/useResourceDefinitions.ts

@@ -23,4 +23,4 @@ import {
  * // }
  */
 export const useResourceDefinitions = (): ResourceDefinitions =>
-    useContext(ResourceDefinitionContext)[0];
+    useContext(ResourceDefinitionContext).definitions;