feat: safe note view, public note deletion

This commit is contained in:
Artemy 2023-01-21 16:59:44 +03:00
parent 90914ea9f0
commit a286f4a7df
6 changed files with 126 additions and 3 deletions

View file

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

View file

@ -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"

View file

@ -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 };

View file

@ -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()

84
src/pages/pubNoteSafe.jsx Normal file
View file

@ -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;

View file

@ -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 });