feat: safe note view, public note deletion

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --emptyOutDir",
     "preview": "vite preview"
   },
   "dependencies": {

src/App.jsx

@@ -8,6 +8,7 @@ import Note from "./pages/note";
 import Notes from "./pages/notes";
 import PubNote from "./pages/pubNote";
 import PubError from "./pages/pubError";
+import PubNoteSafe from "./pages/pubNoteSafe";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -27,6 +28,7 @@ function App() {
           <Route path="/notes/publish" element={<Publish />} />
           <Route path="/notes/:id" element={<Note />} />
           <Route path="/pubNotes/:id" element={<PubNote />} />
+          <Route path="/pubNotesSafe/:id" element={<PubNoteSafe />} />
           <Route path="/pubError" element={<PubError />} />
           <Route
             path="/about"

src/components/copytocb.jsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { ClipboardIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { useEffect } from "react";
+
+function CopyToClipboard(props) {
+  let [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    console.log(copied);
+    if (copied === true) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    }
+  });
+
+  return (
+    <div
+      className="grid grid-cols-4 border rounded-lg p-2 border-blue-300 bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+      onClick={() => {
+        navigator.clipboard.writeText(props.text);
+        setCopied(true);
+      }}
+    >
+      <div className="col-span-3 truncate">{props.text}</div>
+      <div className="justify-self-center lg:justify-self-end">
+        {copied === true ? (
+          <CheckIcon className="transform translate-z-0 h-7 w-7" />
+        ) : (
+          <ClipboardIcon className="transform translate-z-0 h-7 w-7" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { CopyToClipboard };

src/pages/pubNote.jsx

@@ -11,7 +11,7 @@ function PubNote() {
   let [note, setNote] = useState();
 
   if (!note)
-    fetch(`/get-note/${params.id}`)
+    fetch(`/get-note/del/${params.id}`)
       .then((data) => {
         data
           .json()

src/pages/pubNoteSafe.jsx

@@ -0,0 +1,84 @@
+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";
+import { CopyToClipboard } from "../components/copytocb";
+
+function PubNoteSafe() {
+  let params = useParams();
+
+  let [note, setNote] = useState();
+
+  if (!note)
+    fetch(`/get-note/safe/${params.id}`)
+      .then((data) => {
+        data
+          .json()
+          .then((data) => {
+            data.code = 1;
+            setNote(data);
+          })
+          .catch(() => {
+            setNote({
+              text: "Такой публичной заметки не сущуествует",
+              name: "Меня не существует",
+              time: Date.now(),
+              code: 0,
+            });
+          });
+      })
+      .catch(() => {
+        setNote({
+          text: "Такой публичной заметки не сущуествует",
+          name: "Меня не существует",
+          time: Date.now(),
+          code: 0,
+        });
+      });
+
+  return (
+    <div className="">
+      <Button className="mb-4" href="/">
+        <IconWithButton
+          icon={
+            <ChevronDoubleLeftIcon className="transform translate-z-0 h-7 w-7" />
+          }
+        >
+          Писать
+        </IconWithButton>
+      </Button>
+
+      {note?.code === 1 && (
+        <div className="p-4 mb-2">
+          <div className="grid grid-cols-1 lg:grid-cols-2">
+            <h2 className="font-medium text-center lg:text-left p-2">
+              Ссылка для отправки публичной заметки. При переходе на эту ссылку,
+              заметка исчезнет.
+            </h2>
+            <CopyToClipboard
+              text={`${window.location.origin}/pubNotes/${params.id}`}
+            ></CopyToClipboard>
+          </div>
+        </div>
+      )}
+
+      <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 break-words">
+          <ReactMarkdown>{note?.text || "Загрузка..."}</ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PubNoteSafe;

src/pages/publish.jsx

@@ -27,7 +27,7 @@ function Publish() {
             .then((data) => {
               localStorage.removeItem("NoteName");
               localStorage.removeItem("NoteText");
-              navigate(`/pubNotes/${data.id}`, { replace: true });
+              navigate(`/pubNotesSafe/${data.id}`, { replace: true });
             })
             .catch(() => {
               navigate(`/pubError`, { replace: true });