artegoser/AnoPaper
1
2
Fork 0
mirror of https://github.com/artegoser/AnoPaper.git synced 2024-11-24 21:06:21 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: public note page

Browse source
This commit is contained in:
Artemy 2022-11-01 20:29:32 +03:00
parent 0f35ab4515
commit 80eec14ecf
5 changed files with 105 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.jsx
View file

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

14
src/components/notePlaceholder.jsx
View file

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

6
src/pages/note.jsx
View file

@ -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(() => {
setNote(localStorage.getObj("Notes")[params.id]);
}, []);
let note = localStorage.getObj("Notes")[params.id];
if (note) {
return (

34
src/pages/pubError.jsx Normal file
View file

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

66
src/pages/pubNote.jsx Normal file
View file

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