Set up and run eslint and prettier

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true,
+      "node": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended"
+    ],
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "react"
+    ],
+    "rules": {
+      "react/prop-types": "off",
+      "no-unused-vars": "warn"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    }
+  }

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5"
+  }
+  

frontend/package.json

@@ -13,7 +13,6 @@
   },
   "keywords": [
     "markdown",
-    "hypermd",
     "editor"
   ],
   "author": "Matúš Námešný",

frontend/src/App.js

@@ -47,7 +47,7 @@ function App() {
       <CssBaseline />
       <Page>
         <Header currentTheme={themeType} onThemeChange={setTheme} />
-        <Page.Content className='page-content'>
+        <Page.Content className="page-content">
           <MainContent
             content={content}
             files={files}

frontend/src/App.scss

@@ -15,12 +15,11 @@ $navbar-height: 64px;
   .file-tree-container {
     width: 100%;
 
-    &>div {
+    & > div {
       padding: 0;
       margin: 0;
     }
   }
-
 }
 
 .page-content {

frontend/src/components/Editor.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from 'react';
-import { basicSetup } from "codemirror";
+import { basicSetup } from 'codemirror';
-import { EditorState } from "@codemirror/state";
+import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from "@codemirror/view";
+import { EditorView, keymap } from '@codemirror/view';
-import { markdown } from "@codemirror/lang-markdown";
+import { markdown } from '@codemirror/lang-markdown';
-import { defaultKeymap } from "@codemirror/commands";
+import { defaultKeymap } from '@codemirror/commands';
-import { oneDark } from "@codemirror/theme-one-dark";
+import { oneDark } from '@codemirror/theme-one-dark';
 
 const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
   const editorRef = useRef();
@@ -17,20 +17,20 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
     };
 
     const theme = EditorView.theme({
-      "&": {
+      '&': {
-        height: "100%",
+        height: '100%',
-        fontSize: "14px",
+        fontSize: '14px',
       },
-      ".cm-scroller": {
+      '.cm-scroller': {
-        overflow: "auto",
+        overflow: 'auto',
       },
-      ".cm-gutters": {
+      '.cm-gutters': {
-        backgroundColor: themeType === "dark" ? "#1e1e1e" : "#f5f5f5",
+        backgroundColor: themeType === 'dark' ? '#1e1e1e' : '#f5f5f5',
-        color: themeType === "dark" ? "#858585" : "#999",
+        color: themeType === 'dark' ? '#858585' : '#999',
-        border: "none",
+        border: 'none',
       },
-      ".cm-activeLineGutter": {
+      '.cm-activeLineGutter': {
-        backgroundColor: themeType === "dark" ? "#2c313a" : "#e8e8e8",
+        backgroundColor: themeType === 'dark' ? '#2c313a' : '#e8e8e8',
       },
     });
 
@@ -41,18 +41,20 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
         markdown(),
         EditorView.lineWrapping,
         keymap.of(defaultKeymap),
-        keymap.of([{
+        keymap.of([
-          key: "Ctrl-s",
+          {
+            key: 'Ctrl-s',
             run: handleSave,
-          preventDefault: true
+            preventDefault: true,
-        }]),
+          },
+        ]),
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
             onChange(update.state.doc.toString());
           }
         }),
         theme,
-        themeType === "dark" ? oneDark : [],
+        themeType === 'dark' ? oneDark : [],
       ],
     });
 
