Split up hooks

frontend/src/contexts/EditorContentContext.js

@@ -1,22 +1,23 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { useFileContent } from '../hooks/useFileContent';
+import React, { createContext, useContext, useEffect } from 'react';
+import { useFileManagementContext } from './FileManagementContext';
 
 const EditorContentContext = createContext();
 
 export const EditorContentProvider = ({ children }) => {
-  const { content, handleContentChange, handleSave } = useFileContent();
+  const { content, handleContentChange, handleSave, selectedFile } =
+    useFileManagementContext();
 
-  const value = useMemo(
-    () => ({
+  useEffect(() => {
+    console.log('EditorContentProvider: content or selectedFile updated', {
       content,
-      handleContentChange,
-      handleSave,
-    }),
-    [content, handleContentChange, handleSave]
-  );
+      selectedFile,
+    });
+  }, [content, selectedFile]);
 
   return (
-    <EditorContentContext.Provider value={value}>
+    <EditorContentContext.Provider
+      value={{ content, handleContentChange, handleSave }}
+    >
       {children}
     </EditorContentContext.Provider>
   );

frontend/src/contexts/FileManagementContext.js

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useFileManagement } from '../hooks/useFileManagement';
+
+const FileManagementContext = createContext();
+
+export const FileManagementProvider = ({ children }) => {
+  const fileManagement = useFileManagement();
+
+  const value = useMemo(
+    () => fileManagement,
+    [
+      fileManagement.selectedFile,
+      fileManagement.isNewFile,
+      fileManagement.content,
+      fileManagement.isLoading,
+      fileManagement.error,
+      fileManagement.hasUnsavedChanges,
+    ]
+  );
+
+  return (
+    <FileManagementContext.Provider value={value}>
+      {children}
+    </FileManagementContext.Provider>
+  );
+};
+
+export const useFileManagementContext = () => {
+  const context = useContext(FileManagementContext);
+  if (context === undefined) {
+    throw new Error(
+      'useFileManagementContext must be used within a FileManagementProvider'
+    );
+  }
+  return context;
+};

frontend/src/contexts/FileSelectionContext.js

@@ -1,24 +1,15 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { useFileContent } from '../hooks/useFileContent';
+import React, { createContext, useContext } from 'react';
+import { useFileManagementContext } from './FileManagementContext';
 
 const FileSelectionContext = createContext();
 
 export const FileSelectionProvider = ({ children }) => {
-  const { selectedFile, isNewFile, hasUnsavedChanges, handleFileSelect } =
-    useFileContent();
+  const { selectedFile, handleFileSelect } = useFileManagementContext();
 
-  const value = useMemo(
-    () => ({
-      selectedFile,
-      isNewFile,
-      hasUnsavedChanges,
-      handleFileSelect,
-    }),
-    [selectedFile, isNewFile, hasUnsavedChanges, handleFileSelect]
-  );
+  console.log('FileSelectionProvider rendering', { selectedFile });
 
   return (
-    <FileSelectionContext.Provider value={value}>
+    <FileSelectionContext.Provider value={{ selectedFile, handleFileSelect }}>
       {children}
     </FileSelectionContext.Provider>
   );