Split large contexts

frontend/src/contexts/EditorContentContext.js

@@ -0,0 +1,33 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useFileContent } from '../hooks/useFileContent';
+
+const EditorContentContext = createContext();
+
+export const EditorContentProvider = ({ children }) => {
+  const { content, handleContentChange, handleSave } = useFileContent();
+
+  const value = useMemo(
+    () => ({
+      content,
+      handleContentChange,
+      handleSave,
+    }),
+    [content, handleContentChange, handleSave]
+  );
+
+  return (
+    <EditorContentContext.Provider value={value}>
+      {children}
+    </EditorContentContext.Provider>
+  );
+};
+
+export const useEditorContent = () => {
+  const context = useContext(EditorContentContext);
+  if (context === undefined) {
+    throw new Error(
+      'useEditorContent must be used within an EditorContentProvider'
+    );
+  }
+  return context;
+};

frontend/src/contexts/FileContentContext.js

@@ -1,24 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import { useFileContent } from '../hooks/useFileContent';
-
-const FileContentContext = createContext();
-
-export const FileContentProvider = ({ children }) => {
-  const fileContentHook = useFileContent();
-
-  return (
-    <FileContentContext.Provider value={fileContentHook}>
-      {children}
-    </FileContentContext.Provider>
-  );
-};
-
-export const useFileContentContext = () => {
-  const context = useContext(FileContentContext);
-  if (!context) {
-    throw new Error(
-      'useFileContentContext must be used within a FileContentProvider'
-    );
-  }
-  return context;
-};

frontend/src/contexts/FileListContext.js

@@ -1,13 +1,15 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { useFileList } from '../hooks/useFileList';
 
 const FileListContext = createContext();
 
 export const FileListProvider = ({ children }) => {
-  const fileListHook = useFileList();
+  const { files, loadFileList } = useFileList();
+
+  const value = useMemo(() => ({ files, loadFileList }), [files, loadFileList]);
 
   return (
-    <FileListContext.Provider value={fileListHook}>
+    <FileListContext.Provider value={value}>
       {children}
     </FileListContext.Provider>
   );
@@ -15,7 +17,7 @@ export const FileListProvider = ({ children }) => {
 
 export const useFileListContext = () => {
   const context = useContext(FileListContext);
-  if (!context) {
+  if (context === undefined) {
     throw new Error(
       'useFileListContext must be used within a FileListProvider'
     );

frontend/src/contexts/FileOperationsContext.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useFileContent } from '../hooks/useFileContent';
+
+const FileOperationsContext = createContext();
+
+export const FileOperationsProvider = ({ children }) => {
+  const { handleCreateNewFile, handleDeleteFile } = useFileContent();
+
+  const value = useMemo(
+    () => ({
+      handleCreateNewFile,
+      handleDeleteFile,
+    }),
+    [handleCreateNewFile, handleDeleteFile]
+  );
+
+  return (
+    <FileOperationsContext.Provider value={value}>
+      {children}
+    </FileOperationsContext.Provider>
+  );
+};
+
+export const useFileOperations = () => {
+  const context = useContext(FileOperationsContext);
+  if (context === undefined) {
+    throw new Error(
+      'useFileOperations must be used within a FileOperationsProvider'
+    );
+  }
+  return context;
+};

frontend/src/contexts/FileSelectionContext.js

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useFileContent } from '../hooks/useFileContent';
+
+const FileSelectionContext = createContext();
+
+export const FileSelectionProvider = ({ children }) => {
+  const { selectedFile, isNewFile, hasUnsavedChanges, handleFileSelect } =
+    useFileContent();
+
+  const value = useMemo(
+    () => ({
+      selectedFile,
+      isNewFile,
+      hasUnsavedChanges,
+      handleFileSelect,
+    }),
+    [selectedFile, isNewFile, hasUnsavedChanges, handleFileSelect]
+  );
+
+  return (
+    <FileSelectionContext.Provider value={value}>
+      {children}
+    </FileSelectionContext.Provider>
+  );
+};
+
+export const useFileSelection = () => {
+  const context = useContext(FileSelectionContext);
+  if (context === undefined) {
+    throw new Error(
+      'useFileSelection must be used within a FileSelectionProvider'
+    );
+  }
+  return context;
+};

frontend/src/contexts/ModalContext.js

@@ -1,9 +1,8 @@
 import React, { createContext, useContext, useState } from 'react';
 
-const UIStateContext = createContext();
+const ModalContext = createContext();
 
-export const UIStateProvider = ({ children }) => {
-  const [activeTab, setActiveTab] = useState('source');
+export const ModalProvider = ({ children }) => {
   const [newFileModalVisible, setNewFileModalVisible] = useState(false);
   const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
   const [commitMessageModalVisible, setCommitMessageModalVisible] =
@@ -11,8 +10,6 @@ export const UIStateProvider = ({ children }) => {
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
 
   const value = {
-    activeTab,
-    setActiveTab,
     newFileModalVisible,
     setNewFileModalVisible,
     deleteFileModalVisible,
@@ -24,14 +21,8 @@ export const UIStateProvider = ({ children }) => {
   };
 
   return (
-    <UIStateContext.Provider value={value}>{children}</UIStateContext.Provider>
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
   );
 };
 
-export const useUIStateContext = () => {
-  const context = useContext(UIStateContext);
-  if (!context) {
-    throw new Error('useUIStateContext must be used within a UIStateProvider');
-  }
-  return context;
-};
+export const useModalContext = () => useContext(ModalContext);

frontend/src/contexts/TabContext.js

@@ -0,0 +1,15 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const TabContext = createContext();
+
+export const TabProvider = ({ children }) => {
+  const [activeTab, setActiveTab] = useState('source');
+
+  return (
+    <TabContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabContext.Provider>
+  );
+};
+
+export const useTabContext = () => useContext(TabContext);