@@ -71,7 +73,11 @@ const Editor = ({ content, onChange, onSave, filePath, themeType }) => {
   useEffect(() => {
     if (viewRef.current && content !== viewRef.current.state.doc.toString()) {
       viewRef.current.dispatch({
-        changes: { from: 0, to: viewRef.current.state.doc.length, insert: content }
+        changes: {
+          from: 0,
+          to: viewRef.current.state.doc.length,
+          insert: content,
+        },
       });
     }
   }, [content]);

frontend/src/components/FileTree.js

@@ -1,6 +1,13 @@
 import React from 'react';
 import { Tree, Button, Tooltip, Spacer, ButtonGroup } from '@geist-ui/core';
-import { File, Folder, GitPullRequest, GitCommit, Plus, Trash } from '@geist-ui/icons';
+import {
+  File,
+  Folder,
+  GitPullRequest,
+  GitCommit,
+  Plus,
+  Trash,
+} from '@geist-ui/icons';
 
 const FileTree = ({
   files = [],
@@ -11,7 +18,7 @@ const FileTree = ({
   onPull = () => {},
   onCommitAndPush = () => {},
   onCreateFile = () => {},
-  onDeleteFile = () => {}
+  onDeleteFile = () => {},
 }) => {
   if (files.length === 0) {
     return <div>No files to display</div>;
@@ -30,26 +37,30 @@ const FileTree = ({
     );
   };
 
-  const renderIcon = ({ type }) => type === 'directory' ? <Folder /> : <File />;
+  const renderIcon = ({ type }) =>
+    type === 'directory' ? <Folder /> : <File />;
 
   return (
     <div>
-      <ButtonGroup className='file-tree-buttons'>
+      <ButtonGroup className="file-tree-buttons">
         <Tooltip text="Create new file" type="dark">
           <Button
             icon={<Plus />}
             auto
-            scale={2/3}
+            scale={2 / 3}
             onClick={onCreateFile}
             px={0.6}
           />
         </Tooltip>
         <Spacer w={0.5} />
-        <Tooltip text={selectedFile ? "Delete current file" : "No file selected"} type="dark">
+        <Tooltip
+          text={selectedFile ? 'Delete current file' : 'No file selected'}
+          type="dark"
+        >
           <Button
             icon={<Trash />}
             auto
-            scale={2/3}
+            scale={2 / 3}
             onClick={onDeleteFile}
             disabled={!selectedFile}
             type="error"
@@ -57,26 +68,34 @@ const FileTree = ({
           />
         </Tooltip>
         <Spacer w={0.5} />
-        <Tooltip text={gitEnabled ? "Pull changes from remote" : "Git is not enabled"} type="dark">
+        <Tooltip
+          text={gitEnabled ? 'Pull changes from remote' : 'Git is not enabled'}
+          type="dark"
+        >
           <Button
             icon={<GitPullRequest />}
             auto
-            scale={2/3}
+            scale={2 / 3}
             onClick={onPull}
             disabled={!gitEnabled}
             px={0.6}
           />
         </Tooltip>
         <Spacer w={0.5} />
-        <Tooltip text={
+        <Tooltip
-          !gitEnabled ? "Git is not enabled" :
+          text={
-          gitAutoCommit ? "Auto-commit is enabled" :
+            !gitEnabled
-          "Commit and push changes"
+              ? 'Git is not enabled'
-        } type="dark">
+              : gitAutoCommit
+              ? 'Auto-commit is enabled'
+              : 'Commit and push changes'
+          }
+          type="dark"
+        >
           <Button
             icon={<GitCommit />}
             auto
-            scale={2/3}
+            scale={2 / 3}
             onClick={onCommitAndPush}
             disabled={!gitEnabled || gitAutoCommit}
             px={0.6}

frontend/src/components/MainContent.js

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
-import { Grid, Breadcrumbs, Tabs, Dot, useTheme, useToasts, Modal, Input, Button } from '@geist-ui/core';
+import {
+  Grid,
+  Breadcrumbs,
+  Tabs,
+  Dot,
+  useTheme,
+  useToasts,
+  Modal,
+  Input,
+  Button,
+} from '@geist-ui/core';
 import { Code, Eye } from '@geist-ui/icons';
 import Editor from './Editor';
 import FileTree from './FileTree';
@@ -29,7 +39,10 @@ const MainContent = ({
       await pullLatestChanges();
       setToast({ text: 'Successfully pulled latest changes', type: 'success' });
     } catch (error) {
-      setToast({ text: 'Failed to pull changes: ' + error.message, type: 'error' });
+      setToast({
+        text: 'Failed to pull changes: ' + error.message,
+        type: 'error',
+      });
     }
   };
 
@@ -38,11 +51,17 @@ const MainContent = ({
       const message = prompt('Enter commit message:');
       if (message) {
         await commitAndPush(message);
-        setToast({ text: 'Changes committed and pushed successfully', type: 'success' });
+        setToast({
+          text: 'Changes committed and pushed successfully',
+          type: 'success',
+        });
         await pullLatestChanges(); // Pull changes after successful push
       }
     } catch (error) {
-      setToast({ text: 'Failed to commit and push changes: ' + error.message, type: 'error' });
+      setToast({
+        text: 'Failed to commit and push changes: ' + error.message,
+        type: 'error',
+      });
     }
   };
 
@@ -58,7 +77,10 @@ const MainContent = ({
         await pullLatestChanges(); // Refresh file list
         onFileSelect(newFileName); // Select the new file
       } catch (error) {
-        setToast({ text: 'Failed to create new file: ' + error.message, type: 'error' });
+        setToast({
+          text: 'Failed to create new file: ' + error.message,
+          type: 'error',
+        });
       }
     }
     setNewFileModalVisible(false);
@@ -67,7 +89,9 @@ const MainContent = ({
 
   const handleDeleteFile = async () => {
     if (selectedFile) {
-      const confirmDelete = window.confirm(`Are you sure you want to delete "${selectedFile}"?`);
+      const confirmDelete = window.confirm(
+        `Are you sure you want to delete "${selectedFile}"?`
+      );
       if (confirmDelete) {
         try {
           await deleteFile(selectedFile);
@@ -75,7 +99,10 @@ const MainContent = ({
           await pullLatestChanges(); // Refresh file list
           onFileSelect(null); // Deselect the file
         } catch (error) {
-          setToast({ text: 'Failed to delete file: ' + error.message, type: 'error' });
+          setToast({
+            text: 'Failed to delete file: ' + error.message,
+            type: 'error',
+          });
         }
       }
     }
@@ -91,7 +118,9 @@ const MainContent = ({
             <Breadcrumbs.Item key={index}>{part}</Breadcrumbs.Item>
           ))}
         </Breadcrumbs>
-        {hasUnsavedChanges && <Dot type="warning" className="unsaved-indicator" />}
+        {hasUnsavedChanges && (
+          <Dot type="warning" className="unsaved-indicator" />
+        )}
       </div>
     );
   };
@@ -114,7 +143,14 @@ const MainContent = ({
             />
           </div>
         </Grid>
-        <Grid xs={24} sm={18} md={19} lg={20} height="100%" className="main-content">
+        <Grid
+          xs={24}
+          sm={18}
+          md={19}
+          lg={20}
+          height="100%"
+          className="main-content"
+        >
           <div className="content-header">
             {renderBreadcrumbs()}
             <Tabs value={activeTab} onChange={setActiveTab}>
@@ -137,7 +173,10 @@ const MainContent = ({
           </div>
         </Grid>
       </Grid.Container>
-      <Modal visible={newFileModalVisible} onClose={() => setNewFileModalVisible(false)}>
+      <Modal
+        visible={newFileModalVisible}
+        onClose={() => setNewFileModalVisible(false)}
+      >
         <Modal.Title>Create New File</Modal.Title>
         <Modal.Content>
           <Input
@@ -147,7 +186,9 @@ const MainContent = ({
             onChange={(e) => setNewFileName(e.target.value)}
           />
         </Modal.Content>
-        <Modal.Action passive onClick={() => setNewFileModalVisible(false)}>Cancel</Modal.Action>
+        <Modal.Action passive onClick={() => setNewFileModalVisible(false)}>
+          Cancel
+        </Modal.Action>
         <Modal.Action onClick={handleNewFileSubmit}>Create</Modal.Action>
       </Modal>
     </>

frontend/src/components/MarkdownPreview.js

@@ -13,8 +13,8 @@ const MarkdownPreview = ({ content }) => {
         remarkPlugins={[remarkMath]}
         rehypePlugins={[rehypeKatex]}
         components={{
-          code({node, inline, className, children, ...props}) {
+          code({ node, inline, className, children, ...props }) {
-            const match = /language-(\w+)/.exec(className || '')
+            const match = /language-(\w+)/.exec(className || '');
             return !inline && match ? (
               <SyntaxHighlighter
                 style={vscDarkPlus}
@@ -28,8 +28,8 @@ const MarkdownPreview = ({ content }) => {
               <code className={className} {...props}>
                 {children}
               </code>
-            )
+            );
-          }
+          },
         }}
       >
         {content}

frontend/src/components/Settings.js

@@ -1,5 +1,15 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Modal, Text, Toggle, Input, Spacer, useTheme, Button, Dot, useToasts } from '@geist-ui/core';
+import {
+  Modal,
+  Text,
+  Toggle,
+  Input,
+  Spacer,
+  useTheme,
+  Button,
+  Dot,
+  useToasts,
+} from '@geist-ui/core';
 import { saveUserSettings, fetchUserSettings } from '../services/api';
 
 const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
@@ -42,13 +52,14 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
   }, [isInitialized, loadSettings]);
 
   useEffect(() => {
-    const settingsChanged = JSON.stringify(settings) !== JSON.stringify(originalSettings);
+    const settingsChanged =
+      JSON.stringify(settings) !== JSON.stringify(originalSettings);
     const themeChanged = themeSettings !== originalTheme;
     setHasUnsavedChanges(settingsChanged || themeChanged);
   }, [settings, themeSettings, originalSettings, originalTheme]);
 
   const handleInputChange = (key, value) => {
-    setSettings(prev => ({ ...prev, [key]: value }));
+    setSettings((prev) => ({ ...prev, [key]: value }));
   };
 
   const handleThemeChange = () => {
@@ -70,7 +81,10 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
       onClose();
     } catch (error) {
       console.error('Failed to save settings:', error);
-      setToast({ text: 'Failed to save settings: ' + error.message, type: 'error' });
+      setToast({
+        text: 'Failed to save settings: ' + error.message,
+        type: 'error',
+      });
     }
   };
 
@@ -111,7 +125,9 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
             <Text>Enable Git</Text>
             <Toggle
               checked={settings.gitEnabled}
-              onChange={(e) => handleInputChange('gitEnabled', e.target.checked)}
+              onChange={(e) =>
+                handleInputChange('gitEnabled', e.target.checked)
+              }
             />
           </div>
           <div className={settings.gitEnabled ? '' : 'disabled'}>
@@ -143,7 +159,9 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
               <Text>Auto Commit</Text>
               <Toggle
                 checked={settings.gitAutoCommit}
-                onChange={(e) => handleInputChange('gitAutoCommit', e.target.checked)}
+                onChange={(e) =>
+                  handleInputChange('gitAutoCommit', e.target.checked)
+                }
                 disabled={!settings.gitEnabled}
               />
             </div>
@@ -152,13 +170,17 @@ const Settings = ({ visible, onClose, currentTheme, onThemeChange }) => {
               width="100%"
               label="Commit Message Template"
               value={settings.gitCommitMsgTemplate}
-              onChange={(e) => handleInputChange('gitCommitMsgTemplate', e.target.value)}
+              onChange={(e) =>
+                handleInputChange('gitCommitMsgTemplate', e.target.value)
+              }
               disabled={!settings.gitEnabled}
             />
           </div>
         </div>
       </Modal.Content>
-      <Modal.Action passive onClick={onClose}>Cancel</Modal.Action>
+      <Modal.Action passive onClick={onClose}>
+        Cancel
+      </Modal.Action>
       <Modal.Action onClick={handleSubmit}>Save Changes</Modal.Action>
     </Modal>
   );

frontend/src/hooks/useFileManagement.js

@@ -1,11 +1,16 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useToasts } from '@geist-ui/core';
-import { fetchFileList, fetchFileContent, saveFileContent, pullChanges } from '../services/api';
+import {
+  fetchFileList,
+  fetchFileContent,
+  saveFileContent,
+  pullChanges,
+} from '../services/api';
 
 const DEFAULT_FILE = {
   name: 'New File.md',
   path: 'New File.md',
-  content: '# Welcome to NovaMD\n\nStart editing here!'
+  content: '# Welcome to NovaMD\n\nStart editing here!',
 };
 
 const useFileManagement = (gitEnabled = false) => {
@@ -35,11 +40,17 @@ const useFileManagement = (gitEnabled = false) => {
     if (gitEnabled) {
       try {
         await pullChanges();
-        setToast({ text: 'Latest changes pulled successfully', type: 'success' });
+        setToast({
+          text: 'Latest changes pulled successfully',
+          type: 'success',
+        });
         await loadFileList(); // Reload file list after pulling changes
       } catch (error) {
         console.error('Failed to pull latest changes:', error);
-        setToast({ text: 'Failed to pull latest changes: ' + error.message, type: 'error' });
+        setToast({
+          text: 'Failed to pull latest changes: ' + error.message,
+          type: 'error',
+        });
       }
     }
   }, [gitEnabled, loadFileList, setToast]);
@@ -58,7 +69,9 @@ const useFileManagement = (gitEnabled = false) => {
 
   const handleFileSelect = async (filePath) => {
     if (hasUnsavedChanges) {
-      const confirmSwitch = window.confirm('You have unsaved changes. Are you sure you want to switch files?');
+      const confirmSwitch = window.confirm(
+        'You have unsaved changes. Are you sure you want to switch files?'
+      );
       if (!confirmSwitch) return;
     }
 
@@ -80,7 +93,8 @@ const useFileManagement = (gitEnabled = false) => {
     setHasUnsavedChanges(true);
   };
 
-  const handleSave = useCallback(async (filePath, fileContent) => {
+  const handleSave = useCallback(
+    async (filePath, fileContent) => {
       try {
         await saveFileContent(filePath, fileContent);
         setToast({ text: 'File saved successfully', type: 'success' });
@@ -91,9 +105,14 @@ const useFileManagement = (gitEnabled = false) => {
         }
       } catch (error) {
         console.error('Error saving file:', error);
-      setToast({ text: 'Failed to save file. Please try again.', type: 'error' });
+        setToast({
+          text: 'Failed to save file. Please try again.',
+          type: 'error',
+        });
       }
-  }, [setToast, isNewFile, loadFileList]);
+    },
+    [setToast, isNewFile, loadFileList]
+  );
 
   return {
     content,

frontend/src/index.js

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
-import ReactDOM from "react-dom/client";
+import ReactDOM from 'react-dom/client';
-import App from "./App";
+import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />

frontend/src/services/api.js

@@ -40,9 +40,9 @@ export const saveFileContent = async (filePath, content) => {
   }
 
   return await response.text();
-  };
+};
 
-  export const deleteFile = async (filePath) => {
+export const deleteFile = async (filePath) => {
   try {
     const response = await fetch(`${API_BASE_URL}/files/${filePath}`, {
       method: 'DELETE',
@@ -55,9 +55,9 @@ export const saveFileContent = async (filePath, content) => {
     console.error('Error deleting file:', error);
     throw error;
   }
-  };
+};
 
-  export const fetchUserSettings = async (userId) => {
+export const fetchUserSettings = async (userId) => {
   try {
     const response = await fetch(`${API_BASE_URL}/settings?userId=${userId}`);
     if (!response.ok) {
@@ -82,7 +82,9 @@ export const saveUserSettings = async (settings) => {
 
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
-            throw new Error(errorData?.message || `HTTP error! status: ${response.status}`);
+      throw new Error(
+        errorData?.message || `HTTP error! status: ${response.status}`
+      );
     }
 
     return await response.json();
@@ -105,9 +107,9 @@ export const pullChanges = async () => {
     console.error('Error pulling changes:', error);
     throw error;
   }
-  };
+};
 
-  export const commitAndPush = async (message) => {
+export const commitAndPush = async (message) => {
   try {
     const response = await fetch(`${API_BASE_URL}/git/commit`, {
       method: 'POST',
@@ -124,4 +126,4 @@ export const pullChanges = async () => {
     console.error('Error committing and pushing changes:', error);
     throw error;
   }
-  };
+};