Fix some props issues

frontend/src/components/ContentView.js

@@ -44,6 +44,8 @@ const ContentView = ({
     );
   }
 
+  console.log('ContentView content', content);
+
   return activeTab === 'source' ? (
     <Editor
       content={content}

frontend/src/components/Editor.js

@@ -7,11 +7,13 @@ import { defaultKeymap } from '@codemirror/commands';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { useSettings } from '../contexts/SettingsContext';
 
-const Editor = (content, handleContentChange, handleSave, selectedFile) => {
+const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
   const { settings } = useSettings();
   const editorRef = useRef();
   const viewRef = useRef();
 
+  console.log('Editor content:', content);
+
   useEffect(() => {
     const handleEditorSave = (view) => {
       handleSave(selectedFile, view.state.doc.toString());

frontend/src/components/MainContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState, useCallback, useEffect } from 'react';
-import { Breadcrumbs, Grid, Tabs } from '@geist-ui/core';
+import { Breadcrumbs, Dot, Grid, Tabs } from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
 
 import FileActions from './FileActions';
@@ -18,7 +18,7 @@ import { useFileNavigation } from '../hooks/useFileNavigation';
 
 const MainContent = () => {
   const [activeTab, setActiveTab] = useState('source');
-  const [files, loadFileList] = useFileList();
+  const { files, loadFileList } = useFileList();
   const { content, hasUnsavedChanges, handleContentChange } = useFileContent();
   const { handleSave, handleCreate, handleDelete } = useFileOperations();
   const { handleCommitAndPush, handlePull } = useGitOperations();
@@ -38,7 +38,7 @@ const MainContent = () => {
       await handleCreate(fileName);
       await loadFileList();
     },
-    [handleCreate]
+    [handleCreate, loadFileList]
   );
 
   const handleDeleteFile = useCallback(
@@ -46,7 +46,7 @@ const MainContent = () => {
       await handleDelete(filePath);
       await loadFileList();
     },
-    [handleDelete]
+    [handleDelete, loadFileList]
   );
 
   const renderBreadcrumbs = () => {

frontend/src/components/MarkdownPreview.js

@@ -7,7 +7,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import 'katex/dist/katex.min.css';
 import { lookupFileByName } from '../services/api';
 
-const MarkdownPreview = (content, handleLinkClick) => {
+const MarkdownPreview = ({ content, handleLinkClick }) => {
   const [processedContent, setProcessedContent] = useState(content);
   const baseUrl = window.API_BASE_URL;
 

frontend/src/hooks/useFileNavigation.js

@@ -1,8 +1,7 @@
-// hooks/useFileNavigation.js
 import { useState, useCallback } from 'react';
 import { useToasts } from '@geist-ui/core';
 import { lookupFileByName } from '../services/api';
-import { DEFAULT_FILE } from '../utils/constants'; // Assuming you have this constant defined
+import { DEFAULT_FILE } from '../utils/constants';
 
 export const useFileNavigation = () => {
   const { setToast } = useToasts();
@@ -10,6 +9,11 @@ export const useFileNavigation = () => {
   const [selectedFile, setSelectedFile] = useState(DEFAULT_FILE.path);
   const [isNewFile, setIsNewFile] = useState(true);
 
+  const handleFileSelect = useCallback((filePath) => {
+    setSelectedFile(filePath);
+    setIsNewFile(filePath === DEFAULT_FILE.path);
+  }, []);
+
   const handleLinkClick = useCallback(
     async (filename) => {
       try {
@@ -27,13 +31,8 @@ export const useFileNavigation = () => {
         });
       }
     },
-    [handleFileSelect]
+    [handleFileSelect, setToast]
   );
 
-  const handleFileSelect = useCallback(async (filePath) => {
-    setSelectedFile(filePath);
-    setIsNewFile(filePath === DEFAULT_FILE.path);
-  }, []);
-
   return { handleLinkClick, selectedFile, isNewFile, handleFileSelect };
 };