From 543b716c77238989292c9ba658244422118e2bac Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Wed, 26 Feb 2025 20:03:26 +0200
Subject: [PATCH] refactor: move export diagram to hook (#599)

---
 .../export-diagram-dialog.tsx                 | 28 +++----------
 src/hooks/use-export-diagram.tsx              | 40 +++++++++++++++++++
 2 files changed, 45 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/use-export-diagram.tsx

diff --git a/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx b/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx
index 17274455..d49067d4 100644
--- a/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx
+++ b/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx
@@ -15,11 +15,10 @@ import { SelectBox } from '@/components/select-box/select-box';
 import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useTranslation } from 'react-i18next';
 import { useChartDB } from '@/hooks/use-chartdb';
-import { diagramToJSONOutput } from '@/lib/export-import-utils';
 import { Spinner } from '@/components/spinner/spinner';
-import { waitFor } from '@/lib/utils';
 import { AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/alert/alert';
+import { useExportDiagram } from '@/hooks/use-export-diagram';
 
 export interface ExportDiagramDialogProps extends BaseDialogProps {}
 
@@ -27,44 +26,27 @@ export const ExportDiagramDialog: React.FC<ExportDiagramDialogProps> = ({
     dialog,
 }) => {
     const { t } = useTranslation();
-    const { diagramName, currentDiagram } = useChartDB();
-    const [isLoading, setIsLoading] = useState(false);
+    const { currentDiagram } = useChartDB();
     const { closeExportDiagramDialog } = useDialog();
     const [error, setError] = useState(false);
 
     useEffect(() => {
         if (!dialog.open) return;
-        setIsLoading(false);
         setError(false);
     }, [dialog.open]);
 
-    const downloadOutput = useCallback(
-        (dataUrl: string) => {
-            const a = document.createElement('a');
-            a.setAttribute('download', `ChartDB(${diagramName}).json`);
-            a.setAttribute('href', dataUrl);
-            a.click();
-        },
-        [diagramName]
-    );
+    const { exportDiagram, isExporting: isLoading } = useExportDiagram();
 
     const handleExport = useCallback(async () => {
-        setIsLoading(true);
-        await waitFor(1000);
         try {
-            const json = diagramToJSONOutput(currentDiagram);
-            const blob = new Blob([json], { type: 'application/json' });
-            const dataUrl = URL.createObjectURL(blob);
-            downloadOutput(dataUrl);
-            setIsLoading(false);
+            await exportDiagram({ diagram: currentDiagram });
             closeExportDiagramDialog();
         } catch (e) {
             setError(true);
-            setIsLoading(false);
 
             throw e;
         }
-    }, [downloadOutput, currentDiagram, closeExportDiagramDialog]);
+    }, [exportDiagram, currentDiagram, closeExportDiagramDialog]);
 
     const outputTypeOptions: SelectBoxOption[] = useMemo(
         () =>
diff --git a/src/hooks/use-export-diagram.tsx b/src/hooks/use-export-diagram.tsx
new file mode 100644
index 00000000..00b41361
--- /dev/null
+++ b/src/hooks/use-export-diagram.tsx
@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+import { useDialog } from '@/hooks/use-dialog';
+import { diagramToJSONOutput } from '@/lib/export-import-utils';
+import { waitFor } from '@/lib/utils';
+import type { Diagram } from '@/lib/domain/diagram';
+
+export const useExportDiagram = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { closeExportDiagramDialog } = useDialog();
+
+    const downloadOutput = useCallback((name: string, dataUrl: string) => {
+        const a = document.createElement('a');
+        a.setAttribute('download', `ChartDB(${name}).json`);
+        a.setAttribute('href', dataUrl);
+        a.click();
+    }, []);
+
+    const handleExport = useCallback(
+        async ({ diagram }: { diagram: Diagram }) => {
+            setIsLoading(true);
+            await waitFor(1000);
+            try {
+                const json = diagramToJSONOutput(diagram);
+                const blob = new Blob([json], { type: 'application/json' });
+                const dataUrl = URL.createObjectURL(blob);
+                downloadOutput(diagram.name, dataUrl);
+                setIsLoading(false);
+                closeExportDiagramDialog();
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [downloadOutput, closeExportDiagramDialog]
+    );
+
+    return {
+        exportDiagram: handleExport,
+        isExporting: isLoading,
+    };
+};