Remove FileList, FileOps and GitOps contexts

frontend/src/components/FileActions.js

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

frontend/src/components/FileTree.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { Tree } from '@geist-ui/core';
 import { File, Folder, Image } from '@geist-ui/icons';
-import { useFileListContext } from '../contexts/FileListContext';
 import { isImageFile } from '../utils/fileHelpers';
 import { useFileSelection } from '../contexts/FileSelectionContext';
 
-const FileTree = () => {
-  const { files } = useFileListContext();
+const FileTree = ({ files }) => {
   const { selectedFile, handleFileSelect } = useFileSelection();
 
   if (files.length === 0) {

frontend/src/components/MainContent.js

@@ -1,24 +1,91 @@
-import React, { useState } from 'react';
-import { Grid, Breadcrumbs, Tabs, Dot } from '@geist-ui/core';
-import { Code, Eye } from '@geist-ui/icons';
-import FileTree from './FileTree';
 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 { 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';
 
 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]);
+
+  useEffect(() => {
+    refreshFileList();
+  }, []);
 
   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();
+    },
+    [handleCreate, refreshFileList]
+  );
+
+  const handleDeleteFile = useCallback(
+    async (filePath) => {
+      await handleDelete(filePath);
+      await refreshFileList();
+    },
+    [handleDelete, refreshFileList]
+  );
+
   const renderBreadcrumbs = () => {
     if (!selectedFile) return <div className="breadcrumbs-container"></div>;
     const pathParts = selectedFile.split('/');
@@ -41,8 +108,13 @@ const MainContent = () => {
       <Grid.Container gap={1} height="calc(100vh - 64px)">
         <Grid xs={24} sm={6} md={5} lg={4} height="100%" className="sidebar">
           <div className="file-tree-container">
-            <FileActions />
-            <FileTree />
+            <FileActions
+              onCreateFile={handleCreateFile}
+              onDeleteFile={handleDeleteFile}
+              onPullChanges={pullLatestChanges}
+              onCommitAndPush={handleCommitAndPush}
+            />
+            <FileTree files={files} />
           </div>
         </Grid>
         <Grid
@@ -65,9 +137,9 @@ const MainContent = () => {
           </div>
         </Grid>
       </Grid.Container>
-      <CreateFileModal />
-      <DeleteFileModal />
-      <CommitMessageModal />
+      <CreateFileModal onCreateFile={handleCreateFile} />
+      <DeleteFileModal onDeleteFile={handleDeleteFile} />
+      <CommitMessageModal onCommitAndPush={handleCommitAndPush} />
     </>
   );
 };

frontend/src/components/modals/CommitMessageModal.js

@@ -1,17 +1,15 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
-import { useGitOperationsContext } from '../../contexts/GitOperationsContext';
 import { useModalContext } from '../../contexts/ModalContext';
 
-const CommitMessageModal = () => {
+const CommitMessageModal = ({ onCommitAndPush }) => {
   const [message, setMessage] = useState('');
-  const { handleCommitAndPush } = useGitOperationsContext();
   const { commitMessageModalVisible, setCommitMessageModalVisible } =
     useModalContext();
 
   const handleSubmit = async () => {
     if (message) {
-      await handleCommitAndPush(message);
+      await onCommitAndPush(message);
       setMessage('');
       setCommitMessageModalVisible(false);
     }

frontend/src/components/modals/CreateFileModal.js

@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
-import { useFileOperations } from '../../contexts/FileOperationsContext';
 import { useModalContext } from '../../contexts/ModalContext';
 
-const CreateFileModal = () => {
+const CreateFileModal = ({ onCreateFile }) => {
   const [fileName, setFileName] = useState('');
   const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
-  const { handleCreateNewFile } = useFileOperations();
 
   const handleSubmit = async () => {
     if (fileName) {
-      await handleCreateNewFile(fileName);
+      await onCreateFile(fileName);
       setFileName('');
       setNewFileModalVisible(false);
     }

frontend/src/components/modals/DeleteFileModal.js

@@ -3,13 +3,13 @@ import { Modal, Text } from '@geist-ui/core';
 import { useModalContext } from '../../contexts/ModalContext';
 import { useFileSelection } from '../../contexts/FileSelectionContext';
 
-const DeleteFileModal = () => {
-  const { selectedFile, handleDeleteFile } = useFileSelection();
+const DeleteFileModal = ({ onDeleteFile }) => {
+  const { selectedFile } = useFileSelection();
   const { deleteFileModalVisible, setDeleteFileModalVisible } =
     useModalContext();
 
   const handleConfirm = async () => {
-    await handleDeleteFile();
+    await onDeleteFile(selectedFile);
     setDeleteFileModalVisible(false);
   };