{
);
}
- return activeTab === 'source' ?
:
;
+ return activeTab === 'source' ? (
+
+ ) : (
+
+ );
};
export default ContentView;
diff --git a/frontend/src/components/Editor.js b/frontend/src/components/Editor.js
index d9554ca..d71a835 100644
--- a/frontend/src/components/Editor.js
+++ b/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();
diff --git a/frontend/src/components/FileActions.js b/frontend/src/components/FileActions.js
index 70ffda3..78eaf4b 100644
--- a/frontend/src/components/FileActions.js
+++ b/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={
}
auto
scale={2 / 3}
- onClick={onPullChanges}
+ onClick={handlePullChanges}
disabled={!settings.gitEnabled}
px={0.6}
/>
diff --git a/frontend/src/components/FileTree.js b/frontend/src/components/FileTree.js
index ac8dd85..5f15573 100644
--- a/frontend/src/components/FileTree.js
+++ b/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
No files to display
;
}
diff --git a/frontend/src/components/MainContent.js b/frontend/src/components/MainContent.js
index f84306e..5173d33 100644
--- a/frontend/src/components/MainContent.js
+++ b/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 = () => {
+
-
{