(frontend) seperate note editor code from core logic

Author: enchant97

frontend/src/components/note.tsx

@@ -1,11 +1,13 @@
-import { Accessor, Component, Match, Show, Switch, createSignal } from "solid-js";
-import { Note as NoteDetails } from "../core/types";
+import { Accessor, Component, Match, Switch, createSignal, untrack } from "solid-js";
 import NoteViewPlain from "./note/view_plain";
-import NoteEdit from "./note/edit";
 import NoteViewRendered from "./note/view_rendered";
 import Icon from "./icon";
 import { copyToClipboard } from "../core/helpers";
 import { ToastType, useToast } from "../contexts/ToastProvider";
+import { SetStoreFunction, Store } from "solid-js/store";
+import Editor, { EditorState } from "./editor/editor";
+
+const AUTO_SAVE_TIMEOUT = 2400;
 
 export enum NoteMode {
   RENDERED = "rendered",
@@ -16,10 +18,12 @@ export enum NoteMode {
 type NoteProps = {
   mode: NoteMode,
   setMode: (mode: NoteMode) => any,
-  noteDetails: NoteDetails,
-  content: Accessor<string | undefined>,
+  content: Accessor<string>,
   setContent: (content: string) => any,
   isEditAllowed: boolean,
+  state: Store<EditorState>
+  setState: SetStoreFunction<EditorState>
+  onSave: (content: string) => any
 }
 
 const Note: Component<NoteProps> = (props) => {
@@ -86,16 +90,21 @@ const Note: Component<NoteProps> = (props) => {
           </label>
         </div>
       </div>
-      <Show when={props.content()}>
-        {content => <Switch fallback={<NoteViewRendered content={content} />}>
-          <Match when={props.mode === NoteMode.PLAIN}>
-            <NoteViewPlain content={content} />
-          </Match>
-          <Match when={props.mode === NoteMode.EDIT}>
-            <NoteEdit note={props.noteDetails} content={content} onChange={props.setContent} isFullscreen={isFullscreen} />
-          </Match>
-        </Switch>}
-      </Show>
+      <Switch fallback={<NoteViewRendered content={props.content} />}>
+        <Match when={props.mode === NoteMode.PLAIN}>
+          <NoteViewPlain content={props.content} />
+        </Match>
+        <Match when={props.mode === NoteMode.EDIT}>
+          <Editor
+            content={untrack(props.content)}
+            autoSaveTimeout={AUTO_SAVE_TIMEOUT}
+            onSave={props.onSave}
+            state={props.state}
+            setState={props.setState}
+            isFullscreen={isFullscreen}
+          />
+        </Match>
+      </Switch>
     </div>
   )
 }

frontend/src/components/note/edit.tsx

@@ -19,6 +19,8 @@ import StorageHandler from '../../core/storage';
 import AssetsModal from '../../components/modals/assets';
 import { StringSource, copyToClipboard, download } from '../../core/helpers';
 import PrintNoteModal from '../../components/modals/print_note';
+import { createStore } from 'solid-js/store';
+import { EditorState } from '../../components/editor/editor';
 
 const Shelf: Component = () => {
   const params = useParams()
@@ -37,6 +39,11 @@ const Shelf: Component = () => {
     return stored
   }
 
+  const [state, setState] = createStore<EditorState>({
+    saving: false,
+    unsaved: false,
+  })
+
   const slugParts: () => Breadcrumb = () => {
     return {
       username: params.username,
@@ -187,6 +194,17 @@ const Shelf: Component = () => {
     })
   }
 
+  const saveNote = async (noteId: string, content: string) => {
+    setState({ saving: true })
+    let result = await api().updateNoteContent(noteId, content)
+    setState({ saving: false })
+    if (result instanceof ApiError) pushToast(apiErrorIntoToast(result, "saving note"))
+    else {
+      setState({ unsaved: false })
+      setNoteContent(content)
+    }
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <div class="flex gap-4 flex-col sm:flex-row">
@@ -298,10 +316,12 @@ const Shelf: Component = () => {
               if (mode === NoteMode.RENDERED) { setNoteModeSetting(null) }
               else { setNoteModeSetting(mode) }
             }}
-            noteDetails={note()}
-            content={noteContent}
+            content={() => noteContent() || ""}
             setContent={setNoteContent}
             isEditAllowed={allowNoteCreate() || false}
+            state={state}
+            setState={setState}
+            onSave={(content) => saveNote(note().id, content)}
           />}
         </Show>
       </Show>