feat: allNotes

This commit is contained in:
Artemy 2022-10-20 21:37:09 +03:00
parent 7e7b336d56
commit 5d3c274a81
4 changed files with 83 additions and 29 deletions

View file

@ -4,6 +4,7 @@ import Menu from "./components/menu";
import CreateNote from "./pages/create"; import CreateNote from "./pages/create";
import Save from "./pages/save-local"; import Save from "./pages/save-local";
import Note from "./pages/note"; import Note from "./pages/note";
import Notes from "./pages/notes";
function App() { function App() {
Storage.prototype.setObj = function (key, obj) { Storage.prototype.setObj = function (key, obj) {
@ -24,10 +25,7 @@ function App() {
path="/about" path="/about"
element={<div className="col-span-4">О сервисе</div>} element={<div className="col-span-4">О сервисе</div>}
/> />
<Route <Route path="/notes" element={<Notes />} />
path="/notes"
element={<div className="col-span-4">Заметки</div>}
/>
</Routes> </Routes>
</div> </div>
</div> </div>

16
src/components/utils.js Normal file
View file

@ -0,0 +1,16 @@
function printDate(time) {
time = new Date(time);
function padStr(i) {
return i < 10 ? "0" + i : "" + i;
}
let dateStr = `${padStr(time.getHours())}:${padStr(
time.getMinutes()
)}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
1 + time.getMonth()
)}.${padStr(time.getFullYear())}`;
return dateStr;
}
export default printDate;

View file

@ -2,21 +2,9 @@ import ReactMarkdown from "react-markdown";
import NotePlaceholder from "../components/notePlaceholder"; import NotePlaceholder from "../components/notePlaceholder";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import printDate from "../components/utils";
function printDate(time) { import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
time = new Date(time); import { Button, IconWithButton } from "../components/button";
function padStr(i) {
return i < 10 ? "0" + i : "" + i;
}
let dateStr = `${padStr(time.getHours())}:${padStr(
time.getMinutes()
)}:${padStr(time.getSeconds())} ${padStr(time.getDate())}.${padStr(
1 + time.getMonth()
)}.${padStr(time.getFullYear())}`;
return dateStr;
}
function Note() { function Note() {
let params = useParams(); let params = useParams();
@ -30,6 +18,16 @@ function Note() {
console.log(note); console.log(note);
return ( return (
<div className="">
<Button className="mb-4" href="/notes">
<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="border border-blue-300 rounded-lg p-4">
<div className="grid grid-cols-1 lg:grid-cols-2"> <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 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
@ -43,6 +41,7 @@ function Note() {
<ReactMarkdown>{note.text}</ReactMarkdown> <ReactMarkdown>{note.text}</ReactMarkdown>
</div> </div>
</div> </div>
</div>
); );
} }

41
src/pages/notes.jsx Normal file
View file

@ -0,0 +1,41 @@
import { Button, IconWithButton } from "../components/button";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import printDate from "../components/utils";
function Notes() {
return (
<div>
{Object.entries(localStorage.getObj("Notes"))
.sort((a, b) => {
return b[1].time - a[1].time;
})
.map((val) => {
console.log(val[1]);
return (
<div className="grid grid-cols-1 lg:grid-cols-2 border border-blue-300 rounded-lg m-2 p-2 justify-items-start">
<div className="font-medium leading-tight text-4xl mt-0 mb-2">
{val[1].name}
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 justify-self-center lg:justify-self-end">
<div className="text-center">{printDate(val[1].time)}</div>
<div className="">
<Button className="" href={`/notes/${val[0]}`}>
<IconWithButton
reverse={true}
icon={
<ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
}
>
Перейти
</IconWithButton>
</Button>
</div>
</div>
</div>
);
})}
</div>
);
}
export default Notes;