Fix store initialization issue

Author: djhi

packages/ra-core/src/store/StoreContextProvider.tsx

@@ -1,21 +1,52 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { StoreContext } from './StoreContext';
 import { Store } from './types';
 
 export const StoreContextProvider = ({
     value: Store,
     children,
 }: StoreContextProviderProps) => {
+    const initialized = useRef(false);
+    const itemsToSetAfterInitialization = useRef<Record<string, any>>([]);
+
     useEffect(() => {
         Store.setup();
+        // Because children might call setItem before the store is initialized,
+        // we store those calls parameters and apply them once the store is ready
+        if (itemsToSetAfterInitialization.current.length > 0) {
+            const items = Object.values(itemsToSetAfterInitialization.current);
+            for (const [key, value] of items) {
+                Store.setItem(key, value);
+            }
+            itemsToSetAfterInitialization.current = {};
+        }
+        initialized.current = true;
         return () => {
             Store.teardown();
+            initialized.current = false;
         };
     }, [Store]);
 
+    const wrapper = useMemo<Store>(() => {
+        return {
+            ...Store,
+            setItem: (key, value) => {
+                // Because children might call setItem before the store is initialized,
+                // we store those calls parameters and apply them once the store is ready
+                if (!initialized.current) {
+                    itemsToSetAfterInitialization.current.push([key, value]);
+                    return;
+                }
+                Store.setItem(key, value);
+            },
+        };
+    }, [Store, initialized]);
+
     return (
-        <StoreContext.Provider value={Store}>{children}</StoreContext.Provider>
+        <StoreContext.Provider value={wrapper}>
+            {children}
+        </StoreContext.Provider>
     );
 };
 

packages/ra-core/src/store/memoryStore.tsx

@@ -22,7 +22,7 @@ export const memoryStore = (
     initialStorage: Record<string, any> = {}
 ): Store => {
     // Use a flat Map to store key-value pairs directly without treating dots as nested paths
-    let storage = new Map<string, any>(Object.entries(initialStorage));
+    let storage = new Map<string, any>(Object.entries(initialStorage ?? {}));
     const subscriptions: { [key: string]: Subscription } = {};
 
     const publish = (key: string, value: any) => {

packages/ra-core/src/store/useStore.spec.tsx

@@ -82,9 +82,7 @@ describe('useStore', () => {
             return <button onClick={() => setValue('world')}>update</button>;
         };
         render(
-            <StoreContextProvider
-                value={memoryStore({ foo: { bar: 'hello' } })}
-            >
+            <StoreContextProvider value={memoryStore({ 'foo.bar': 'hello' })}>
                 <StoreReader name="foo.bar" />
                 <UpdateStore />
             </StoreContextProvider>
@@ -100,9 +98,7 @@ describe('useStore', () => {
             return <button onClick={() => setValue('world')}>update</button>;
         };
         render(
-            <StoreContextProvider
-                value={memoryStore({ foo: { bar: 'hello' } })}
-            >
+            <StoreContextProvider value={memoryStore({ 'foo.bar': 'hello' })}>
                 <StoreReader name="foo.bar" />
                 <UpdateStore />
             </StoreContextProvider>

packages/ra-ui-materialui/src/theme/useTheme.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { CoreAdminContext, useStore, memoryStore } from 'ra-core';
+import { CoreAdminContext, useStore, memoryStore, StoreSetter } from 'ra-core';
 import expect from 'expect';
-import { render, screen, renderHook } from '@testing-library/react';
+import { render, screen, renderHook, waitFor } from '@testing-library/react';
 import { useTheme } from './useTheme';
 import { AdminContext } from '../AdminContext';
 import { ThemeTestWrapper } from '../layout/ThemeTestWrapper';
@@ -99,32 +99,21 @@ describe('useTheme', () => {
         expect(screen.queryByText('dark')).not.toBeNull();
     });
 
-    it('should return theme from settings when available', () => {
-        const { result: storeResult } = renderHook(() => useStore('theme'), {
-            wrapper: ({ children }: any) => (
-                <AdminContext
-                    authProvider={authProvider}
-                    darkTheme={defaultDarkTheme}
-                >
-                    {children}
-                </AdminContext>
-            ),
-        });
-        const [_, setTheme] = storeResult.current;
-        setTheme('dark');
-
-        const { result: themeResult } = renderHook(() => useTheme(), {
-            wrapper: ({ children }: any) => (
-                <AdminContext
-                    authProvider={authProvider}
-                    darkTheme={defaultDarkTheme}
-                >
-                    {children}
-                </AdminContext>
-            ),
-        });
-        const [theme, __] = themeResult.current;
-
-        expect(theme).toEqual('dark');
+    it('should return theme from settings when available', async () => {
+        const ThemeViewer = () => {
+            const [theme] = useTheme();
+            return <>{theme}</>;
+        };
+        render(
+            <AdminContext
+                authProvider={authProvider}
+                darkTheme={defaultDarkTheme}
+            >
+                <StoreSetter name="theme" value="dark">
+                    <ThemeViewer />
+                </StoreSetter>
+            </AdminContext>
+        );
+        await screen.findByText('dark');
     });
 });