feat: noteEditing

src/components/openai.js

@@ -17,10 +17,10 @@
 
 import { Configuration, OpenAIApi } from "openai";
 
-async function Complete(setText, textUpdate) {
+async function Complete(text) {
   document.body.style.cursor = "wait";
 
-  let initText = localStorage.getItem("NoteText");
+  let initText = text;
 
   const configuration = new Configuration({
     apiKey: settings.openAiKey,
@@ -37,16 +37,9 @@ async function Complete(setText, textUpdate) {
     logprobs: null,
   });
 
-  let totalText = initText + response.data.choices[0].text;
-
-  localStorage.setItem("NoteText", totalText);
-  setText(totalText);
-
-  if (settings.CollabEdit === true) {
-    textUpdate(totalText, true);
-  }
-
   document.body.style.cursor = "default";
+
+  return initText + response.data.choices[0].text;
 }
 
 export { Complete };

src/components/settingsInputs.jsx

@@ -112,7 +112,7 @@ function SettingsSection({ name, children }) {
   );
 }
 
-function NoteNameInput({ value, onChange, preview }) {
+function NoteNameInput({ value, onChange, preview = false }) {
   return (
     <input
       type="text"
@@ -121,13 +121,13 @@ function NoteNameInput({ value, onChange, preview }) {
       }`}
       placeholder={locals.NoteName}
       maxLength={64}
-      value={value}
+      defaultValue={value}
       onChange={onChange}
     />
   );
 }
 
-function NoteTextArea({ value, onChange, preview }) {
+function NoteTextArea({ value, onChange, preview = false }) {
   return (
     <textarea
       className={`
@@ -139,12 +139,15 @@ function NoteTextArea({ value, onChange, preview }) {
       placeholder={locals.NotePlaceholder}
       maxLength={5000}
       onChange={onChange}
-      value={value}
+      defaultValue={value}
     ></textarea>
   );
 }
 
-function NotesAdditionalSettings() {
+function NotesAdditionalSettings({
+  noteText = localStorage.getItem("NoteText"),
+  onClick,
+}) {
   return (
     <>
       {settings.additionalFeatures && (
@@ -157,7 +160,9 @@ function NotesAdditionalSettings() {
                 className="m-1"
                 w="w-full"
                 onClick={() => {
-                  Complete(setText, textUpdate);
+                  let text = Complete(noteText);
+
+                  onClick(text);
                 }}
               />
             )}

src/localisation/en.js

@@ -75,6 +75,7 @@ let en = {
   LocalNote: "Local",
   Menu: "Menu",
   SourceCode: "Source code",
+  Edit: "Edit",
 };
 
 export default en;

src/localisation/ru.js

@@ -77,6 +77,7 @@ let ru = {
   PublishNote: "Публичная",
   Menu: "Меню",
   SourceCode: "Исходный код",
+  Edit: "Изменить",
 };
 
 export default ru;

src/pages/create.jsx

@@ -199,7 +199,16 @@ function CreateNote() {
           />
         </div>
 
-        <NotesAdditionalSettings />
+        <NotesAdditionalSettings
+          onClick={(text) => {
+            localStorage.setItem("NoteText", text);
+            setText(text);
+
+            if (settings.CollabEdit === true) {
+              textUpdate(text, true);
+            }
+          }}
+        />
       </div>
     </div>
   );

src/pages/note.jsx

@@ -16,14 +16,27 @@
  */
 
 import { useParams } from "react-router-dom";
-import { ChevronDoubleLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDoubleLeftIcon,
+  PencilIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { ButtonWithIcon } from "../components/button";
 import Note from "../components/note";
+import { useState } from "react";
+import {
+  NoteNameInput,
+  NoteTextArea,
+  NotesAdditionalSettings,
+} from "../components/settingsInputs";
 
 function NotePage() {
   let params = useParams();
 
-  let note = localStorage.getObj("Notes")[params.id];
+  let notes = localStorage.getObj("Notes");
+  let note = notes[params.id];
+
+  let [edit, setEdit] = useState(false);
 
   return (
     <div className="">
@@ -34,10 +47,47 @@ function NotePage() {
         text={locals.Notes}
       />
 
-      {note ? <Note note={note} /> : <div>{locals.NoteNotExists}</div>}
+      {note ? (
+        edit ? (
+          <>
+            <NoteNameInput
+              value={note.name}
+              onChange={(e) => (note.name = e.target.value)}
+            />
+            <NoteTextArea
+              value={note.text}
+              onChange={(e) => (note.text = e.target.value)}
+            />
+
+            <NotesAdditionalSettings
+              noteText={note.text}
+              onClick={(text) => {
+                note.text = text;
+              }}
+            />
+          </>
+        ) : (
+          <Note note={note} />
+        )
+      ) : (
+        <div>{locals.NoteNotExists}</div>
+      )}
       {note && (
         <div className="grid grid-cols-1">
           <div className="justify-self-center lg:justify-self-end">
+            <ButtonWithIcon
+              className="mt-4"
+              text={locals.Edit}
+              icon={PencilIcon}
+              onClick={() => {
+                setEdit(!edit);
+
+                if (edit) {
+                  localStorage.setObj("Notes", notes);
+                }
+              }}
+            />
+            {!edit && (
               <ButtonWithIcon
                 className="mt-4"
                 href="/notes"
@@ -51,6 +101,7 @@ function NotePage() {
                   localStorage.setObj("Notes", notesObj);
                 }}
               />
+            )}
           </div>
         </div>
       )}