Fix file loading, saving and navigation issues

frontend/src/hooks/useFileContent.js

@@ -1,32 +1,47 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { fetchFileContent } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
 import { DEFAULT_FILE } from '../utils/constants';
 
-export const useFileContent = () => {
+export const useFileContent = (selectedFile) => {
   const [content, setContent] = useState(DEFAULT_FILE.content);
+  const [originalContent, setOriginalContent] = useState(DEFAULT_FILE.content);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const loadFileContent = useCallback(async (filePath) => {
     try {
+      let newContent;
       if (filePath === DEFAULT_FILE.path) {
-        setContent(DEFAULT_FILE.content);
+        newContent = DEFAULT_FILE.content;
       } else if (!isImageFile(filePath)) {
-        const fileContent = await fetchFileContent(filePath);
-        setContent(fileContent);
+        newContent = await fetchFileContent(filePath);
       } else {
-        setContent(''); // Set empty content for image files
+        newContent = ''; // Set empty content for image files
       }
+      setContent(newContent);
+      setOriginalContent(newContent);
       setHasUnsavedChanges(false);
     } catch (err) {
-      console.error(err);
+      console.error('Error loading file content:', err);
+      setContent(''); // Set empty content on error
+      setOriginalContent('');
+      setHasUnsavedChanges(false);
     }
   }, []);
 
-  const handleContentChange = useCallback((newContent) => {
-    setContent(newContent);
-    setHasUnsavedChanges(true);
-  }, []);
+  useEffect(() => {
+    if (selectedFile) {
+      loadFileContent(selectedFile);
+    }
+  }, [selectedFile, loadFileContent]);
+
+  const handleContentChange = useCallback(
+    (newContent) => {
+      setContent(newContent);
+      setHasUnsavedChanges(newContent !== originalContent);
+    },
+    [originalContent]
+  );
 
   return {
     content,

frontend/src/hooks/useFileOperations.js

@@ -2,43 +2,53 @@ import { useCallback } from 'react';
 import { saveFileContent, deleteFile } from '../services/api';
 import { useToasts } from '@geist-ui/core';
 
-export const useFileOperations = (setHasUnsavedChanges) => {
+export const useFileOperations = () => {
   const { setToast } = useToasts();
 
-  const handleSave = useCallback(async (filePath, content) => {
-    try {
-      await saveFileContent(filePath, content);
-      setHasUnsavedChanges(false);
-      setToast({ text: 'File saved successfully', type: 'success' });
-      return true;
-    } catch (error) {
-      console.error('Error saving file:', error);
-      return false;
-    }
-  }, []);
+  const handleSave = useCallback(
+    async (filePath, content) => {
+      try {
+        await saveFileContent(filePath, content);
+        setToast({ text: 'File saved successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        console.error('Error saving file:', error);
+        setToast({ text: 'Failed to save file', type: 'error' });
+        return false;
+      }
+    },
+    [setToast]
+  );
 
-  const handleDelete = useCallback(async (filePath) => {
-    try {
-      await deleteFile(filePath);
-      setToast({ text: 'File deleted successfully', type: 'success' });
-      return true;
-    } catch (error) {
-      setToast({ text: `Error deleting file`, type: 'error' });
-      console.error('Error deleting file:', error);
-      return false;
-    }
-  }, []);
+  const handleDelete = useCallback(
+    async (filePath) => {
+      try {
+        await deleteFile(filePath);
+        setToast({ text: 'File deleted successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        setToast({ text: `Error deleting file`, type: 'error' });
+        console.error('Error deleting file:', error);
+        return false;
+      }
+    },
+    [setToast]
+  );
 
-  const handleCreate = useCallback(async (fileName, initialContent = '') => {
-    try {
-      await saveFileContent(fileName, initialContent);
-      return true;
-    } catch (error) {
-      setToast({ text: `Error creating new file`, type: 'error' });
-      console.error('Error creating new file:', error);
-      return false;
-    }
-  }, []);
+  const handleCreate = useCallback(
+    async (fileName, initialContent = '') => {
+      try {
+        await saveFileContent(fileName, initialContent);
+        setToast({ text: 'File created successfully', type: 'success' });
+        return true;
+      } catch (error) {
+        setToast({ text: `Error creating new file`, type: 'error' });
+        console.error('Error creating new file:', error);
+        return false;
+      }
+    },
+    [setToast]
+  );
 
   return { handleSave, handleDelete, handleCreate };
 };