feat: notify user about unsaved file before build and test

src/components/workspace/Editor/Editor.tsx

@@ -22,7 +22,7 @@ interface Props {
 const Editor: FC<Props> = ({ className = '' }) => {
   const { activeProject } = useProject();
   const { getFile, saveFile: storeFileContent } = useFile();
-  const { fileTab } = useFileTab();
+  const { fileTab, updateFileDirty } = useFileTab();
 
   const { isFormatOnSave, getSettingStateByKey } = useSettingAction();
 
@@ -65,12 +65,16 @@ const Editor: FC<Props> = ({ className = '' }) => {
         await delay(200);
       }
       await storeFileContent(fileTab.active, fileContent);
-      EventEmitter.emit('FILE_SAVED', { fileId: fileTab.active });
+      EventEmitter.emit('FILE_SAVED', { filePath: fileTab.active });
     } catch (error) {
       /* empty */
     }
   };
 
+  const updateFileSaveCounter = () => {
+    setSaveFileCounter((prev) => prev + 1);
+  };
+
   useEffect(() => {
     async function loadMonacoEditor() {
       const monaco = await import('monaco-editor');
@@ -99,6 +103,9 @@ const Editor: FC<Props> = ({ className = '' }) => {
   }, []);
 
   useEffect(() => {
+    // Don't save file on initial render
+    if (saveFileCounter === 1) return;
+
     const saveFileDebouce = setTimeout(() => {
       (async () => {
         await saveFile();
@@ -112,9 +119,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
 
   useEffect(() => {
     if (!isLoaded) return;
-    EventEmitter.on('SAVE_FILE', () => {
-      setSaveFileCounter((prev) => prev + 1);
-    });
+    EventEmitter.on('SAVE_FILE', updateFileSaveCounter);
 
     // If file is changed e.g. in case of build process then force update in editor
     EventEmitter.on('FORCE_UPDATE_FILE', (filePath: string) => {
@@ -129,7 +134,7 @@ const Editor: FC<Props> = ({ className = '' }) => {
       });
     });
     return () => {
-      EventEmitter.off('SAVE_FILE');
+      EventEmitter.off('SAVE_FILE', updateFileSaveCounter);
       EventEmitter.off('FORCE_UPDATE_FILE');
     };
   }, [isLoaded]);
@@ -156,19 +161,19 @@ const Editor: FC<Props> = ({ className = '' }) => {
   };
 
   const markFileDirty = () => {
-    // if (!editorRef.current) return;
-    // const fileContent = editorRef.current.getValue();
-    // if (
-    //   file.id !== initialFile?.id ||
-    //   !initialFile.content ||
-    //   initialFile.content === fileContent
-    // ) {
-    //   return;
-    // }
-    // if (!fileContent) {
-    //   return;
-    // }
-    // updateOpenFile(file.id, { isDirty: true }, projectId);
+    if (!editorRef.current) return;
+    const fileContent = editorRef.current.getValue();
+    if (
+      fileTab.active !== initialFile?.id ||
+      !initialFile.content ||
+      initialFile.content === fileContent
+    ) {
+      return;
+    }
+    if (!fileContent) {
+      return;
+    }
+    updateFileDirty(fileTab.active, true);
   };
 
   const initializeEditorMode = async () => {

src/components/workspace/ExecuteFile/ExecuteFile.tsx

@@ -1,4 +1,5 @@
 import AppIcon, { AppIconType } from '@/components/ui/icon';
+import { useFileTab } from '@/hooks';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProjectActions } from '@/hooks/project.hooks';
 import { useProject } from '@/hooks/projectV2.hooks';
@@ -37,6 +38,7 @@ const ExecuteFile: FC<Props> = ({
   const { projectFiles } = useProject();
   const { compileFuncProgram, compileTactProgram } = useProjectActions();
   const { createLog } = useLogActivity();
+  const { hasDirtyFiles } = useFileTab();
   const [selectedFile, setSelectedFile] = useState<Tree | undefined>();
   const selectedFileRef = useRef<Tree | undefined>();
   const isAutoBuildAndDeployEnabled =
@@ -51,6 +53,12 @@ const ExecuteFile: FC<Props> = ({
   });
 
   const buildFile = async (e: ButtonClick) => {
+    if (hasDirtyFiles()) {
+      message.warning({
+        content: 'You have unsaved changes',
+        key: 'unsaved_changes',
+      });
+    }
     const selectedFile = selectedFileRef.current;
     if (!selectedFile) {
       createLog('Please select a file', 'error');

src/components/workspace/Tabs/Tabs.tsx

@@ -1,12 +1,14 @@
 import AppIcon from '@/components/ui/icon';
 import { useFileTab } from '@/hooks';
 import { useProject } from '@/hooks/projectV2.hooks';
+import EventEmitter from '@/utility/eventEmitter';
 import { fileTypeFromFileName } from '@/utility/utils';
 import { FC, useEffect } from 'react';
 import s from './Tabs.module.scss';
 
 const Tabs: FC = () => {
-  const { fileTab, open, close, syncTabSettings } = useFileTab();
+  const { fileTab, open, close, syncTabSettings, updateFileDirty } =
+    useFileTab();
   const { activeProject } = useProject();
 
   const closeTab = (e: React.MouseEvent, filePath: string) => {
@@ -15,10 +17,21 @@ const Tabs: FC = () => {
     close(filePath);
   };
 
+  const onFileSave = ({ filePath }: { filePath: string }) => {
+    updateFileDirty(filePath, false);
+  };
+
   useEffect(() => {
     syncTabSettings();
   }, [activeProject]);
 
+  useEffect(() => {
+    EventEmitter.on('FILE_SAVED', onFileSave);
+    return () => {
+      EventEmitter.off('FILE_SAVED', onFileSave);
+    };
+  }, [updateFileDirty]);
+
   if (fileTab.items.length === 0) {
     return <></>;
   }

src/hooks/fileTabs.hooks.ts

@@ -1,6 +1,7 @@
 import fileSystem from '@/lib/fs';
 import { IDEContext, IFileTab } from '@/state/IDE.context';
 import EventEmitter from '@/utility/eventEmitter';
+import cloneDeep from 'lodash.clonedeep';
 import { useContext } from 'react';
 
 const useFileTab = () => {
@@ -39,7 +40,7 @@ const useFileTab = () => {
           ...parsedSetting,
         };
       }
-      setFileTab(parsedSetting.tab);
+      setFileTab(cloneDeep(parsedSetting.tab));
 
       await fileSystem.writeFile(
         settingPath,
@@ -102,11 +103,33 @@ const useFileTab = () => {
       updatedTab = { items: updatedItems, active: newActiveTab };
     }
 
-    setFileTab(updatedTab);
     syncTabSettings(updatedTab);
   };
 
-  return { fileTab, open, close, syncTabSettings };
+  const updateFileDirty = (filePath: string, isDirty: boolean) => {
+    const updatedItems = cloneDeep(fileTab).items.map((item) => {
+      if (item.path === filePath) {
+        return { ...item, isDirty: isDirty };
+      }
+      return item;
+    });
+
+    const updatedTab = { ...fileTab, items: updatedItems };
+    syncTabSettings(updatedTab);
+  };
+
+  const hasDirtyFiles = () => {
+    return fileTab.items.some((item) => item.isDirty);
+  };
+
+  return {
+    fileTab,
+    open,
+    close,
+    syncTabSettings,
+    updateFileDirty,
+    hasDirtyFiles,
+  };
 };
 
 export default useFileTab;

src/hooks/workspace.hooks.ts

@@ -22,7 +22,7 @@ function useWorkspaceActions() {
     const tsProjectFiles: Record<string, string> = {};
 
     const filesWithContent = await readdirTree(
-      `/${projectId}`,
+      projectId,
       {
         basePath: null,
         content: true,

src/utility/eventEmitter.ts

@@ -10,7 +10,7 @@ export interface EventEmitterPayloads {
   ON_SPLIT_DRAG_END: { position?: number };
   SAVE_FILE: undefined | { fileId: string; content: string };
   FORCE_UPDATE_FILE: string;
-  FILE_SAVED: { fileId: string };
+  FILE_SAVED: { filePath: string };
   TEST_CASE_LOG: string;
   RELOAD_PROJECT_FILES: string;
   OPEN_PROJECT: string;