dialog context

src/context/dialog-context/dialog-context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { emptyFn } from '@/lib/utils';
+
+export interface DialogContext {
+    openCreateDiagramDialog: () => void;
+    closeCreateDiagramDialog: () => void;
+}
+
+export const dialogContext = createContext<DialogContext>({
+    openCreateDiagramDialog: emptyFn,
+    closeCreateDiagramDialog: emptyFn,
+});

src/context/dialog-context/dialog-provider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { dialogContext } from './dialog-context';
+import { CreateDiagramDialog } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
+
+export const DialogProvider: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => {
+    const [openNewDiagramDialog, setOpenNewDiagramDialog] =
+        React.useState(false);
+
+    return (
+        <dialogContext.Provider
+            value={{
+                openCreateDiagramDialog: () => setOpenNewDiagramDialog(true),
+                closeCreateDiagramDialog: () => setOpenNewDiagramDialog(false),
+            }}
+        >
+            {children}
+            <CreateDiagramDialog dialog={{ open: openNewDiagramDialog }} />
+        </dialogContext.Provider>
+    );
+};

src/dialogs/create-diagram-dialog/create-diagram-dialog-context.tsx

@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-import { emptyFn } from '@/lib/utils';
-
-export interface CreateDiagramDialogContext {
-    openCreateDiagramDialog: () => void;
-    closeCreateDiagramDialog: () => void;
-}
-
-export const createDiagramDialogContext =
-    createContext<CreateDiagramDialogContext>({
-        openCreateDiagramDialog: emptyFn,
-        closeCreateDiagramDialog: emptyFn,
-    });

src/dialogs/create-diagram-dialog/create-diagram-dialog-provider.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { createDiagramDialogContext } from './create-diagram-dialog-context';
-import { CreateDiagramDialog } from './create-diagram-dialog';
-
-export const CreateDiagramDialogProvider: React.FC<React.PropsWithChildren> = ({
-    children,
-}) => {
-    const [open, setOpen] = React.useState(false);
-
-    return (
-        <createDiagramDialogContext.Provider
-            value={{
-                openCreateDiagramDialog: () => setOpen(true),
-                closeCreateDiagramDialog: () => setOpen(false),
-            }}
-        >
-            {children}
-            <CreateDiagramDialog dialog={{ open }} />
-        </createDiagramDialogContext.Provider>
-    );
-};

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -17,7 +17,6 @@ import { CodeSnippet } from '@/components/code-snippet/code-snippet';
 import { Textarea } from '@/components/textarea/textarea';
 import { useStorage } from '@/hooks/use-storage';
 import { Diagram, loadFromDatabaseMetadata } from '@/lib/domain/diagram';
-import { useCreateDiagramDialog } from '@/hooks/use-create-diagram-dialog';
 import { useNavigate } from 'react-router-dom';
 import { useConfig } from '@/hooks/use-config';
 import {
@@ -26,6 +25,7 @@ import {
 } from '@/lib/data/import-metadata/metadata-types/database-metadata';
 import { generateId } from '@/lib/utils';
 import { useChartDB } from '@/hooks/use-chartdb';
+import { useDiagramDialog } from '@/hooks/use-dialog';
 
 enum CreateDiagramDialogStep {
     SELECT_DATABASE = 'SELECT_DATABASE',
@@ -43,7 +43,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
     const [databaseType, setDatabaseType] = React.useState<DatabaseType>(
         DatabaseType.GENERIC
     );
-    const { closeCreateDiagramDialog } = useCreateDiagramDialog();
+    const { closeCreateDiagramDialog } = useDiagramDialog();
     const { updateConfig } = useConfig();
     const [scriptResult, setScriptResult] = React.useState('');
     const [step, setStep] = React.useState<CreateDiagramDialogStep>(

src/hooks/use-create-diagram-dialog.ts

@@ -1,5 +0,0 @@
-import { useContext } from 'react';
-import { createDiagramDialogContext } from '@/dialogs/create-diagram-dialog/create-diagram-dialog-context';
-
-export const useCreateDiagramDialog = () =>
-    useContext(createDiagramDialogContext);

src/hooks/use-dialog.ts

@@ -0,0 +1,4 @@
+import { dialogContext } from '@/context/dialog-context/dialog-context';
+import { useContext } from 'react';
+
+export const useDiagramDialog = () => useContext(dialogContext);

src/pages/editor-page/editor-page.tsx

@@ -9,13 +9,13 @@ import {
 import { SidePanel } from './side-panel/side-panel';
 import { Canvas } from './canvas/canvas';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useCreateDiagramDialog } from '@/hooks/use-create-diagram-dialog';
 import { useConfig } from '@/hooks/use-config';
 import { useChartDB } from '@/hooks/use-chartdb';
+import { useDiagramDialog } from '@/hooks/use-dialog';
 
 export const EditorPage: React.FC = () => {
     const { loadDiagram } = useChartDB();
-    const { openCreateDiagramDialog } = useCreateDiagramDialog();
+    const { openCreateDiagramDialog } = useDiagramDialog();
     const { diagramId } = useParams<{ diagramId: string }>();
     const { config } = useConfig();
     const navigate = useNavigate();

src/pages/editor-page/top-navbar/top-navbar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
     Menubar,
     MenubarContent,
@@ -18,14 +18,14 @@ import { Input } from '@/components/input/input';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useClickAway, useKeyPressEvent } from 'react-use';
 import ChartDBLogo from '@/assets/logo.png';
-import { useCreateDiagramDialog } from '@/hooks/use-create-diagram-dialog';
+import { useDiagramDialog } from '@/hooks/use-dialog';
 
 export interface TopNavbarProps {}
 
 export const TopNavbar: React.FC<TopNavbarProps> = () => {
     const { diagramName, updateDiagramName, currentDiagram } = useChartDB();
-    const { openCreateDiagramDialog } = useCreateDiagramDialog();
-    const [editMode, setEditMode] = React.useState(false);
+    const { openCreateDiagramDialog } = useDiagramDialog();
+    const [editMode, setEditMode] = useState(false);
     const [editedDiagramName, setEditedDiagramName] =
         React.useState(diagramName);
     const inputRef = React.useRef<HTMLInputElement>(null);

src/router.tsx

@@ -5,11 +5,11 @@ import { EditorPage } from './pages/editor-page/editor-page';
 import { ChartDBProvider } from './context/chartdb-context/chartdb-provider';
 import { ReactFlowProvider } from '@xyflow/react';
 import { StorageProvider } from './context/storage-context/storage-provider';
-import { CreateDiagramDialogProvider } from './dialogs/create-diagram-dialog/create-diagram-dialog-provider';
 import { ConfigProvider } from './context/config-context/config-provider';
 import { HistoryProvider } from './context/history-context/history-provider';
 import { RedoUndoStackProvider } from './context/history-context/redo-undo-stack-provider';
 import { LayoutProvider } from './context/layout-context/layout-provider';
+import { DialogProvider } from './context/dialog-context/dialog-provider';
 
 const routes: RouteObject[] = [
     ...['', 'diagrams/:diagramId'].map((path) => ({
@@ -21,11 +21,11 @@ const routes: RouteObject[] = [
                         <RedoUndoStackProvider>
                             <ChartDBProvider>
                                 <HistoryProvider>
-                                    <CreateDiagramDialogProvider>
+                                    <DialogProvider>
                                         <ReactFlowProvider>
                                             <EditorPage />
                                         </ReactFlowProvider>
-                                    </CreateDiagramDialogProvider>
+                                    </DialogProvider>
                                 </HistoryProvider>
                             </ChartDBProvider>
                         </RedoUndoStackProvider>