Bug fixes, added confirmation prompts to Rename and Export buttons

Strexas · Sep 17, 2024 · c2f13d1 · c2f13d1
1 parent 5bce2c0
commit c2f13d1
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/...-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx b/...-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
@@ -1,10 +1,12 @@
+import { EditorConfirmLeave } from '@/features/editor/components/editorView';
 import {
   FileTreeItemContextMenuConfirmationDialog,
   FileTreeItemContextMenuFileImportDialog,
   FileTreeItemContextMenuTextfieldDialog,
 } from '@/features/editor/components/fileTreeView/fileTreeItem';
 import { useWorkspaceContext } from '@/features/editor/hooks';
 import { FileTreeItemContextMenuActions, FileTreeViewItemProps, FileTypes } from '@/features/editor/types';
+import { useStatusContext } from '@/hooks';
 import { axios, socket } from '@/lib';
 import { Endpoints, Events } from '@/types';
 import { getSID, getUUID } from '@/utils';
@@ -56,13 +58,52 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
   onClose,
 }) => {
   const { file, fileStateUpdate, filesHistoryStateUpdate } = useWorkspaceContext();
+  const { unsaved } = useStatusContext();
   const [newFileDialogOpen, setNewFileDialogOpen] = useState(false);
   const [newFolderDialogOpen, setNewFolderDialogOpen] = useState(false);
   const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
   const [renameDialogOpen, setRenameDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const menuItems = [];
 
+  const [confirmAction, setConfirmAction] = useState<'rename' | 'export' | null>(null);
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+
+  const handleRenameClick = () => {
+    if (item.id === file.id && unsaved) {
+      setConfirmAction('rename');
+      setIsConfirmDialogOpen(true);
+    } else {
+      handleActionContextMenu('rename');
+    }
+  };
+
+  const handleExportClick = () => {
+    if (item.id === file.id && unsaved) {
+      setConfirmAction('export');
+      setIsConfirmDialogOpen(true);
+    } else {
+      handleActionContextMenu('export');
+    }
+  };
+
+  const handleRenameConfirm = () => {
+    handleActionContextMenu('rename');
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
+  const handleExportConfirm = () => {
+    handleActionContextMenu('export');
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
+  const handleConfirmDialogCancel = () => {
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
   if (item.fileType === undefined || item.fileType === FileTypes.FOLDER) {
     menuItems.push(
       <MenuItem key='newFile' onClick={() => handleActionContextMenu('newFile')}>
@@ -78,7 +119,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
     );
   } else {
     menuItems.push(
-      <MenuItem key='export' onClick={() => handleActionContextMenu('export')}>
+      <MenuItem key='export' onClick={handleExportClick}>
         Export...
       </MenuItem>,
       <Divider key='divider-export' />
@@ -91,7 +132,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
 
   if (item.fileType !== undefined) {
     menuItems.push(
-      <MenuItem key='rename' onClick={() => handleActionContextMenu('rename')}>
+      <MenuItem key='rename' onClick={handleRenameClick}>
         Rename...
       </MenuItem>,
       <MenuItem key='delete' onClick={() => handleActionContextMenu('delete')}>
@@ -242,6 +283,11 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
         onClose={() => setDeleteDialogOpen(false)}
         onConfirm={handleDeleteConfirm}
       />
+      <EditorConfirmLeave
+        isOpen={isConfirmDialogOpen}
+        onClose={handleConfirmDialogCancel}
+        onConfirm={confirmAction === 'rename' ? handleRenameConfirm : handleExportConfirm}
+      />
     </>
   );
 };
diff --git a/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx b/app/front-end/src/features/editor/components/filebarView/filebarGroupItem.tsx
@@ -36,20 +36,22 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
 
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
 
-  const handleConfirmTab = useCallback(() => {
+  const handleTabConfirm = useCallback(() => {
     Workspace.fileStateUpdate(file);
     Workspace.filesHistoryStateUpdate(file);
     setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
   }, [file, Workspace]);
 
-  const handleConfirmClose = useCallback(() => {
+  const handleCloseConfirm = useCallback(() => {
     Workspace.filesHistoryStateUpdate(undefined, file);
     setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
   }, [file, Workspace]);
 
   const handleTabClick = useCallback(() => {
     if (!blocked) {
-      if (unsaved) {
+      if (unsaved && Workspace.file.id !== id) {
         setConfirmAction('tab');
         setIsConfirmDialogOpen(true);
       } else {
@@ -71,6 +73,11 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
     }
   };
 
+  const handleConfirmDialogCancel = () => {
+    setIsConfirmDialogOpen(false);
+    setConfirmAction(null);
+  };
+
   return (
     <>
       <Box
@@ -123,8 +130,8 @@ export const FilebarGroupItem: React.FC<FileModel> = (file) => {
       </Box>
       <EditorConfirmLeave
         isOpen={isConfirmDialogOpen}
-        onClose={() => setIsConfirmDialogOpen(false)}
-        onConfirm={confirmAction === 'tab' ? handleConfirmTab : handleConfirmClose}
+        onClose={handleConfirmDialogCancel}
+        onConfirm={confirmAction === 'tab' ? handleTabConfirm : handleCloseConfirm}
       />
     </>
   );