README.md

@@ -26,7 +26,6 @@ Running on: <https://anopaper.artegoser.ru/>
 ## Features
 
 - Save notes locally
-- Edit local notes
 - Publish one-time notes (when read, the note is deleted from the server and saved locally)
 - Use OpenAI API to complete notes (with your own api key)
 - Collaborate with other users on notes

changelog.md

@@ -17,8 +17,8 @@
 
 # Anopaper v1.1.0 (coming)
 
-- [x] Local notes editing (0a0f0f950ae95afb78d3fe71815b351f77f01eb9)
-- [x] Publish local notes (3963e435e8faca9b93b2e481ac799d78ed863f8c)
+- [ ] Local notes editing
+- [ ] Publish local notes
 - [x] Migration notes storage to mongodb (#3)
 - [ ] Settings for publish notes, such as: delete after reading, number of reads before deleting, adding your own data (name, picture, status in the settings) to the note.
 - [ ] Api for upload photos

src/components/note.jsx

@@ -16,7 +16,7 @@
  */
 
 import RenderMarkdown from "../components/markdown";
-import { timestamp2text } from "./utils";
+import { printDate } from "./utils";
 
 function Note({ note }) {
   return (
@@ -26,7 +26,7 @@ function Note({ note }) {
           {note.name}
         </h2>
         <div className="justify-self-center lg:justify-self-end">
-          {`${timestamp2text(note.time)} ${
+          {`${printDate(note.time)} ${
             note.pub ? `| ${locals.PublicNote}` : `| ${locals.LocalNote}`
           }`}
         </div>

src/components/openai.js

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

src/components/settingsInputs.jsx

@@ -14,12 +14,9 @@
  You should have received a copy of the GNU General Public License
  along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
-/* eslint-disable react-refresh/only-export-components */
+
 import { CheckBox } from "./checkbox";
 import { inputStyle, settingsAddInput } from "./styles";
-import { ButtonWithIcon } from "./button";
-import { Complete } from "../components/openai";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
 
 function SettingsCheckBox({ label, title, className, settingName, onClick }) {
   return (
@@ -112,80 +109,10 @@ function SettingsSection({ name, children }) {
   );
 }
 
-function NoteNameInput({ value, onChange, preview = false }) {
-  return (
-    <input
-      type="text"
-      className={`mb-2 md:w-1/6 w-full ${inputStyle} ${
-        preview ? "hidden" : ""
-      }`}
-      placeholder={locals.NoteName}
-      maxLength={64}
-      defaultValue={value}
-      onChange={onChange}
-    />
-  );
-}
-
-function NoteTextArea({ value, onChange, preview = false }) {
-  return (
-    <textarea
-      className={`
-    ${inputStyle}
-    w-full
-    ${preview ? "hidden" : ""}
-  `}
-      rows="10"
-      placeholder={locals.NotePlaceholder}
-      maxLength={5000}
-      onChange={onChange}
-      defaultValue={value}
-      id="noteTextArea"
-    ></textarea>
-  );
-}
-
-function NotesAdditionalSettings({
-  noteText = localStorage.getItem("NoteText"),
-  onClick,
-}) {
-  return (
-    <>
-      {settings.additionalFeatures && (
-        <div className="justify-self-start lg:justify-self-start">
-          <SettingsSection name={locals.AdditionalFeatures}>
-            {!!settings.openAiKey && (
-              <ButtonWithIcon
-                icon={DocumentTextIcon}
-                text={locals.AIComplete}
-                className="m-1"
-                w="w-full"
-                onClick={async () => {
-                  let text = await Complete(noteText);
-                  document.getElementById("noteTextArea").value = text;
-
-                  onClick(text);
-                }}
-              />
-            )}
-            <SettingsCheckBox
-              label={locals.CollabEdit}
-              settingName="CollabEdit"
-            />
-          </SettingsSection>
-        </div>
-      )}
-    </>
-  );
-}
-
 export {
   SettingsCheckBox,
   SettingsTextInput,
   SettingsSelectInput,
   SettingsSection,
   setSetting,
-  NoteNameInput,
-  NoteTextArea,
-  NotesAdditionalSettings,
 };

src/components/utils.js

@@ -17,7 +17,7 @@
 
 import { Locales } from "../localisation/main";
 
-function timestamp2text(time) {
+function printDate(time) {
   time = new Date(time);
   return time.toLocaleString(settings.language);
 }
@@ -48,4 +48,4 @@ async function getNetLocale(lang, fileName) {
   return (await (await fetch(`localisation/${lang}/${fileName}`)).text()) || "";
 }
 
-export { timestamp2text, reRenderPage, localesProcess, getNetLocale };
+export { printDate, reRenderPage, localesProcess, getNetLocale };

src/localisation/en.js

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

src/localisation/ru.js

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

src/pages/create.jsx

@@ -16,11 +16,14 @@
  */
 
 import { ButtonWithIcon } from "../components/button";
-import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDoubleRightIcon,
+  DocumentTextIcon,
+} from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
 import RenderMarkdown from "../components/markdown";
-import { timestamp2text } from "../components/utils";
+import { printDate } from "../components/utils";
 import rehypeRemark from "rehype-remark/lib";
 import ContentEditable from "react-contenteditable";
 import ReactDOMServer from "react-dom/server";
@@ -30,11 +33,11 @@ import remarkStringify from "remark-stringify";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import {
-  NoteNameInput,
-  NoteTextArea,
-  NotesAdditionalSettings,
   SettingsCheckBox,
+  SettingsSection,
 } from "../components/settingsInputs";
+import { inputStyle } from "../components/styles";
+import { Complete } from "../components/openai";
 
 function nameUpdate(val, force) {
   if (Date.now() - window.lastSocketUpdate > window.socketTimeout || force) {
@@ -124,7 +127,13 @@ function CreateNote() {
         />
       </div>
 
-      <NoteNameInput
+      <input
+        type="text"
+        className={`mb-2 md:w-1/6 w-full ${inputStyle} ${
+          preview ? "hidden" : ""
+        }`}
+        placeholder={locals.NoteName}
+        maxLength={64}
         value={localStorage.getItem("NoteName") || ""}
         onChange={(e) => {
           setName(e.target.value);
@@ -137,11 +146,16 @@ function CreateNote() {
             }, window.socketTimeout);
           }
         }}
-        preview={preview}
       />
-
-      <NoteTextArea
-        value={localStorage.getItem("NoteText") || ""}
+      <textarea
+        className={`
+          ${inputStyle}
+          w-full
+          ${preview ? "hidden" : ""}
+        `}
+        rows="10"
+        placeholder={locals.NotePlaceholder}
+        maxLength={5000}
         onChange={(e) => {
           setText(e.target.value);
           localStorage.setItem("NoteText", e.target.value);
@@ -153,8 +167,8 @@ function CreateNote() {
             }, window.socketTimeout);
           }
         }}
-        preview={preview}
-      />
+        value={localStorage.getItem("NoteText") || ""}
+      ></textarea>
 
       {preview && (
         <div className="grid grid-cols-1 lg:grid-cols-2">
@@ -162,7 +176,7 @@ function CreateNote() {
             {name}
           </h2>
           <div className="justify-self-center lg:justify-self-end">
-            {timestamp2text(Date.now())}
+            {printDate(Date.now())}
           </div>
         </div>
       )}
@@ -199,16 +213,27 @@ function CreateNote() {
           />
         </div>
 
-        <NotesAdditionalSettings
-          onClick={(text) => {
-            localStorage.setItem("NoteText", text);
-            setText(text);
-
-            if (settings.CollabEdit === true) {
-              textUpdate(text, true);
-            }
-          }}
-        />
+        {settings.additionalFeatures && (
+          <div className="justify-self-start lg:justify-self-start">
+            <SettingsSection name={locals.AdditionalFeatures}>
+              {!!settings.openAiKey && (
+                <ButtonWithIcon
+                  icon={DocumentTextIcon}
+                  text={locals.AIComplete}
+                  className="m-1"
+                  w="w-full"
+                  onClick={() => {
+                    Complete(setText, textUpdate);
+                  }}
+                />
+              )}
+              <SettingsCheckBox
+                label={locals.CollabEdit}
+                settingName="CollabEdit"
+              />
+            </SettingsSection>
+          </div>
+        )}
       </div>
     </div>
   );

src/pages/note.jsx

@@ -16,30 +16,14 @@
  */
 
 import { useParams } from "react-router-dom";
-import {
-  ChevronDoubleLeftIcon,
-  ChevronDoubleRightIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { ChevronDoubleLeftIcon, 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 notes = localStorage.getObj("Notes");
-  let note = notes[params.id];
-
-  let [edit, setEdit] = useState(false);
-  let [text, setText] = useState(note.text);
-  let [name, setName] = useState(note.name);
+  let note = localStorage.getObj("Notes")[params.id];
 
   return (
     <div className="">
@@ -50,71 +34,23 @@ function NotePage() {
         text={locals.Notes}
       />
 
-      {note ? (
-        edit ? (
-          <>
-            <NoteNameInput
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-            <NoteTextArea
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-            />
-            <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
-              <NotesAdditionalSettings
-                noteText={text}
-                onClick={(text) => {
-                  setText(text);
-                }}
-              />
-            </div>
-          </>
-        ) : (
-          <Note note={note} />
-        )
-      ) : (
-        <div>{locals.NoteNotExists}</div>
-      )}
+      {note ? <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={edit ? locals.Save : locals.Edit}
-              icon={PencilIcon}
+              href="/notes"
+              text={locals.Delete}
+              icon={TrashIcon}
               onClick={() => {
-                if (edit) {
-                  notes[params.id].name = name;
-                  notes[params.id].text = text;
+                let notesObj = localStorage.getObj("Notes");
 
-                  localStorage.setObj("Notes", notes);
-                }
+                delete notesObj[params.id];
 
-                setEdit(!edit);
+                localStorage.setObj("Notes", notesObj);
               }}
             />
-            <ButtonWithIcon
-              className="mt-4"
-              text={locals.Publish}
-              icon={ChevronDoubleRightIcon}
-              href={`/notes/publish?local_id=${params.id}`}
-            />
-            {!edit && (
-              <ButtonWithIcon
-                className="mt-4"
-                href="/notes"
-                text={locals.Delete}
-                icon={TrashIcon}
-                onClick={() => {
-                  let notesObj = localStorage.getObj("Notes");
-
-                  delete notesObj[params.id];
-
-                  localStorage.setObj("Notes", notesObj);
-                }}
-              />
-            )}
           </div>
         </div>
       )}

src/pages/notes.jsx

@@ -17,7 +17,7 @@
 
 import { ButtonWithIcon } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
-import { timestamp2text } from "../components/utils";
+import { printDate } from "../components/utils";
 import Fuse from "fuse.js";
 import { inputStyle } from "../components/styles";
 import { useState } from "react";
@@ -30,7 +30,7 @@ function Notes() {
     let notes = Object.entries(notesObj);
     for (let [id, note] of notes) {
       note.id = id;
-      note.textTime = timestamp2text(note.time);
+      note.textTime = printDate(note.time);
       notesObj[id] = note;
     }
     localStorage.setObj("Notes", notesObj);
@@ -82,7 +82,7 @@ function Notes() {
           {item.name}
         </div>
         <div className="grid grid-cols-1 lg:grid-cols-2 justify-self-center lg:justify-self-end">
-          <div className="text-center">{timestamp2text(item.time)}</div>
+          <div className="text-center">{printDate(item.time)}</div>
           <div className="">
             <ButtonWithIcon
               href={`/notes/${item.id}`}

src/pages/pubError.jsx

@@ -15,7 +15,7 @@
  along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { timestamp2text } from "../components/utils";
+import { printDate } from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
 import { ButtonWithIcon } from "../components/button";
 import { useSearchParams } from "react-router-dom";
@@ -39,7 +39,7 @@ function PubError() {
             {locals.PubError}
           </h2>
           <div className="justify-self-center lg:justify-self-end">
-            {timestamp2text(Date.now())}
+            {printDate(Date.now())}
           </div>
         </div>
         <div className="w-full md">{err ? err : locals.PubErrorMsg}</div>

src/pages/pubNote.jsx

@@ -18,7 +18,7 @@
 import RenderMarkdown from "../components/markdown";
 import { useState } from "react";
 import { Navigate, useParams } from "react-router-dom";
-import { timestamp2text } from "../components/utils";
+import { printDate } from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
 import { ButtonWithIcon } from "../components/button";
 
@@ -73,7 +73,7 @@ function PubNote() {
                 {note.name || "Загрузка..."}
               </h2>
               <div className="justify-self-center lg:justify-self-end">
-                {timestamp2text(note.time || Date.now())}
+                {printDate(note.time || Date.now())}
               </div>
             </div>
             <div className="w-full md break-words">

src/pages/publish.jsx

@@ -17,63 +17,54 @@
 
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { useSearchParams } from "react-router-dom";
 
 function Publish() {
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
+  let done = false;
 
   useEffect(() => {
-    let err = false;
+    if (!done) {
+      done = true;
 
-    let note;
-
-    if (searchParams.get("local_id")) {
-      let localNote =
-        localStorage.getObj("Notes")[searchParams.get("local_id")];
-      note = {
-        name: localNote.name,
-        text: localNote.text,
-      };
-    } else {
-      note = {
+      let err = false;
+      const note = {
         name: localStorage.getItem("NoteName"),
         text: localStorage.getItem("NoteText"),
       };
-    }
 
-    if (!note.name) {
-      err = locals.PubErrorMsgNoName;
-    }
-    if (!note.text) {
-      err = locals.PubErrorMsgNoText;
-    }
+      if (!note.name) {
+        err = locals.PubErrorMsgNoName;
+      }
+      if (!note.text) {
+        err = locals.PubErrorMsgNoText;
+      }
 
-    fetch(`/publish`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json;charset=utf-8",
-      },
-      body: JSON.stringify(note),
-    })
-      .then((data) => {
-        data
-          .json()
-          .then((data) => {
-            localStorage.removeItem("NoteName");
-            localStorage.removeItem("NoteText");
-            navigate(`/pubNotesSafe/${data.id}`, { replace: true });
-          })
-          .catch(() => {
-            if (err == false) {
-              navigate(`/pubError`, { replace: true });
-            } else navigate(`/pubError?err=${err}`, { replace: true });
-          });
+      fetch(`/publish`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json;charset=utf-8",
+        },
+        body: JSON.stringify(note),
       })
-      .catch(() => {
-        navigate(`/pubError`, { replace: true });
-      });
-  });
+        .then((data) => {
+          data
+            .json()
+            .then((data) => {
+              localStorage.removeItem("NoteName");
+              localStorage.removeItem("NoteText");
+              navigate(`/pubNotesSafe/${data.id}`, { replace: true });
+            })
+            .catch(() => {
+              if (err == false) {
+                navigate(`/pubError`, { replace: true });
+              } else navigate(`/pubError?err=${err}`, { replace: true });
+            });
+        })
+        .catch(() => {
+          navigate(`/pubError`, { replace: true });
+        });
+    }
+  }, []);
 
   return <div />;
 }

src/pages/save-local.jsx

@@ -16,7 +16,7 @@
  */
 
 import { Navigate } from "react-router-dom";
-import { timestamp2text } from "../components/utils";
+import { printDate } from "../components/utils";
 
 function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
@@ -44,7 +44,7 @@ function Save() {
     name,
     text,
     time,
-    textTime: timestamp2text(time),
+    textTime: printDate(time),
     pubTime,
     pub: !!pubTime,
   };