Split up hooks

frontend/src/hooks/useFileContent.js

@@ -1,114 +1,47 @@
 import { useState, useCallback } from 'react';
-import { fetchFileContent, saveFileContent, deleteFile } from '../services/api';
+import { fetchFileContent } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
-import { useToasts } from '@geist-ui/core';
-import { useFileListContext } from '../contexts/FileListContext';
-
-const DEFAULT_FILE = {
-  name: 'New File.md',
-  path: 'New File.md',
-  content: '# Welcome to NovaMD\n\nStart editing here!',
-};
+import { DEFAULT_FILE } from '../utils/constants';
 
 export const useFileContent = () => {
   const [content, setContent] = useState(DEFAULT_FILE.content);
-  const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
-  const [isNewFile, setIsNewFile] = useState(true);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
-  const { setToast } = useToasts();
-  const { loadFileList } = useFileListContext();
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const handleFileSelect = useCallback(
-    async (filePath) => {
-      console.log('handleFileSelect', filePath);
-      try {
-        if (filePath === DEFAULT_FILE.path) {
-          setContent(DEFAULT_FILE.content);
-          setSelectedFile(DEFAULT_FILE.path);
-          setIsNewFile(true);
-        } else if (!isImageFile(filePath)) {
-          const fileContent = await fetchFileContent(filePath);
-          setContent(fileContent);
-          setSelectedFile(filePath);
-          setIsNewFile(false);
-        } else {
-          setContent(''); // Set empty content for image files
-          setSelectedFile(filePath);
-          setIsNewFile(false);
-        }
-        setHasUnsavedChanges(false);
-        setError(null);
-      } catch (error) {
-        console.error('Failed to load file content:', error);
-        setError('Failed to load file content. Please try again.');
+  const loadFileContent = useCallback(async (filePath) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (filePath === DEFAULT_FILE.path) {
+        setContent(DEFAULT_FILE.content);
+      } else if (!isImageFile(filePath)) {
+        const fileContent = await fetchFileContent(filePath);
+        setContent(fileContent);
+      } else {
+        setContent(''); // Set empty content for image files
       }
-    },
-    [hasUnsavedChanges]
-  );
+      setHasUnsavedChanges(false);
+    } catch (err) {
+      setError('Failed to load file content');
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
 
   const handleContentChange = useCallback((newContent) => {
     setContent(newContent);
     setHasUnsavedChanges(true);
   }, []);
 
-  const handleSave = useCallback(async (filePath, fileContent) => {
-    try {
-      await saveFileContent(filePath, fileContent);
-      setIsNewFile(false);
-      setHasUnsavedChanges(false);
-      return true;
-    } catch (error) {
-      console.error('Error saving file:', error);
-      setError('Failed to save file. Please try again.');
-      return false;
-    }
-  }, []);
-
-  const handleCreateNewFile = useCallback(
-    async (fileName, initialContent = '') => {
-      try {
-        await saveFileContent(fileName, initialContent);
-        setToast({ text: 'New file created successfully', type: 'success' });
-        await loadFileList(); // Refresh the file list
-        handleFileSelect(fileName);
-      } catch (error) {
-        setToast({
-          text: 'Failed to create new file: ' + error.message,
-          type: 'error',
-        });
-      }
-    },
-    [setToast, loadFileList, handleFileSelect]
-  );
-
-  const handleDeleteFile = useCallback(async () => {
-    if (!selectedFile) return;
-    try {
-      await deleteFile(selectedFile);
-      setToast({ text: 'File deleted successfully', type: 'success' });
-      await loadFileList(); // Refresh the file list
-      setSelectedFile(null);
-      setContent('');
-    } catch (error) {
-      setToast({
-        text: 'Failed to delete file: ' + error.message,
-        type: 'error',
-      });
-    }
-  }, [selectedFile, setToast, loadFileList]);
-
   return {
     content,
-    selectedFile,
-    isNewFile,
-    hasUnsavedChanges,
+    setContent,
+    isLoading,
     error,
-    handleFileSelect,
+    hasUnsavedChanges,
+    loadFileContent,
     handleContentChange,
-    handleSave,
-    handleCreateNewFile,
-    handleDeleteFile,
-    DEFAULT_FILE,
   };
 };

frontend/src/hooks/useFileManagement.js

@@ -1,34 +1,47 @@
-import { useFileList } from './useFileList';
+import { useEffect, useCallback } from 'react';
+import { useFileSelection } from './useFileSelection';
 import { useFileContent } from './useFileContent';
-import { useGitOperations } from './useGitOperations';
+import { useFileOperations } from './useFileOperations';
 
-export const useFileManagement = (gitEnabled) => {
-  const { files, error: fileListError, loadFileList } = useFileList(gitEnabled);
+export const useFileManagement = () => {
+  const { selectedFile, isNewFile, handleFileSelect } = useFileSelection();
   const {
     content,
-    selectedFile,
-    isNewFile,
+    isLoading,
+    error,
     hasUnsavedChanges,
-    error: fileContentError,
-    handleFileSelect,
+    loadFileContent,
     handleContentChange,
-    handleSave,
+    setHasUnsavedChanges,
   } = useFileContent();
-  const { pullLatestChanges, handleCommitAndPush } =
-    useGitOperations(gitEnabled);
+  const { handleSave, handleDelete, handleCreateNewFile } =
+    useFileOperations(setHasUnsavedChanges);
+
+  useEffect(() => {
+    if (selectedFile) {
+      loadFileContent(selectedFile);
+    }
+  }, [selectedFile, loadFileContent]);
+
+  const handleFileSelectAndLoad = useCallback(
+    async (filePath) => {
+      await handleFileSelect(filePath);
+      await loadFileContent(filePath);
+    },
+    [handleFileSelect, loadFileContent]
+  );
 
   return {
-    files,
-    content,
     selectedFile,
     isNewFile,
+    content,
+    isLoading,
+    error,
     hasUnsavedChanges,
-    error: fileListError || fileContentError,
-    handleFileSelect,
+    handleFileSelect: handleFileSelectAndLoad,
     handleContentChange,
-    handleSave,
-    pullLatestChanges,
-    handleCommitAndPush,
-    loadFileList,
+    handleSave: (filePath) => handleSave(filePath, content),
+    handleDelete,
+    handleCreateNewFile,
   };
 };

frontend/src/hooks/useFileOperations.js

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { saveFileContent, deleteFile } from '../services/api';
+
+export const useFileOperations = (setHasUnsavedChanges) => {
+  const handleSave = useCallback(
+    async (filePath, content) => {
+      try {
+        await saveFileContent(filePath, content);
+        setHasUnsavedChanges(false);
+        console.log('File saved successfully');
+        return true;
+      } catch (error) {
+        console.error('Error saving file:', error);
+        return false;
+      }
+    },
+    [setHasUnsavedChanges]
+  );
+
+  const handleDelete = useCallback(async (filePath) => {
+    try {
+      await deleteFile(filePath);
+      console.log('File deleted successfully');
+      return true;
+    } catch (error) {
+      console.error('Error deleting file:', error);
+      return false;
+    }
+  }, []);
+
+  const handleCreateNewFile = useCallback(
+    async (fileName, initialContent = '') => {
+      try {
+        await saveFileContent(fileName, initialContent);
+        console.log('New file created successfully');
+        return true;
+      } catch (error) {
+        console.error('Error creating new file:', error);
+        return false;
+      }
+    },
+    []
+  );
+
+  return { handleSave, handleDelete, handleCreateNewFile };
+};

frontend/src/hooks/useFileSelection.js

@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+import { DEFAULT_FILE } from '../utils/constants'; // Assuming you have this constant defined
+
+export const useFileSelection = () => {
+  const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
+  const [isNewFile, setIsNewFile] = useState(true);
+
+  const handleFileSelect = useCallback(async (filePath) => {
+    console.log('File selected:', filePath);
+    setSelectedFile(filePath);
+    setIsNewFile(filePath === DEFAULT_FILE.path);
+  }, []);
+
+  return { selectedFile, isNewFile, handleFileSelect };
+};