Merge pull request marmelab#11096 from marmelab/store-list-items

Add `Store.listItems` method

Author: slax57

packages/ra-core/src/store/localStorageStore.spec.ts

@@ -68,4 +68,33 @@ describe('localStorageStore', () => {
             expect(store.getItem('foo')).toEqual(undefined); //deleted during setup
         });
     });
+    describe('listItems', () => {
+        it('should return an object containing all items with the given prefix', () => {
+            const store = localStorageStore();
+            store.setup();
+            store.setItem('foo', 'bar');
+            store.setItem('foo2', 'bar2');
+            store.setItem('foo3', 'bar3');
+            store.setItem('hello', 'world');
+            expect(store.listItems('foo')).toEqual({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+            });
+        });
+        it('should return an object containing all items when no prefix is provided', () => {
+            const store = localStorageStore();
+            store.setup();
+            store.setItem('foo', 'bar');
+            store.setItem('foo2', 'bar2');
+            store.setItem('foo3', 'bar3');
+            store.setItem('hello', 'world');
+            expect(store.listItems()).toEqual({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+                hello: 'world',
+            });
+        });
+    });
 });

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

@@ -25,7 +25,7 @@ describe('localStorageStore', () => {
 
     it('should update all components using the same store item on update', () => {
         const UpdateStore = () => {
-            const [, setValue] = useStore('foo.bar');
+            const [, setValue] = useStore<string>('foo.bar');
             return <button onClick={() => setValue('world')}>update</button>;
         };
         render(
@@ -43,7 +43,7 @@ describe('localStorageStore', () => {
 
     it('should not update components using other store key on update', () => {
         const UpdateStore = () => {
-            const [, setValue] = useStore('other.key');
+            const [, setValue] = useStore<string>('other.key');
             return <button onClick={() => setValue('world')}>update</button>;
         };
         render(

packages/ra-core/src/store/localStorageStore.stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { localStorageStore } from './localStorageStore';
 import { StoreContextProvider } from './StoreContextProvider';
 import { useStore } from './useStore';
+import { useStoreContext } from './useStoreContext';
 
 export default {
     title: 'ra-core/store/localStorage',
@@ -54,3 +55,46 @@ export const Basic = () => {
         </StoreContextProvider>
     );
 };
+
+const StoreList = () => {
+    const store = useStoreContext();
+    const [items, setItems] = React.useState({});
+    return (
+        <>
+            <div style={{ display: 'flex', gap: '8px' }}>
+                <button
+                    type="button"
+                    onClick={() => setItems(store.listItems())}
+                >
+                    Get all items
+                </button>
+                <button
+                    type="button"
+                    onClick={() => setItems(store.listItems('foo.'))}
+                >
+                    Get items with prefix
+                </button>
+            </div>
+            <pre>{JSON.stringify(items, null, 2)}</pre>
+        </>
+    );
+};
+export const ListItems = () => {
+    return (
+        <StoreContextProvider value={localStorageStore()}>
+            <h1>Values</h1>
+            <dl>
+                <StoreReader name="foo.bar" />
+                <StoreReader name="foo.baz" />
+                <StoreReader name="bar.baz" />
+            </dl>
+            <h1>Setter</h1>
+            <dl>
+                <StoreSetter name="foo.bar" />
+                <StoreSetter name="foo.baz" />
+                <StoreSetter name="bar.baz" />
+            </dl>
+            <StoreList />
+        </StoreContextProvider>
+    );
+};

packages/ra-core/src/store/localStorageStore.ts

@@ -148,6 +148,24 @@ export const localStorageStore = (
                 delete subscriptions[id];
             };
         },
+        listItems: (keyPrefix?: string) => {
+            const storage = getStorage();
+            const fullPrefix = `${prefix}.${keyPrefix != null ? keyPrefix : ''}`;
+
+            return Object.entries(storage).reduce(
+                (acc, [key, value]) => {
+                    if (
+                        // version is considered internal
+                        key !== `${prefix}.version` &&
+                        key.startsWith(fullPrefix)
+                    ) {
+                        acc[key.substring(prefix.length + 1)] = tryParse(value);
+                    }
+                    return acc;
+                },
+                {} as Record<string, unknown>
+            );
+        },
     };
 };
 

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

@@ -93,4 +93,35 @@ describe('memoryStore', () => {
 
         await screen.findByText('John');
     });
+    describe('listItems', () => {
+        it('should return an object containing all items with the given prefix', () => {
+            const store = memoryStore({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+                hello: 'world',
+            });
+            store.setup();
+            expect(store.listItems('foo')).toEqual({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+            });
+        });
+        it('should return an object containing all items when no prefix is provided', () => {
+            const store = memoryStore({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+                hello: 'world',
+            });
+            store.setup();
+            expect(store.listItems()).toEqual({
+                foo: 'bar',
+                foo2: 'bar2',
+                foo3: 'bar3',
+                hello: 'world',
+            });
+        });
+    });
 });

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

@@ -107,5 +107,18 @@ export const memoryStore = (
                 delete subscriptions[id];
             };
         },
+        listItems: (keyPrefix?: string) => {
+            return Array.from(storage.entries()).reduce(
+                (acc, [key, value]) => {
+                    if (keyPrefix != null && !key.startsWith(keyPrefix)) {
+                        return acc;
+                    }
+
+                    acc[key] = value;
+                    return acc;
+                },
+                {} as Record<string, unknown>
+            );
+        },
     };
 };

packages/ra-core/src/store/types.ts

@@ -7,4 +7,5 @@ export interface Store {
     removeItems: (keyPrefix: string) => void;
     reset: () => void;
     subscribe: (key: string, callback: (value: any) => void) => () => void;
+    listItems?: (keyPrefix?: string) => Record<string, unknown>;
 }