fix: make DialogManagerProvider a pure component

Author: MartinCupela

src/components/Dialog/__tests__/DialogManagerContext.test.js

@@ -64,14 +64,17 @@ const DialogTestComponent = ({ dialogId, managerId }) => {
 
 describe('DialogManagerContext', () => {
   describe('DialogManagerProvider', () => {
-    it('does not create a new dialog manager when no id is provided', () => {
+    it('creates a new dialog manager when no id is provided with randomly generated id', () => {
       render(
         <DialogManagerProvider>
           <TestComponent />
         </DialogManagerProvider>,
       );
 
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT).textContent).toBe('0');
+      expect(screen.getByTestId(TEST_IDS.MANAGER_ID_DISPLAY).textContent).toEqual(
+        expect.any(String),
+      );
     });
 
     it('creates a new dialog manager and adds it to the manager pool when id is provided', () => {
@@ -81,8 +84,9 @@ describe('DialogManagerContext', () => {
         </DialogManagerProvider>,
       );
 
-      const managerId = screen.getByTestId(TEST_IDS.MANAGER_ID_DISPLAY).textContent;
-      expect(managerId).toBe(TEST_MANAGER_ID);
+      expect(screen.getByTestId(TEST_IDS.MANAGER_ID_DISPLAY).textContent).toBe(
+        TEST_MANAGER_ID,
+      );
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT).textContent).toBe('0');
     });
 
@@ -93,8 +97,9 @@ describe('DialogManagerContext', () => {
           <TestComponent dialogManagerId={MANAGER_2_ID} />
         </DialogManagerProvider>,
       );
-      const managerId = screen.getByTestId(TEST_IDS.MANAGER_ID_DISPLAY).textContent;
-      expect(managerId).toBe(MANAGER_2_ID);
+      expect(screen.getByTestId(TEST_IDS.MANAGER_ID_DISPLAY).textContent).toBe(
+        MANAGER_2_ID,
+      );
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT).textContent).toBe('0');
     });
 
@@ -120,7 +125,7 @@ describe('DialogManagerContext', () => {
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT)).toHaveTextContent('0');
     });
 
-    it('retrieves existing dialog manager and does not create a new dialog manager', () => {
+    it('retrieves the existing dialog manager and does not create a new dialog manager', () => {
       const dialogId = 'shared-dialog';
       render(
         <DialogManagerProvider id={SHARED_MANAGER_ID}>

src/context/DialogManagerContext.tsx

@@ -14,19 +14,23 @@ import type { PropsWithChildrenOnly } from '../types/types';
 type DialogManagerId = string;
 
 type DialogManagersState = Record<DialogManagerId, DialogManager | undefined>;
-const dialogManagersStore: StateStore<DialogManagersState> = new StateStore({});
+const dialogManagersRegistry: StateStore<DialogManagersState> = new StateStore({});
 
 const getDialogManager = (id: string): DialogManager | undefined =>
-  dialogManagersStore.getLatestValue()[id];
+  dialogManagersRegistry.getLatestValue()[id];
 
-const addDialogManager = (dialogManager: DialogManager) => {
-  if (getDialogManager(dialogManager.id)) return;
-  dialogManagersStore.partialNext({ [dialogManager.id]: dialogManager });
+const getOrCreateDialogManager = (id: string) => {
+  let manager = getDialogManager(id);
+  if (!manager) {
+    manager = new DialogManager({ id });
+    dialogManagersRegistry.partialNext({ [id]: manager });
+  }
+  return manager;
 };
 
 const removeDialogManager = (id: string) => {
   if (!getDialogManager(id)) return;
-  dialogManagersStore.partialNext({ [id]: undefined });
+  dialogManagersRegistry.partialNext({ [id]: undefined });
 };
 
 type DialogManagerProviderContextValue = {
@@ -47,18 +51,22 @@ export const DialogManagerProvider = ({
   children,
   id,
 }: PropsWithChildren<{ id?: string }>) => {
-  const dialogManager = useMemo<DialogManager>(
-    () => (id && getDialogManager(id)) || new DialogManager({ id }),
-    [id],
-  );
+  const [dialogManager, setDialogManager] = useState<DialogManager | null>(() => {
+    if (id) return getDialogManager(id) ?? null;
+    return new DialogManager(); // will not be included in the registry
+  });
 
-  addDialogManager(dialogManager);
-  useEffect(
-    () => () => {
-      removeDialogManager(dialogManager.id);
-    },
-    [dialogManager],
-  );
+  useEffect(() => {
+    if (!id) return;
+    setDialogManager(getOrCreateDialogManager(id));
+    return () => {
+      removeDialogManager(id);
+      setDialogManager(null);
+    };
+  }, [id]);
+
+  // temporarily do not render until a new dialog manager is created
+  if (!dialogManager) return null;
 
   return (
     <DialogManagerProviderContext.Provider value={{ dialogManager }}>
@@ -126,7 +134,7 @@ export const useDialogManager = ({
     const { managerInNewState } = getManagerFromStore({
       dialogId,
       dialogManagerId,
-      newState: dialogManagersStore.getLatestValue(),
+      newState: dialogManagersRegistry.getLatestValue(),
       previousState: undefined,
     });
     return managerInNewState
@@ -136,7 +144,7 @@ export const useDialogManager = ({
 
   useEffect(() => {
     if (!dialogId && !dialogManagerId) return;
-    const unsubscribe = dialogManagersStore.subscribeWithSelector(
+    const unsubscribe = dialogManagersRegistry.subscribeWithSelector(
       (state) => state,
       (newState, previousState) => {
         const { managerInNewState, managerInPrevState } = getManagerFromStore({