Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix file loading, saving and navigation issues

Browse Source
This commit is contained in:
Matúš Námešný
2024-10-05 23:38:35 +02:00
parent 6406265df6
commit cf4378edf6
4 changed files with 105 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Editor.js
View File

@@ -12,8 +12,6 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
const editorRef = useRef(); const editorRef = useRef();
const viewRef = useRef(); const viewRef = useRef();
console.log('Editor content:', content);
useEffect(() => { useEffect(() => {
const handleEditorSave = (view) => { const handleEditorSave = (view) => {
handleSave(selectedFile, view.state.doc.toString()); handleSave(selectedFile, view.state.doc.toString());
@@ -72,7 +70,7 @@ const Editor = ({ content, handleContentChange, handleSave, selectedFile }) => {
return () => { return () => {
view.destroy(); view.destroy();
}; };
}, [selectedFile, settings.theme, handleContentChange, handleSave]); }, [settings.theme, handleContentChange]);
useEffect(() => { useEffect(() => {
if (viewRef.current && content !== viewRef.current.state.doc.toString()) { if (viewRef.current && content !== viewRef.current.state.doc.toString()) {

49
frontend/src/components/MainContent.js
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { useState, useCallback, useEffect } from 'react'; import { Breadcrumbs, Grid, Tabs, Dot } from '@geist-ui/core';
import { Breadcrumbs, Dot, Grid, Tabs } from '@geist-ui/core';
import { Code, Eye } from '@geist-ui/icons'; import { Code, Eye } from '@geist-ui/icons';
import FileActions from './FileActions'; import FileActions from './FileActions';
@@ -19,34 +18,56 @@ import { useFileNavigation } from '../hooks/useFileNavigation';
const MainContent = () => { const MainContent = () => {
const [activeTab, setActiveTab] = useState('source'); const [activeTab, setActiveTab] = useState('source');
const { files, loadFileList } = useFileList(); const { files, loadFileList } = useFileList();
const { content, hasUnsavedChanges, handleContentChange } = useFileContent(); const { handleLinkClick, selectedFile, handleFileSelect } =
useFileNavigation();
const {
content,
hasUnsavedChanges,
setHasUnsavedChanges,
handleContentChange,
} = useFileContent(selectedFile);
const { handleSave, handleCreate, handleDelete } = useFileOperations(); const { handleSave, handleCreate, handleDelete } = useFileOperations();
const { handleCommitAndPush, handlePull } = useGitOperations(); const { handleCommitAndPush, handlePull } = useGitOperations();
const { handleLinkClick, selectedFile, isNewFile, handleFileSelect } =
useFileNavigation();
useEffect(() => { useEffect(() => {
loadFileList(); loadFileList();
}, []); }, [loadFileList]);
const handleTabChange = (value) => { const handleTabChange = (value) => {
setActiveTab(value); setActiveTab(value);
}; };
const handleSaveFile = useCallback(
async (filePath, content) => {
const success = await handleSave(filePath, content);
if (success) {
setHasUnsavedChanges(false);
}
return success;
},
[handleSave, setHasUnsavedChanges]
);
const handleCreateFile = useCallback( const handleCreateFile = useCallback(
async (fileName) => { async (fileName) => {
await handleCreate(fileName); const success = await handleCreate(fileName);
await loadFileList(); if (success) {
await loadFileList();
handleFileSelect(fileName);
}
}, },
[handleCreate, loadFileList] [handleCreate, loadFileList, handleFileSelect]
); );
const handleDeleteFile = useCallback( const handleDeleteFile = useCallback(
async (filePath) => { async (filePath) => {
await handleDelete(filePath); const success = await handleDelete(filePath);
await loadFileList(); if (success) {
await loadFileList();
handleFileSelect(null);
}
}, },
[handleDelete, loadFileList] [handleDelete, loadFileList, handleFileSelect]
); );
const renderBreadcrumbs = () => { const renderBreadcrumbs = () => {
@@ -103,7 +124,7 @@ const MainContent = () => {
selectedFile={selectedFile} selectedFile={selectedFile}
content={content} content={content}
handleContentChange={handleContentChange} handleContentChange={handleContentChange}
handleSave={handleSave} handleSave={handleSaveFile}
handleLinkClick={handleLinkClick} handleLinkClick={handleLinkClick}
/> />
</div> </div>

37
frontend/src/hooks/useFileContent.js
View File

@@ -1,32 +1,47 @@
import { useState, useCallback } from 'react'; import { useState, useCallback, useEffect } from 'react';
import { fetchFileContent } from '../services/api'; import { fetchFileContent } from '../services/api';
import { isImageFile } from '../utils/fileHelpers'; import { isImageFile } from '../utils/fileHelpers';
import { DEFAULT_FILE } from '../utils/constants'; import { DEFAULT_FILE } from '../utils/constants';
export const useFileContent = () => { export const useFileContent = (selectedFile) => {
const [content, setContent] = useState(DEFAULT_FILE.content); const [content, setContent] = useState(DEFAULT_FILE.content);
const [originalContent, setOriginalContent] = useState(DEFAULT_FILE.content);
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const loadFileContent = useCallback(async (filePath) => { const loadFileContent = useCallback(async (filePath) => {
try { try {
let newContent;
if (filePath === DEFAULT_FILE.path) { if (filePath === DEFAULT_FILE.path) {
setContent(DEFAULT_FILE.content); newContent = DEFAULT_FILE.content;
} else if (!isImageFile(filePath)) { } else if (!isImageFile(filePath)) {
const fileContent = await fetchFileContent(filePath); newContent = await fetchFileContent(filePath);
setContent(fileContent);
} else { } else {
setContent(''); // Set empty content for image files newContent = ''; // Set empty content for image files
} }
setContent(newContent);
setOriginalContent(newContent);
setHasUnsavedChanges(false); setHasUnsavedChanges(false);
} catch (err) { } catch (err) {
console.error(err); console.error('Error loading file content:', err);
setContent(''); // Set empty content on error
setOriginalContent('');
setHasUnsavedChanges(false);
} }
}, []); }, []);
const handleContentChange = useCallback((newContent) => { useEffect(() => {
setContent(newContent); if (selectedFile) {
setHasUnsavedChanges(true); loadFileContent(selectedFile);
}, []); }
}, [selectedFile, loadFileContent]);
const handleContentChange = useCallback(
(newContent) => {
setContent(newContent);
setHasUnsavedChanges(newContent !== originalContent);
},
[originalContent]
);
return { return {
content, content,

76
frontend/src/hooks/useFileOperations.js
View File

@@ -2,43 +2,53 @@ import { useCallback } from 'react';
import { saveFileContent, deleteFile } from '../services/api'; import { saveFileContent, deleteFile } from '../services/api';
import { useToasts } from '@geist-ui/core'; import { useToasts } from '@geist-ui/core';
export const useFileOperations = (setHasUnsavedChanges) => { export const useFileOperations = () => {
const { setToast } = useToasts(); const { setToast } = useToasts();
const handleSave = useCallback(async (filePath, content) => { const handleSave = useCallback(
try { async (filePath, content) => {
await saveFileContent(filePath, content); try {
setHasUnsavedChanges(false); await saveFileContent(filePath, content);
setToast({ text: 'File saved successfully', type: 'success' }); setToast({ text: 'File saved successfully', type: 'success' });
return true; return true;
} catch (error) { } catch (error) {
console.error('Error saving file:', error); console.error('Error saving file:', error);
return false; setToast({ text: 'Failed to save file', type: 'error' });
} return false;
}, []); }
},
[setToast]
);
const handleDelete = useCallback(async (filePath) => { const handleDelete = useCallback(
try { async (filePath) => {
await deleteFile(filePath); try {
setToast({ text: 'File deleted successfully', type: 'success' }); await deleteFile(filePath);
return true; setToast({ text: 'File deleted successfully', type: 'success' });
} catch (error) { return true;
setToast({ text: `Error deleting file`, type: 'error' }); } catch (error) {
console.error('Error deleting file:', error); setToast({ text: `Error deleting file`, type: 'error' });
return false; console.error('Error deleting file:', error);
} return false;
}, []); }
},
[setToast]
);
const handleCreate = useCallback(async (fileName, initialContent = '') => { const handleCreate = useCallback(
try { async (fileName, initialContent = '') => {
await saveFileContent(fileName, initialContent); try {
return true; await saveFileContent(fileName, initialContent);
} catch (error) { setToast({ text: 'File created successfully', type: 'success' });
setToast({ text: `Error creating new file`, type: 'error' }); return true;
console.error('Error creating new file:', error); } catch (error) {
return false; setToast({ text: `Error creating new file`, type: 'error' });
} console.error('Error creating new file:', error);
}, []); return false;
}
},
[setToast]
);
return { handleSave, handleDelete, handleCreate }; return { handleSave, handleDelete, handleCreate };
}; };