fix: edit dialog fix and alerts added

Author: boris0301

src/client/create-diagram-dialog/components/create-diagram-dialog.tsx

@@ -3,6 +3,7 @@ import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography } from '@mui/material';
+import { showAlertDialog } from '../../utils/alert';
 
 const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
@@ -37,6 +38,7 @@ const CreateDiagramDialog = () => {
           handleDialogClose();
         } catch (error) {
           console.error('Error inserting image with metadata', error);
+          showAlertDialog('Error inserting image, please try again');
         }
       }
     };

src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
 import { serverFunctions } from '../../utils/serverFunctions';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
-
-const editUrl = localStorage.getItem('editUrl');
+import { showAlertDialog } from '../../utils/alert';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
@@ -14,12 +13,6 @@ const EditDiagramDialog = () => {
 
     const getMetadata = async () => {
       try {
-        if (editUrl) {
-          const iframeUrl = buildUrl(editUrl, authState.token);
-          setDiagramsUrl(iframeUrl);
-          localStorage.removeItem('editUrl');
-          return;
-        }
         const metadata = await serverFunctions.readSelectedImageMetadata();
         if (typeof metadata !== 'string') return;
 
@@ -63,6 +56,7 @@ const EditDiagramDialog = () => {
           handleDialogClose();
         } catch (error) {
           console.error('Error updating image with metadata', error);
+          showAlertDialog('Error updating image, please try again');
         }
       }
     };

src/client/select-diagram-dialog/components/select-diagram-dialog.tsx

@@ -3,13 +3,23 @@ import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
 import { CircularProgress, Container, Typography } from '@mui/material';
+import { showAlertDialog } from '../../utils/alert';
+
+const editUrl = localStorage.getItem('editUrl');
 
 const SelectDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
 
   useEffect(() => {
     if (!authState?.authorized) return;
+
+    if (editUrl) {
+      const url = buildUrl(editUrl, authState.token);
+      setDiagramsUrl(url);
+      localStorage.removeItem('editUrl');
+      return;
+    }
     const url = buildUrl(
       '/app/plugins/select?pluginSource=googledocs',
       authState.token
@@ -36,6 +46,7 @@ const SelectDiagramDialog = () => {
           );
           handleDialogClose();
         } catch (error) {
+          showAlertDialog('Error inserting image, please try again');
           console.error('Error inserting image with metadata', error);
         }
       }

src/client/sidebar/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import LoadingOverlay from '../../components/loading-overlay';
 import { buildUrl } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import Button from '../../components/button';
+import { showAlertDialog } from '../../utils/alert';
 
 interface ChartImage {
   altDescription: string;
@@ -55,6 +56,7 @@ const Sidebar = () => {
     } catch (error) {
       console.error('Error getting images', error);
       setChartImagesState('error');
+      showAlertDialog('Error getting images, please try again');
     }
   }, []);
 
@@ -84,6 +86,7 @@ const Sidebar = () => {
           getImages();
         } catch (error) {
           console.error('Error inserting image with metadata', error);
+          showAlertDialog('Error inserting image, please try again');
         }
         return;
       }
@@ -92,7 +95,7 @@ const Sidebar = () => {
         if (!editUrl) return;
         try {
           localStorage.setItem('editUrl', editUrl);
-          await serverFunctions.openEditDiagramDialogWithUrl();
+          await serverFunctions.openSelectDiagramDialog();
         } catch (error) {
           console.error('Error opening edit dialog', error);
         }
@@ -105,7 +108,7 @@ const Sidebar = () => {
           localStorage.setItem('previewUrl', viewUrl);
           await serverFunctions.openPreviewDiagramDialog();
         } catch (error) {
-          console.error('Error opening edit dialog', error);
+          console.error('Error opening view dialog', error);
         }
       }
     };
@@ -157,6 +160,7 @@ const Sidebar = () => {
     } catch (error) {
       console.error('Error updating all diagrams', error);
       setUpdateDiagramsState('error');
+      showAlertDialog('Error updating diagrams, please try again');
     }
   };
 
@@ -168,6 +172,7 @@ const Sidebar = () => {
     } catch (error) {
       console.error('Error inserting diagram', error);
       setSelectDiagramState('error');
+      showAlertDialog('Error inserting diagram, please try again');
     }
   };
 
@@ -179,6 +184,7 @@ const Sidebar = () => {
     } catch (error) {
       console.error('Error creating new diagram', error);
       setCreateDiagramState('error');
+      showAlertDialog('Error creating new diagram, please try again');
     }
   };
 

src/client/utils/alert.ts

@@ -0,0 +1,9 @@
+import { serverFunctions } from './serverFunctions';
+
+export const showAlertDialog = async (message: string) => {
+  try {
+    await serverFunctions.showAlertDialog(message);
+  } catch (error) {
+    console.log('Error showing alert dialog', error);
+  }
+};

src/server/index.ts

@@ -19,6 +19,7 @@ import {
   syncImages,
   selectChartImage,
   getChartImages,
+  showAlertDialog,
 } from './ui';
 
 // Public functions must be exported as named exports
@@ -43,4 +44,5 @@ export {
   syncImages,
   selectChartImage,
   getChartImages,
+  showAlertDialog,
 };

src/server/ui.js

@@ -496,3 +496,7 @@ export function selectChartImage(altDescription) {
   // Set the selection to the range that includes the second image
   DocumentApp.getActiveDocument().setSelection(range);
 }
+
+export function showAlertDialog(errorText) {
+  DocumentApp.getUi().alert(errorText);
+}