Implement state contexts

frontend/src/contexts/FileContentContext.js

@@ -0,0 +1,24 @@
+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

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

frontend/src/contexts/GitOperationsContext.js

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

frontend/src/contexts/UIStateContext.js

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const UIStateContext = createContext();
+
+export const UIStateProvider = ({ children }) => {
+  const [activeTab, setActiveTab] = useState('source');
+  const [newFileModalVisible, setNewFileModalVisible] = useState(false);
+  const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
+  const [commitMessageModalVisible, setCommitMessageModalVisible] =
+    useState(false);
+
+  const value = {
+    activeTab,
+    setActiveTab,
+    newFileModalVisible,
+    setNewFileModalVisible,
+    deleteFileModalVisible,
+    setDeleteFileModalVisible,
+    commitMessageModalVisible,
+    setCommitMessageModalVisible,
+  };
+
+  return (
+    <UIStateContext.Provider value={value}>{children}</UIStateContext.Provider>
+  );
+};
+
+export const useUIStateContext = () => {
+  const context = useContext(UIStateContext);
+  if (!context) {
+    throw new Error('useUIStateContext must be used within a UIStateProvider');
+  }
+  return context;
+};