[hooks] useProvideStore

Author: jamesgpearce

src/ui-react/components.tsx

@@ -55,14 +55,15 @@ import {
   useRelationshipsOrRelationshipsById,
 } from './context';
 import {Id, Ids} from '../types/common.d';
-import React, {ReactElement, useContext} from 'react';
+import React, {ReactElement} from 'react';
 import {
   createElement,
   getIndexStoreTableId,
   getProps,
   getRelationshipsStoreTableIds,
 } from './common';
 import {isArray, isUndefined} from '../common/other';
+import {objDel, objGet} from '../common/obj';
 import {
   useCell,
   useCellIds,
@@ -86,9 +87,10 @@ import {
 } from './hooks';
 import {CheckpointIds} from '../types/checkpoints';
 import {EMPTY_STRING} from '../common/strings';
+import {Store} from '../types/store';
 import {arrayMap} from '../common/array';
 
-const {useMemo} = React;
+const {useCallback, useContext, useMemo, useState} = React;
 
 const tableView = (
   {
@@ -236,12 +238,31 @@ export const Provider: typeof ProviderDecl = ({
   children,
 }: ProviderProps & {readonly children: React.ReactNode}): any => {
   const parentValue = useContext(Context);
+
+  const [extraStoresById, setExtraStoresById] = useState<{[id: Id]: Store}>({});
+  const addExtraStore = useCallback(
+    (id: Id, store: Store) =>
+      setExtraStoresById((extraStoresById) =>
+        objGet(extraStoresById, id) == store
+          ? extraStoresById
+          : {...extraStoresById, [id]: store},
+      ),
+    [],
+  );
+  const delExtraStore = useCallback(
+    (id: Id) =>
+      setExtraStoresById((extraStoresById) => ({
+        ...objDel(extraStoresById, id),
+      })),
+    [],
+  );
+
   return (
     <Context.Provider
       value={useMemo(
         () => [
           store ?? parentValue[0],
-          {...parentValue[1], ...storesById},
+          {...parentValue[1], ...storesById, ...extraStoresById},
           metrics ?? parentValue[2],
           {...parentValue[3], ...metricsById},
           indexes ?? parentValue[4],
@@ -252,10 +273,13 @@ export const Provider: typeof ProviderDecl = ({
           {...parentValue[9], ...queriesById},
           checkpoints ?? parentValue[10],
           {...parentValue[11], ...checkpointsById},
+          addExtraStore,
+          delExtraStore,
         ],
         [
           store,
           storesById,
+          extraStoresById,
           metrics,
           metricsById,
           indexes,
@@ -267,6 +291,8 @@ export const Provider: typeof ProviderDecl = ({
           checkpoints,
           checkpointsById,
           parentValue,
+          addExtraStore,
+          delExtraStore,
         ],
       )}
     >

src/ui-react/context.ts

@@ -23,21 +23,23 @@ import React from 'react';
 import {Relationships} from '../types/relationships';
 import {Store} from '../types/store';
 
-const {createContext, useContext} = React;
+const {createContext, useContext, useEffect} = React;
 
 type ContextValue = [
-  Store?,
-  {[storeId: Id]: Store}?,
-  Metrics?,
-  {[metricsId: Id]: Metrics}?,
-  Indexes?,
-  {[indexesId: Id]: Indexes}?,
-  Relationships?,
-  {[relationshipsId: Id]: Relationships}?,
-  Queries?,
-  {[queriesId: Id]: Queries}?,
-  Checkpoints?,
-  {[checkpointsId: Id]: Checkpoints}?,
+  store?: Store,
+  storesById?: {[storeId: Id]: Store},
+  metrics?: Metrics,
+  metricsById?: {[metricsId: Id]: Metrics},
+  indexes?: Indexes,
+  indexesById?: {[indexesId: Id]: Indexes},
+  relationships?: Relationships,
+  relationshipsById?: {[relationshipsId: Id]: Relationships},
+  queries?: Queries,
+  queriesById?: {[queriesId: Id]: Queries},
+  checkpoints?: Checkpoints,
+  checkpointsById?: {[checkpointsId: Id]: Checkpoints},
+  addExtraStore?: (id: string, store: Store) => void,
+  delExtraStore?: (id: string) => void,
 ];
 
 export const Context = createContext<ContextValue>([]);
@@ -92,6 +94,14 @@ export const useStoreOrStoreById = (
   storeOrStoreId?: StoreOrStoreId,
 ): Store | undefined => useThingOrThingById(storeOrStoreId, 0);
 
+export const useProvideStore = (storeId: Id, store: Store): void => {
+  const {12: addExtraStore, 13: delExtraStore} = useContext(Context);
+  useEffect(() => {
+    addExtraStore?.(storeId, store);
+    return () => delExtraStore?.(storeId);
+  }, [addExtraStore, storeId, store, delExtraStore]);
+};
+
 export const useMetrics: typeof useMetricsDecl = (
   id?: Id,
 ): Metrics | undefined => useThing(id, 2);

src/ui-react/hooks.ts

@@ -232,6 +232,7 @@ export {
   useIndexesOrIndexesById,
   useMetrics,
   useMetricsOrMetricsById,
+  useProvideStore,
   useQueries,
   useQueriesOrQueriesById,
   useRelationships,