[_]: feat/dialogs manager

src/context/dialog-manager/DialogManager.context.tsx

@@ -0,0 +1,35 @@
+import { useMemo, useState, useCallback, type ReactNode, type FC } from 'react';
+import type { ActionDialog, ActionDialogState, DialogActionConfig } from './types';
+import { DialogManagerContext } from './useActionDialog';
+
+export const DialogManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [actionDialogs, setActionDialogs] = useState<Partial<Record<ActionDialog, ActionDialogState>>>({});
+
+  const openDialog = useCallback((dialogKey: ActionDialog, config?: DialogActionConfig) => {
+    setActionDialogs((prevDialogs) => {
+      const newDialogs = config?.closeAllDialogsFirst ? {} : { ...prevDialogs };
+      newDialogs[dialogKey] = { isOpen: true, key: dialogKey, data: config?.data };
+      return newDialogs;
+    });
+  }, []);
+
+  const closeDialog = useCallback((dialogKey: ActionDialog) => {
+    setActionDialogs((prevDialogs) => {
+      return {
+        ...prevDialogs,
+        [dialogKey]: { ...prevDialogs[dialogKey], key: dialogKey, isOpen: false, data: null },
+      };
+    });
+  }, []);
+
+  const memoizedValue = useMemo(
+    () => ({
+      actionDialogs,
+      openDialog,
+      closeDialog,
+    }),
+    [actionDialogs, openDialog, closeDialog],
+  );
+
+  return <DialogManagerContext.Provider value={memoizedValue}>{children}</DialogManagerContext.Provider>;
+};

src/context/dialog-manager/index.ts

@@ -0,0 +1,3 @@
+export { DialogManagerProvider } from './DialogManager.context';
+export { ActionDialog, type DialogActionConfig } from './types';
+export { DialogManagerContext, useActionDialog } from './useActionDialog';

src/context/dialog-manager/types/index.ts

@@ -0,0 +1,18 @@
+export enum ActionDialog {
+  ComposeMessage = 'compose-message',
+  Settings = 'settings',
+}
+
+export interface ActionDialogState {
+  isOpen: boolean;
+  key: ActionDialog;
+  data?: unknown;
+}
+
+export type DialogActionConfig = { closeAllDialogsFirst?: boolean; data?: unknown };
+
+export type ActionDialogContextProps = {
+  actionDialogs: Partial<Record<ActionDialog, ActionDialogState>>;
+  openDialog: (key: ActionDialog, config?: DialogActionConfig) => void;
+  closeDialog: (key: ActionDialog) => void;
+};

src/context/dialog-manager/useActionDialog.tsx

@@ -0,0 +1,32 @@
+import { createContext, useCallback, useContext } from 'react';
+import type { ActionDialog, ActionDialogContextProps } from './types';
+
+export const DialogManagerContext = createContext<ActionDialogContextProps | undefined>(undefined);
+
+export const useActionDialog = () => {
+  const ctx = useContext(DialogManagerContext);
+  if (!ctx) {
+    throw new Error('The context is not initialized. Please use it inside the provider');
+  }
+
+  const isDialogOpen = useCallback(
+    (key: ActionDialog) => {
+      return ctx.actionDialogs[key]?.isOpen ?? false;
+    },
+    [ctx.actionDialogs],
+  );
+
+  const getDialogData = useCallback(
+    (key: ActionDialog) => {
+      return ctx.actionDialogs[key]?.data ?? null;
+    },
+    [ctx.actionDialogs],
+  );
+
+  return {
+    isDialogOpen,
+    getDialogData,
+    openDialog: ctx.openDialog,
+    closeDialog: ctx.closeDialog,
+  };
+};