feat: public note page

src/App.jsx

@@ -6,6 +6,8 @@ import Save from "./pages/save-local";
 import Publish from "./pages/publish";
 import Note from "./pages/note";
 import Notes from "./pages/notes";
+import PubNote from "./pages/pubNote";
+import PubError from "./pages/pubError";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -24,6 +26,8 @@ function App() {
           <Route path="/notes/save-local" element={<Save />} />
           <Route path="/notes/publish" element={<Publish />} />
           <Route path="/notes/:id" element={<Note />} />
+          <Route path="/pubNotes/:id" element={<PubNote />} />
+          <Route path="/pubError" element={<PubError />} />
           <Route
             path="/about"
             element={<div className="col-span-4">О сервисе</div>}

src/components/notePlaceholder.jsx

@@ -1,14 +0,0 @@
-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/note.jsx

@@ -1,5 +1,4 @@
 import ReactMarkdown from "react-markdown";
-import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import printDate from "../components/utils";
 import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
@@ -7,11 +6,8 @@ import { Button, IconWithButton } from "../components/button";
 
 function Note() {
   let params = useParams();
-  const [note, setNote] = useState(false);
 
-  useEffect(() => {
+  let note = localStorage.getObj("Notes")[params.id];
-    setNote(localStorage.getObj("Notes")[params.id]);
-  }, []);
 
   if (note) {
     return (

src/pages/pubError.jsx

@@ -0,0 +1,34 @@
+import printDate from "../components/utils";
+import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
+import { Button, IconWithButton } from "../components/button";
+
+function PubError() {
+  return (
+    <div className="">
+      <Button className="mb-4" href="/">
+        <IconWithButton
+          icon={
+            <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
+          }
+        >
+          Вернуться
+        </IconWithButton>
+      </Button>
+      <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">
+            Ошибка в публикации заметки
+          </h2>
+          <div className="justify-self-center lg:justify-self-end">
+            {printDate(Date.now())}
+          </div>
+        </div>
+        <div className="w-full md">
+          Заметка не была опубликована из-за неизвестной ошибки
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PubError;

src/pages/pubNote.jsx

@@ -0,0 +1,66 @@
+import ReactMarkdown from "react-markdown";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import printDate from "../components/utils";
+import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
+import { Button, IconWithButton } from "../components/button";
+
+function PubNote() {
+  let params = useParams();
+
+  let [note, setNote] = useState();
+
+  if (!note)
+    fetch(`/get-note/${params.id}`)
+      .then((data) => {
+        data
+          .json()
+          .then((data) => {
+            console.log("awdawd");
+            setNote(data);
+          })
+          .catch(() => {
+            setNote({
+              text: "Такой публичной заметки не сущуествует",
+              name: "Меня не существует",
+              time: Date.now(),
+            });
+          });
+      })
+      .catch(() => {
+        setNote({
+          text: "Такой публичной заметки не сущуествует",
+          name: "Меня не существует",
+          time: Date.now(),
+        });
+      });
+
+  return (
+    <div className="">
+      <Button className="mb-4" href="/">
+        <IconWithButton
+          icon={
+            <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
+          }
+        >
+          Писать
+        </IconWithButton>
+      </Button>
+      <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 || Date.now())}
+          </div>
+        </div>
+        <div className="w-full md">
+          <ReactMarkdown>{note?.text || "Загрузка..."}</ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PubNote;