feat: local save notes

src/App.jsx

@@ -2,13 +2,15 @@ import "./App.css";
 import { Routes, Route } from "react-router-dom";
 import Menu from "./components/menu";
 import CreateNote from "./pages/create";
+import Save from "./pages/save-local";
+import Note from "./pages/note";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
     return this.setItem(key, JSON.stringify(obj));
   };
   Storage.prototype.getObj = function (key) {
-    return JSON.parse(this.getItem(key));
+    return JSON.parse(this.getItem(key)) || {};
   };
   return (
     <div className="grid grid-cols-4  lg:grid-cols-5  gap-10 text-black dark:text-white">
@@ -16,13 +18,15 @@ function App() {
       <div className="col-span-4 p-5 m-4 rounded-2xl">
         <Routes>
           <Route path="/" element={<CreateNote />} />
+          <Route path="/notes/save-local" element={<Save />} />
+          <Route path="/notes/:id" element={<Note />} />
           <Route
             path="/about"
             element={<div className="col-span-4">О сервисе</div>}
           />
           <Route
             path="/notes"
-            element={<div className="col-span-4">Заметки со всего мира</div>}
+            element={<div className="col-span-4">Заметки</div>}
           />
         </Routes>
       </div>

src/components/notePlaceholder.jsx

@@ -0,0 +1,14 @@
+function NotePlaceholder() {
+  return (
+    <div className="grid grid-cols-2 gap-4  w-full animate-pulse border border-blue-300 shadow rounded-lg p-4">
+      <div className="h-6 bg-slate-100 dark:bg-slate-700 rounded-lg col-span-2 sm:col-span-1 pl-2">
+        Название...
+      </div>
+      <div className="h-64 bg-slate-100 dark:bg-slate-700 rounded-lg col-span-2 pl-2">
+        Описание...
+      </div>
+    </div>
+  );
+}
+
+export default NotePlaceholder;

src/pages/create.jsx

@@ -1,4 +1,4 @@
-import { ButtonWithAction, IconWithButton } from "../components/button";
+import { Button, IconWithButton } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
@@ -29,7 +29,7 @@ function CreateNote() {
         type="text"
         className={`mb-2 md:w-1/6 w-full ${inputStyle}`}
         placeholder="Название заметки..."
-        value={localStorage.getItem("NoteName")}
+        value={localStorage.getItem("NoteName") || ""}
         onChange={(e) => {
           localStorage.setItem("NoteName", e.target.value);
           setName(e.target.value);
@@ -48,9 +48,8 @@ function CreateNote() {
           localStorage.setItem("NoteText", e.target.value);
           setText(e.target.value);
         }}
-      >
-        {localStorage.getItem("NoteText")}
-      </textarea>
+        value={localStorage.getItem("NoteText") || ""}
+      ></textarea>
 
       {preview && (
         <div className="w-full md">
@@ -70,7 +69,10 @@ function CreateNote() {
           checked={localStorage.getItem("private")}
         />
         <div className="justify-self-center lg:justify-self-end">
-          <ButtonWithAction className="m-5" onClick={""}>
+          <Button
+            className="m-5"
+            href={publicState ? "/notes/save-local" : "/notes/publish"}
+          >
             <IconWithButton
               reverse={true}
               icon={
@@ -79,7 +81,7 @@ function CreateNote() {
             >
               Отправить
             </IconWithButton>
-          </ButtonWithAction>
+          </Button>
         </div>
       </div>
     </div>

src/pages/note.jsx

@@ -0,0 +1,52 @@
+import ReactMarkdown from "react-markdown";
+import NotePlaceholder from "../components/notePlaceholder";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+function printDate(time) {
+  time = new Date(time);
+  function padStr(i) {
+    return i < 10 ? "0" + i : "" + i;
+  }
+
+  let dateStr = `${padStr(time.getHours())}:${padStr(
+    time.getMinutes()
+  )}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
+    1 + time.getMonth()
+  )}.${padStr(time.getFullYear())}`;
+
+  return dateStr;
+}
+
+function Note() {
+  let params = useParams();
+  const [note, setNote] = useState(false);
+
+  useEffect(() => {
+    setNote(localStorage.getObj("Notes")[params.id]);
+  }, []);
+
+  if (note) {
+    console.log(note);
+
+    return (
+      <div className="border border-blue-300 rounded-lg p-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2">
+          <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
+            {note.name}
+          </h2>
+          <div className="justify-self-center lg:justify-self-end">
+            {printDate(note.time)}
+          </div>
+        </div>
+        <div className="w-full md">
+          <ReactMarkdown>{note.text}</ReactMarkdown>
+        </div>
+      </div>
+    );
+  }
+
+  return <NotePlaceholder />;
+}
+
+export default Note;

src/pages/save-local.jsx

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import NotePlaceholder from "../components/notePlaceholder";
+
+function uuidv4() {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  );
+}
+
+function Save() {
+  const navigate = useNavigate();
+  let done = false;
+
+  useEffect(() => {
+    if (!done) {
+      done = true;
+      let id = uuidv4();
+
+      let notesObj = localStorage.getObj("Notes");
+
+      notesObj[`${id}`] = {
+        name: localStorage.getItem("NoteName"),
+        text: localStorage.getItem("NoteText"),
+        time: Date.now(),
+      };
+
+      localStorage.setObj("Notes", notesObj);
+
+      localStorage.removeItem("NoteName");
+      localStorage.removeItem("NoteText");
+
+      navigate(`/notes/${id}`);
+    }
+  }, []);
+
+  return <NotePlaceholder />;
+}
+
+export default Save;