Split large components

frontend/src/components/MainContent.js

@@ -11,16 +11,10 @@ import {
   Button,
 } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
-import Editor from './Editor';
 import FileTree from './FileTree';
-import MarkdownPreview from './MarkdownPreview';
-import {
-  commitAndPush,
-  saveFileContent,
-  deleteFile,
-  getFileUrl,
-  lookupFileByName,
-} from '../services/api';
+import FileActions from './FileActions';
+import ContentView from './ContentView';
+import { commitAndPush, saveFileContent, deleteFile } from '../services/api';
 import { isImageFile } from '../utils/fileHelpers';
 
 const MainContent = ({
@@ -33,33 +27,31 @@ const MainContent = ({
   onContentChange,
   onSave,
   settings,
-  onPullLatestChanges,
+  pullLatestChanges,
   onLinkClick,
+  lookupFileByName,
 }) => {
   const [activeTab, setActiveTab] = useState('source');
   const { type: themeType } = useTheme();
   const { setToast } = useToasts();
   const [newFileModalVisible, setNewFileModalVisible] = useState(false);
   const [newFileName, setNewFileName] = useState('');
-  const [isCurrentFileImage, setIsCurrentFileImage] = useState(false);
 
   useEffect(() => {
-    const currentFileIsImage = isImageFile(selectedFile);
-    setIsCurrentFileImage(currentFileIsImage);
-    if (currentFileIsImage) {
+    if (isImageFile(selectedFile)) {
       setActiveTab('preview');
     }
   }, [selectedFile]);
 
   const handleTabChange = (value) => {
-    if (!isCurrentFileImage || value === 'preview') {
+    if (!isImageFile(selectedFile) || value === 'preview') {
       setActiveTab(value);
     }
   };
 
   const handlePull = async () => {
     try {
-      await onPullLatestChanges();
+      await pullLatestChanges();
       setToast({ text: 'Successfully pulled latest changes', type: 'success' });
     } catch (error) {
       setToast({
@@ -78,7 +70,7 @@ const MainContent = ({
           text: 'Changes committed and pushed successfully',
           type: 'success',
         });
-        await onPullLatestChanges(); // Pull changes after successful push
+        await pullLatestChanges();
       }
     } catch (error) {
       setToast({
@@ -97,8 +89,8 @@ const MainContent = ({
       try {
         await saveFileContent(newFileName, '');
         setToast({ text: 'New file created successfully', type: 'success' });
-        await onPullLatestChanges(); // Refresh file list
-        onFileSelect(newFileName); // Select the new file
+        await pullLatestChanges();
+        onFileSelect(newFileName);
       } catch (error) {
         setToast({
           text: 'Failed to create new file: ' + error.message,
@@ -119,8 +111,8 @@ const MainContent = ({
         try {
           await deleteFile(selectedFile);
           setToast({ text: 'File deleted successfully', type: 'success' });
-          await onPullLatestChanges(); // Refresh file list
-          onFileSelect(null); // Deselect the file
+          await pullLatestChanges();
+          onFileSelect(null);
         } catch (error) {
           setToast({
             text: 'Failed to delete file: ' + error.message,
@@ -153,9 +145,7 @@ 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">
-            <FileTree
-              files={files}
-              onFileSelect={onFileSelect}
+            <FileActions
               selectedFile={selectedFile}
               gitEnabled={settings.gitEnabled}
               gitAutoCommit={settings.gitAutoCommit}
@@ -164,6 +154,11 @@ const MainContent = ({
               onCreateFile={handleCreateFile}
               onDeleteFile={handleDeleteFile}
             />
+            <FileTree
+              files={files}
+              onFileSelect={onFileSelect}
+              selectedFile={selectedFile}
+            />
           </div>
         </Grid>
         <Grid
@@ -180,40 +175,22 @@ const MainContent = ({
               <Tabs.Item
                 label={<Code />}
                 value="source"
-                disabled={isCurrentFileImage}
+                disabled={isImageFile(selectedFile)}
               />
               <Tabs.Item label={<Eye />} value="preview" />
             </Tabs>
           </div>
           <div className="content-body">
-            {activeTab === 'source' && !isCurrentFileImage ? (
-              <Editor
-                content={content}
-                onChange={onContentChange}
-                onSave={onSave}
-                filePath={selectedFile}
-                themeType={themeType}
-              />
-            ) : isCurrentFileImage ? (
-              <div className="image-preview">
-                <img
-                  src={getFileUrl(selectedFile)}
-                  alt={selectedFile}
-                  style={{
-                    maxWidth: '100%',
-                    maxHeight: '100%',
-                    objectFit: 'contain',
-                  }}
-                />
-              </div>
-            ) : (
-              <MarkdownPreview
-                content={content}
-                baseUrl={window.API_BASE_URL}
-                onLinkClick={onLinkClick}
-                lookupFileByName={lookupFileByName}
-              />
-            )}
+            <ContentView
+              activeTab={activeTab}
+              content={content}
+              selectedFile={selectedFile}
+              onContentChange={onContentChange}
+              onSave={onSave}
+              themeType={themeType}
+              onLinkClick={onLinkClick}
+              lookupFileByName={lookupFileByName}
+            />
           </div>
         </Grid>
       </Grid.Container>