From 87a40cff615b04b678642ba2d6e097c38b26d239 Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Wed, 6 Nov 2024 12:01:49 +0200
Subject: [PATCH] fix: open default diagram after deleting current diagram
 (#350)

---
 .../chartdb-context/chartdb-provider.tsx      | 29 ++-----------------
 src/pages/editor-page/editor-page.tsx         | 13 ++++++++-
 .../editor-page/top-navbar/top-navbar.tsx     |  9 +++++-
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/context/chartdb-context/chartdb-provider.tsx b/src/context/chartdb-context/chartdb-provider.tsx
index e2f30aef..1aa6406a 100644
--- a/src/context/chartdb-context/chartdb-provider.tsx
+++ b/src/context/chartdb-context/chartdb-provider.tsx
@@ -11,8 +11,6 @@ import type { DBRelationship } from '@/lib/domain/db-relationship';
 import { useStorage } from '@/hooks/use-storage';
 import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
 import type { Diagram } from '@/lib/domain/diagram';
-import { useNavigate } from 'react-router-dom';
-import { useConfig } from '@/hooks/use-config';
 import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import type { DBSchema } from '@/lib/domain/db-schema';
 import {
@@ -34,13 +32,11 @@ export const ChartDBProvider: React.FC<
 > = ({ children, diagram, readonly }) => {
     let db = useStorage();
     const events = useEventEmitter<ChartDBEvent>();
-    const navigate = useNavigate();
     const { setSchemasFilter, schemasFilter } = useLocalConfig();
     const { addUndoAction, resetRedoStack, resetUndoStack } =
         useRedoUndoStack();
     const [diagramId, setDiagramId] = useState('');
     const [diagramName, setDiagramName] = useState('');
-    const { updateConfig } = useConfig();
     const [diagramCreatedAt, setDiagramCreatedAt] = useState<Date>(new Date());
     const [diagramUpdatedAt, setDiagramUpdatedAt] = useState<Date>(new Date());
     const [databaseType, setDatabaseType] = useState<DatabaseType>(
@@ -173,34 +169,13 @@ export const ChartDBProvider: React.FC<
             resetRedoStack();
             resetUndoStack();
 
-            const [config] = await Promise.all([
-                db.getConfig(),
+            await Promise.all([
                 db.deleteDiagramTables(diagramId),
                 db.deleteDiagramRelationships(diagramId),
                 db.deleteDiagram(diagramId),
                 db.deleteDiagramDependencies(diagramId),
             ]);
-
-            if (config?.defaultDiagramId === diagramId) {
-                const diagrams = await db.listDiagrams();
-
-                if (diagrams.length > 0) {
-                    const defaultDiagramId = diagrams[0].id;
-                    await updateConfig({ defaultDiagramId });
-                    navigate(`/diagrams/${defaultDiagramId}`);
-                } else {
-                    await updateConfig({ defaultDiagramId: '' });
-                    navigate('/');
-                }
-            }
-        }, [
-            db,
-            diagramId,
-            navigate,
-            resetRedoStack,
-            resetUndoStack,
-            updateConfig,
-        ]);
+        }, [db, diagramId, resetRedoStack, resetUndoStack]);
 
     const updateDiagramUpdatedAt: ChartDBContext['updateDiagramUpdatedAt'] =
         useCallback(async () => {
diff --git a/src/pages/editor-page/editor-page.tsx b/src/pages/editor-page/editor-page.tsx
index 2e5c9bb5..7dee7ecb 100644
--- a/src/pages/editor-page/editor-page.tsx
+++ b/src/pages/editor-page/editor-page.tsx
@@ -35,6 +35,7 @@ import { DialogProvider } from '@/context/dialog-context/dialog-provider';
 import { KeyboardShortcutsProvider } from '@/context/keyboard-shortcuts-context/keyboard-shortcuts-provider';
 import { Spinner } from '@/components/spinner/spinner';
 import { Helmet } from 'react-helmet-async';
+import { useStorage } from '@/hooks/use-storage';
 
 const OPEN_STAR_US_AFTER_SECONDS = 30;
 const SHOW_STAR_US_AGAIN_AFTER_DAYS = 1;
@@ -73,6 +74,7 @@ const EditorPageComponent: React.FC = () => {
     } = useLocalConfig();
     const { toast } = useToast();
     const { t } = useTranslation();
+    const { listDiagrams } = useStorage();
 
     useEffect(() => {
         if (!config) {
@@ -106,7 +108,15 @@ const EditorPageComponent: React.FC = () => {
                     navigate(`/diagrams/${config.defaultDiagramId}`);
                 }
             } else {
-                openCreateDiagramDialog();
+                const diagrams = await listDiagrams();
+
+                if (diagrams.length > 0) {
+                    const defaultDiagramId = diagrams[0].id;
+                    await updateConfig({ defaultDiagramId });
+                    navigate(`/diagrams/${defaultDiagramId}`);
+                } else {
+                    openCreateDiagramDialog();
+                }
             }
         };
         loadDefaultDiagram();
@@ -115,6 +125,7 @@ const EditorPageComponent: React.FC = () => {
         openCreateDiagramDialog,
         config,
         navigate,
+        listDiagrams,
         loadDiagram,
         resetRedoStack,
         resetUndoStack,
diff --git a/src/pages/editor-page/top-navbar/top-navbar.tsx b/src/pages/editor-page/top-navbar/top-navbar.tsx
index d71fb1b9..7cbc29f3 100644
--- a/src/pages/editor-page/top-navbar/top-navbar.tsx
+++ b/src/pages/editor-page/top-navbar/top-navbar.tsx
@@ -34,6 +34,7 @@ import { useLocalConfig } from '@/hooks/use-local-config';
 import { DiagramName } from './diagram-name';
 import { LastSaved } from './last-saved';
 import { languages } from '@/i18n/i18n';
+import { useNavigate } from 'react-router-dom';
 
 export interface TopNavbarProps {}
 
@@ -64,6 +65,12 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
     const { isMd: isDesktop } = useBreakpoint('md');
     const { config, updateConfig } = useConfig();
     const { exportImage } = useExportImage();
+    const navigate = useNavigate();
+
+    const handleDeleteDiagramAction = useCallback(() => {
+        deleteDiagram();
+        navigate('/');
+    }, [deleteDiagram, navigate]);
 
     const createNewDiagram = () => {
         openCreateDiagramDialog();
@@ -423,7 +430,7 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                                             closeLabel: t(
                                                 'delete_diagram_alert.cancel'
                                             ),
-                                            onAction: deleteDiagram,
+                                            onAction: handleDeleteDiagramAction,
                                         })
                                     }
                                 >