From c2f13d16a994c688fb742034feed9095149df127 Mon Sep 17 00:00:00 2001
From: Justinas <156369263+justinnas@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:46:56 +0300
Subject: [PATCH] Bug fixes, added confirmation prompts to Rename and Export
 buttons

---
 .../fileTreeItem/fileTreeItemContextMenu.tsx  | 50 ++++++++++++++++++-
 .../filebarView/filebarGroupItem.tsx          | 17 +++++--
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
index 6ba3320..a91469e 100644
--- a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
+++ b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
@@ -1,3 +1,4 @@
+import { EditorConfirmLeave } from '@/features/editor/components/editorView';
 import {
   FileTreeItemContextMenuConfirmationDialog,
   FileTreeItemContextMenuFileImportDialog,
@@ -5,6 +6,7 @@ import {
 } 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,6 +58,7 @@ 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);
@@ -63,6 +66,44 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
   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
index f037aeb..8bee2c8 100644
--- 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}
       />
     </>
   );