From ca7facb02cad53cc8d7605fabe151c1b5ad9e74e Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Wed, 21 Aug 2024 10:43:20 +0300
Subject: [PATCH] create another diagram

---
 .../redo-undo-stack-provider.tsx              |  2 -
 .../create-diagram-dialog.tsx                 | 80 ++++++++++++++-----
 .../editor-page/top-navbar/top-navbar.tsx     | 22 ++---
 3 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/context/history-context/redo-undo-stack-provider.tsx b/src/context/history-context/redo-undo-stack-provider.tsx
index 16986dd8..3eb66c4d 100644
--- a/src/context/history-context/redo-undo-stack-provider.tsx
+++ b/src/context/history-context/redo-undo-stack-provider.tsx
@@ -11,8 +11,6 @@ export const RedoUndoStackProvider: React.FC<React.PropsWithChildren> = ({
     const [undoStack, setUndoStack] = React.useState<RedoUndoAction[]>([]);
     const [redoStack, setRedoStack] = React.useState<RedoUndoAction[]>([]);
 
-    console.log({ undoStack });
-
     const addRedoAction: RedoUndoStackContext['addRedoAction'] = useCallback(
         (action) => {
             setRedoStack((prev) => [...prev, action]);
diff --git a/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx b/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
index f22282fb..9f6ce71e 100644
--- a/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
+++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
@@ -25,6 +25,7 @@ import {
     loadDatabaseMetadata,
 } from '@/lib/data/import-metadata/metadata-types/database-metadata';
 import { generateId } from '@/lib/utils';
+import { useChartDB } from '@/hooks/use-chartdb';
 
 enum CreateDiagramDialogStep {
     SELECT_DATABASE = 'SELECT_DATABASE',
@@ -38,6 +39,7 @@ export interface CreateDiagramDialogProps {
 export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
     dialog,
 }) => {
+    const { diagramId } = useChartDB();
     const [databaseType, setDatabaseType] = React.useState<DatabaseType>(
         DatabaseType.GENERIC
     );
@@ -59,6 +61,8 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
         fetchDiagrams();
     }, [listDiagrams, setDiagramNumber]);
 
+    const hasExistingDiagram = (diagramId ?? '').trim().length !== 0;
+
     const createNewDiagram = useCallback(async () => {
         let diagram: Diagram = {
             id: generateId(),
@@ -79,6 +83,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
 
         await addDiagram({ diagram });
         await updateConfig({ defaultDiagramId: diagram.id });
+        setDiagramNumber(diagramNumber + 1);
         closeCreateDiagramDialog();
         navigate(`/diagrams/${diagram.id}`);
     }, [
@@ -196,42 +201,58 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
             case CreateDiagramDialogStep.SELECT_DATABASE:
                 return (
                     <DialogFooter className="flex !justify-between gap-2">
-                        <DialogClose asChild>
+                        {hasExistingDiagram ? (
+                            <DialogClose asChild>
+                                <Button
+                                    type="button"
+                                    variant="secondary"
+                                    // onClick={createNewDiagram}
+                                >
+                                    Cancel
+                                </Button>
+                            </DialogClose>
+                        ) : (
+                            <div></div>
+                        )}
+                        {/* <DialogClose asChild> */}
+                        <div className="flex gap-2">
                             <Button
                                 type="button"
-                                variant="secondary"
+                                variant="outline"
                                 onClick={createNewDiagram}
                             >
                                 Skip
                             </Button>
-                        </DialogClose>
-                        <DialogClose asChild>
                             <Button
                                 type="button"
                                 variant="default"
                                 disabled={databaseType === DatabaseType.GENERIC}
+                                onClick={() =>
+                                    setStep(
+                                        CreateDiagramDialogStep.IMPORT_DATABASE
+                                    )
+                                }
                             >
                                 Continue
                             </Button>
-                        </DialogClose>
+                        </div>
+                        {/* </DialogClose> */}
                     </DialogFooter>
                 );
             case CreateDiagramDialogStep.IMPORT_DATABASE:
                 return (
                     <DialogFooter className="flex !justify-between gap-2">
-                        <DialogClose asChild>
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                onClick={() =>
-                                    setStep(
-                                        CreateDiagramDialogStep.SELECT_DATABASE
-                                    )
-                                }
-                            >
-                                Back
-                            </Button>
-                        </DialogClose>
+                        {/* <DialogClose asChild> */}
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            onClick={() =>
+                                setStep(CreateDiagramDialogStep.SELECT_DATABASE)
+                            }
+                        >
+                            Back
+                        </Button>
+                        {/* </DialogClose> */}
                         <div className="flex gap-2">
                             <DialogClose asChild>
                                 <Button
@@ -258,13 +279,30 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
             default:
                 return null;
         }
-    }, [step, databaseType, scriptResult, createNewDiagram]);
+    }, [
+        step,
+        databaseType,
+        scriptResult,
+        createNewDiagram,
+        hasExistingDiagram,
+    ]);
 
     return (
-        <Dialog {...dialog}>
+        <Dialog
+            {...dialog}
+            onOpenChange={(open) => {
+                if (!hasExistingDiagram) {
+                    return;
+                }
+
+                if (!open) {
+                    closeCreateDiagramDialog();
+                }
+            }}
+        >
             <DialogContent
                 className="flex flex-col min-w-[500px] xl:min-w-[75vw] max-h-[80vh] overflow-y-auto"
-                showClose={false}
+                showClose={hasExistingDiagram}
             >
                 {renderHeader()}
                 {renderContent()}
diff --git a/src/pages/editor-page/top-navbar/top-navbar.tsx b/src/pages/editor-page/top-navbar/top-navbar.tsx
index aeec7e0a..307b4478 100644
--- a/src/pages/editor-page/top-navbar/top-navbar.tsx
+++ b/src/pages/editor-page/top-navbar/top-navbar.tsx
@@ -18,11 +18,13 @@ 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';
 
 export interface TopNavbarProps {}
 
 export const TopNavbar: React.FC<TopNavbarProps> = () => {
     const { diagramName, updateDiagramName, currentDiagram } = useChartDB();
+    const { openCreateDiagramDialog } = useCreateDiagramDialog();
     const [editMode, setEditMode] = React.useState(false);
     const [editedDiagramName, setEditedDiagramName] =
         React.useState(diagramName);
@@ -44,6 +46,10 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
     useClickAway(inputRef, editDiagramName);
     useKeyPressEvent('Enter', editDiagramName);
 
+    const createNewDiagram = () => {
+        openCreateDiagramDialog();
+    };
+
     const enterEditMode = (
         event: React.MouseEvent<HTMLButtonElement, MouseEvent>
     ) => {
@@ -71,17 +77,11 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                         <MenubarMenu>
                             <MenubarTrigger>File</MenubarTrigger>
                             <MenubarContent>
-                                <MenubarItem>
+                                <MenubarItem onClick={createNewDiagram}>
                                     New
                                     <MenubarShortcut>⌘T</MenubarShortcut>
                                 </MenubarItem>
-                                <MenubarItem>
-                                    New Window
-                                    <MenubarShortcut>⌘N</MenubarShortcut>
-                                </MenubarItem>
                                 <MenubarItem>Open</MenubarItem>
-                                <MenubarItem>Save</MenubarItem>
-                                <MenubarItem>Save as</MenubarItem>
                                 <MenubarSeparator />
                                 <MenubarItem onClick={exportSql}>
                                     Export
@@ -95,14 +95,6 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                         <MenubarItem>JPG</MenubarItem>
                                     </MenubarSubContent>
                                 </MenubarSub>
-                                <MenubarSub>
-                                    <MenubarSubTrigger>Share</MenubarSubTrigger>
-                                    <MenubarSubContent>
-                                        <MenubarItem>Email link</MenubarItem>
-                                        <MenubarItem>Messages</MenubarItem>
-                                        <MenubarItem>Notes</MenubarItem>
-                                    </MenubarSubContent>
-                                </MenubarSub>
                                 <MenubarSeparator />
                                 <MenubarItem>Exit</MenubarItem>
                             </MenubarContent>