From 5d3c274a81bf18382e7a6e5d2a4416f6a037ee75 Mon Sep 17 00:00:00 2001
From: Artemy <artegoser@gmail.com>
Date: Thu, 20 Oct 2022 21:37:09 +0300
Subject: [PATCH] feat: allNotes

---
 src/App.jsx             |  6 ++---
 src/components/utils.js | 16 ++++++++++++++
 src/pages/note.jsx      | 49 ++++++++++++++++++++---------------------
 src/pages/notes.jsx     | 41 ++++++++++++++++++++++++++++++++++
 4 files changed, 83 insertions(+), 29 deletions(-)
 create mode 100644 src/components/utils.js
 create mode 100644 src/pages/notes.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 9573a2b..e598937 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import Menu from "./components/menu";
 import CreateNote from "./pages/create";
 import Save from "./pages/save-local";
 import Note from "./pages/note";
+import Notes from "./pages/notes";
 
 function App() {
   Storage.prototype.setObj = function (key, obj) {
@@ -24,10 +25,7 @@ function App() {
             path="/about"
             element={<div className="col-span-4">О сервисе</div>}
           />
-          <Route
-            path="/notes"
-            element={<div className="col-span-4">Заметки</div>}
-          />
+          <Route path="/notes" element={<Notes />} />
         </Routes>
       </div>
     </div>
diff --git a/src/components/utils.js b/src/components/utils.js
new file mode 100644
index 0000000..54da7e3
--- /dev/null
+++ b/src/components/utils.js
@@ -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;
diff --git a/src/pages/note.jsx b/src/pages/note.jsx
index 34284a4..125d81c 100644
--- a/src/pages/note.jsx
+++ b/src/pages/note.jsx
@@ -2,21 +2,9 @@ import ReactMarkdown from "react-markdown";
 import NotePlaceholder from "../components/notePlaceholder";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-
-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;
-}
+import printDate from "../components/utils";
+import { ChevronDoubleLeftIcon } from "@heroicons/react/24/outline";
+import { Button, IconWithButton } from "../components/button";
 
 function Note() {
   let params = useParams();
@@ -30,17 +18,28 @@ function Note() {
     console.log(note);
 
     return (
-      <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)}
+      <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="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)}
+            </div>
+          </div>
+          <div className="w-full md">
+            <ReactMarkdown>{note.text}</ReactMarkdown>
           </div>
-        </div>
-        <div className="w-full md">
-          <ReactMarkdown>{note.text}</ReactMarkdown>
         </div>
       </div>
     );
diff --git a/src/pages/notes.jsx b/src/pages/notes.jsx
new file mode 100644
index 0000000..af38c59
--- /dev/null
+++ b/src/pages/notes.jsx
@@ -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;