mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
feat: safe note view, public note deletion
This commit is contained in:
parent
90914ea9f0
commit
a286f4a7df
6 changed files with 126 additions and 3 deletions
|
@ -5,7 +5,7 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build": "vite build --emptyOutDir",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -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"
|
||||
|
|
37
src/components/copytocb.jsx
Normal file
37
src/components/copytocb.jsx
Normal 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 };
|
|
@ -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
84
src/pages/pubNoteSafe.jsx
Normal 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;
|
|
@ -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 });
|
||||
|
|
Loading…
Reference in a new issue