Remove more contexts

frontend/src/components/ContentView.js

@@ -4,11 +4,15 @@ import MarkdownPreview from './MarkdownPreview';
 import { Text } from '@geist-ui/core';
 import { getFileUrl } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
-import { useFileSelection } from '../contexts/FileSelectionContext';
-
-const ContentView = ({ activeTab }) => {
-  const { selectedFile } = useFileSelection();
 
+const ContentView = ({
+  activeTab,
+  selectedFile,
+  content,
+  handleContentChange,
+  handleSave,
+  handleLinkClick,
+}) => {
   if (!selectedFile) {
     return (
       <div
@@ -40,7 +44,16 @@ const ContentView = ({ activeTab }) => {
     );
   }
 
-  return activeTab === 'source' ? <Editor /> : <MarkdownPreview />;
+  return activeTab === 'source' ? (
+    <Editor
+      content={content}
+      handleContentChange={handleContentChange}
+      handleSave={handleSave}
+      selectedFile={selectedFile}
+    />
+  ) : (
+    <MarkdownPreview content={content} handleLinkClick={handleLinkClick} />
+  );
 };
 
 export default ContentView;

frontend/src/components/Editor.js

@@ -6,12 +6,8 @@ import { markdown } from '@codemirror/lang-markdown';
 import { defaultKeymap } from '@codemirror/commands';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { useSettings } from '../contexts/SettingsContext';
-import { useFileSelection } from '../contexts/FileSelectionContext';
-import { useEditorContent } from '../contexts/EditorContentContext';
 
-const Editor = () => {
-  const { content, handleContentChange, handleSave } = useEditorContent();
-  const { selectedFile } = useFileSelection();
+const Editor = (content, handleContentChange, handleSave, selectedFile) => {
   const { settings } = useSettings();
   const editorRef = useRef();
   const viewRef = useRef();

frontend/src/components/FileActions.js

@@ -2,16 +2,9 @@ import React from 'react';
 import { Button, Tooltip, ButtonGroup, Spacer } from '@geist-ui/core';
 import { Plus, Trash, GitPullRequest, GitCommit } from '@geist-ui/icons';
 import { useSettings } from '../contexts/SettingsContext';
-import { useFileSelection } from '../contexts/FileSelectionContext';
 import { useModalContext } from '../contexts/ModalContext';
 
-const FileActions = ({
-  onCreateFile,
-  onDeleteFile,
-  onPullChanges,
-  onCommitAndPush,
-}) => {
-  const { selectedFile } = useFileSelection();
+const FileActions = ({ handlePullChanges, selectedFile }) => {
   const { settings } = useSettings();
   const {
     setNewFileModalVisible,
@@ -62,7 +55,7 @@ const FileActions = ({
           icon={<GitPullRequest />}
           auto
           scale={2 / 3}
-          onClick={onPullChanges}
+          onClick={handlePullChanges}
           disabled={!settings.gitEnabled}
           px={0.6}
         />

frontend/src/components/FileTree.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
 import { isImageFile } from '../utils/fileHelpers';
-import { useFileSelection } from '../contexts/FileSelectionContext';
-
-const FileTree = ({ files }) => {
-  const { selectedFile, handleFileSelect } = useFileSelection();
 
+const FileTree = ({ files, selectedFile, handleFileSelect }) => {
   if (files.length === 0) {
     return <div>No files to display</div>;
   }

frontend/src/components/MainContent.js

@@ -1,89 +1,52 @@
+import React from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { Breadcrumbs, Grid, Tabs } from '@geist-ui/core';
+import { Code, Eye } from '@geist-ui/icons';
+
 import FileActions from './FileActions';
 import FileTree from './FileTree';
 import ContentView from './ContentView';
 import CreateFileModal from './modals/CreateFileModal';
 import DeleteFileModal from './modals/DeleteFileModal';
 import CommitMessageModal from './modals/CommitMessageModal';
-import { useEditorContent } from '../contexts/EditorContentContext';
-import { useFileSelection } from '../contexts/FileSelectionContext';
-import { useSettings } from '../contexts/SettingsContext';
+
+import { useFileContent } from '../hooks/useFileContent';
+import { useFileList } from '../hooks/useFileList';
 import { useFileOperations } from '../hooks/useFileOperations';
-import { pullChanges, commitAndPush, fetchFileList } from '../services/api';
-import { Breadcrumbs, Grid, Tabs, useToasts } from '@geist-ui/core';
-import { Code, Eye } from '@geist-ui/icons';
-import { useState, useCallback, useEffect } from 'react';
-import React from 'react';
+import { useGitOperations } from '../hooks/useGitOperations';
+import { useFileNavigation } from '../hooks/useFileNavigation';
 
 const MainContent = () => {
   const [activeTab, setActiveTab] = useState('source');
-  const [files, setFiles] = useState([]);
-  const { hasUnsavedChanges } = useEditorContent();
-  const { selectedFile } = useFileSelection();
-  const { settings } = useSettings();
-  const { handleCreate, handleDelete } = useFileOperations();
-  const { setToast } = useToasts();
-
-  const refreshFileList = useCallback(async () => {
-    try {
-      const fileList = await fetchFileList();
-      setFiles(fileList);
-    } catch (error) {
-      console.error('Failed to fetch file list:', error);
-      setToast({ text: 'Failed to refresh file list', type: 'error' });
-    }
-  }, [setToast]);
+  const [files, loadFileList] = useFileList();
+  const { content, hasUnsavedChanges, handleContentChange } = useFileContent();
+  const { handleSave, handleCreate, handleDelete } = useFileOperations();
+  const { handleCommitAndPush, handlePull } = useGitOperations();
+  const { handleLinkClick, selectedFile, isNewFile, handleFileSelect } =
+    useFileNavigation();
 
   useEffect(() => {
-    refreshFileList();
+    loadFileList();
   }, []);
 
   const handleTabChange = (value) => {
     setActiveTab(value);
   };
 
-  const pullLatestChanges = useCallback(async () => {
-    if (!settings.gitEnabled) return;
-    try {
-      await pullChanges();
-      await refreshFileList();
-      setToast({ text: 'Successfully pulled latest changes', type: 'success' });
-    } catch (error) {
-      console.error('Failed to pull latest changes:', error);
-      setToast({ text: 'Failed to pull latest changes', type: 'error' });
-    }
-  }, [settings.gitEnabled, setToast, refreshFileList]);
-
-  const handleCommitAndPush = useCallback(
-    async (message) => {
-      if (!settings.gitEnabled) return;
-      try {
-        await commitAndPush(message);
-        setToast({
-          text: 'Successfully committed and pushed changes',
-          type: 'success',
-        });
-      } catch (error) {
-        console.error('Failed to commit and push changes:', error);
-        setToast({ text: 'Failed to commit and push changes', type: 'error' });
-      }
-    },
-    [settings.gitEnabled, setToast]
-  );
-
   const handleCreateFile = useCallback(
     async (fileName) => {
       await handleCreate(fileName);
-      await refreshFileList();
+      await loadFileList();
     },
-    [handleCreate, refreshFileList]
+    [handleCreate]
   );
 
   const handleDeleteFile = useCallback(
     async (filePath) => {
       await handleDelete(filePath);
-      await refreshFileList();
+      await loadFileList();
     },
-    [handleDelete, refreshFileList]
+    [handleDelete]
   );
 
   const renderBreadcrumbs = () => {
@@ -109,12 +72,14 @@ const MainContent = () => {
         <Grid xs={24} sm={6} md={5} lg={4} height="100%" className="sidebar">
           <div className="file-tree-container">
             <FileActions
-              onCreateFile={handleCreateFile}
-              onDeleteFile={handleDeleteFile}
-              onPullChanges={pullLatestChanges}
-              onCommitAndPush={handleCommitAndPush}
+              handlePullChanges={handlePull}
+              selectedFile={selectedFile}
+            />
+            <FileTree
+              files={files}
+              selectedFile={selectedFile}
+              handleFileSelect={handleFileSelect}
             />
-            <FileTree files={files} />
           </div>
         </Grid>
         <Grid
@@ -133,12 +98,22 @@ const MainContent = () => {
             </Tabs>
           </div>
           <div className="content-body">
-            <ContentView activeTab={activeTab} />
+            <ContentView
+              activeTab={activeTab}
+              selectedFile={selectedFile}
+              content={content}
+              handleContentChange={handleContentChange}
+              handleSave={handleSave}
+              handleLinkClick={handleLinkClick}
+            />
           </div>
         </Grid>
       </Grid.Container>
       <CreateFileModal onCreateFile={handleCreateFile} />
-      <DeleteFileModal onDeleteFile={handleDeleteFile} />
+      <DeleteFileModal
+        onDeleteFile={handleDeleteFile}
+        selectedFile={selectedFile}
+      />
       <CommitMessageModal onCommitAndPush={handleCommitAndPush} />
     </>
   );

frontend/src/components/MarkdownPreview.js

@@ -5,13 +5,9 @@ import rehypeKatex from 'rehype-katex';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import 'katex/dist/katex.min.css';
-import { useFileNavigation } from '../hooks/useFileNavigation';
 import { lookupFileByName } from '../services/api';
-import { useEditorContent } from '../contexts/EditorContentContext';
 
-const MarkdownPreview = () => {
-  const { content } = useEditorContent();
-  const { handleLinkClick } = useFileNavigation();
+const MarkdownPreview = (content, handleLinkClick) => {
   const [processedContent, setProcessedContent] = useState(content);
   const baseUrl = window.API_BASE_URL;
 

frontend/src/components/modals/DeleteFileModal.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import { Modal, Text } from '@geist-ui/core';
 import { useModalContext } from '../../contexts/ModalContext';
-import { useFileSelection } from '../../contexts/FileSelectionContext';
 
-const DeleteFileModal = ({ onDeleteFile }) => {
-  const { selectedFile } = useFileSelection();
+const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
   const { deleteFileModalVisible, setDeleteFileModalVisible } =
     useModalContext();