offline working mode finished starting app version two

Author: Abolfazl-ghodrati-k

components/Note.tsx

@@ -10,10 +10,12 @@ import { v4 as uuid } from "uuid";
 type Props = {
   note?: Note;
   id?: string;
+  redirect: string;
 };
 
-function Note({ note, id }: Props) {
+function Note({ note, id, redirect }: Props) {
   const [showMenu, setshowMenu] = useState(false);
+  console.log(redirect);
 
   const [Id, setId] = useState(() => {
     if (typeof window !== "undefined") {
@@ -26,7 +28,12 @@ function Note({ note, id }: Props) {
 
   const [StoredNote, setNote] = useState(() => {
     if (typeof window !== "undefined") {
-      const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
+      var Notes = [] as Note[];
+      if (redirect == "/recycle") {
+        Notes = JSON.parse(localStorage.getItem("DELETED_NOTES")!) as Note[];
+      } else {
+        Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
+      }
       if (id) {
         return Notes.find((note) => note.id == id);
       } else {
@@ -37,7 +44,12 @@ function Note({ note, id }: Props) {
 
   const [title, settitle] = useState(() => {
     if (typeof window !== "undefined") {
-      const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
+      var Notes = [] as Note[];
+      if (redirect == "/recycle") {
+        Notes = JSON.parse(localStorage.getItem("DELETED_NOTES")!) as Note[];
+      } else {
+        Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
+      }
       if (Notes) {
         if (id) {
           return Notes.find((note) => note.id == id)?.title;
@@ -126,8 +138,8 @@ function Note({ note, id }: Props) {
           <div
             style={{ cursor: "pointer" }}
             onClick={() => {
-              localStorage.removeItem("CURRENTID")
-              Router.push("/home");
+              localStorage.removeItem("CURRENTID");
+              Router.push(`${redirect}`);
             }}
           >
             <Image
@@ -164,7 +176,7 @@ function Note({ note, id }: Props) {
           setshowMenu(false);
         }}
       >
-        <TipTap id={id} Id={Id} setId={setId} markdown={StoredNote?.text}/>
+        <TipTap id={id} Id={Id} setId={setId} markdown={StoredNote?.text} />
       </div>
     </div>
   );

components/SideBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./Components.module.css";
 import SideBarLink from "./SideBarLink";
 import Image from "next/image";
@@ -8,6 +8,18 @@ type Props = {
 };
 
 function SideBar({ showSidebar }: Props) {
+
+  const [storedNotesCount, setstoredNotesCount] = useState("")
+  const [deletedNotesCount, setdeletedNotesCount] = useState("")
+
+  useEffect(() => {
+    const Notes = JSON.parse(localStorage.getItem("NOTES")!)
+    const deletedNotes = JSON.parse(localStorage.getItem("DELETED_NOTES")!)
+
+    setstoredNotesCount(Notes?.length)
+    setdeletedNotesCount(deletedNotes?.length)
+  },[])
+
   return (
     <div
       className={
@@ -20,8 +32,8 @@ function SideBar({ showSidebar }: Props) {
         <div className={styles.sidebar_profile}>
           <Image src="/Images/Icons/person.png" width={30} height={30} alt="person"/>
         </div>
-        <SideBarLink path="/home" showSidebar={showSidebar} value="All notes" icon="/Images/Icons/notes.png" count="11" />
-        <SideBarLink path="/recycle" showSidebar={showSidebar} value="Recycle bin" icon="/Images/Icons/recycle.png" count="0" />
+        <SideBarLink path="/home" showSidebar={showSidebar} value="All notes" icon="/Images/Icons/notes.png" count={storedNotesCount} />
+        <SideBarLink path="/recycle" showSidebar={showSidebar} value="Recycle bin" icon="/Images/Icons/recycle.png" count={deletedNotesCount} />
       </div>
     </div>
   );

components/SideBarLink.tsx

@@ -20,6 +20,7 @@ function SideBarLink({ icon, value, count, showSidebar, path }: Props) {
           ? styles.sidebar_link_container_opened
           : styles.sidebar_link_container_closed
       }
+      style={{cursor:"pointer"}}
       onClick={() => {
         Router.push(path);
       }}

pages/home/Notes.tsx

@@ -23,7 +23,12 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
   const [selectedNotes, setselectedNotes] = useState<Note[]>([]);
 
   const ShowNote = (id: string) => {
-    Router.push(`/notes/${id}`);
+    Router.push({
+      pathname: `/notes/${id}`,
+      query: {
+        redirect: Router.asPath
+      }
+    });
   };
 
   function show() {
@@ -50,7 +55,11 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
       ({ id: id1 }) => !selectedNotes.some(({ id: id2 }) => id1 == id2)
     );
     setNotes(updatedNotes);
-    localStorage.setItem("NOTES", JSON.stringify(updatedNotes));
+    if (title == "Recycle bin") {
+      localStorage.setItem("DELETED_NOTES", JSON.stringify(updatedNotes))
+    } else {
+      localStorage.setItem("NOTES", JSON.stringify(updatedNotes));
+    }
   }
 
   function deleteNotes() {
@@ -72,6 +81,23 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
     }
   }
 
+  function restoreNotes() {
+    setonDelete(false);
+    const StoredNotes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
+    if (selectedNotes.length == 0) {
+      return;
+    }
+    if (StoredNotes && StoredNotes.length > 0) {
+      removeFromNotes();
+      var StoredNotesCopy = [...StoredNotes, ...selectedNotes];
+      localStorage.setItem("NOTES", JSON.stringify(StoredNotesCopy));
+    } else {
+      removeFromNotes();
+      var restoredNotes = [...selectedNotes];
+      localStorage.setItem("NOTES", JSON.stringify(restoredNotes));
+    }
+  }
+
   return (
     <div
       className={
@@ -279,9 +305,9 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
         {title == "Recycle bin" && (
           <button
             className={styles.delete_btn}
-            style={{backgroundColor: "greenyellow"}}
+            style={{ backgroundColor: "greenyellow" }}
             onClick={() => {
-              deleteNotes();
+              restoreNotes();
             }}
           >
             <MdOutlineRestoreFromTrash size={30} color="black" />

pages/newNote/index.tsx

@@ -3,7 +3,7 @@ import Note from "../../components/Note";
 
 function index() {
   return (
-    <Note />
+    <Note redirect="/home" />
   );
 }
 

pages/notes/[id].tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 function index() {
   const router = useRouter()
 
-  return <Note id={router.query.id as string}/>;
+  return <Note id={router.query.id as string} redirect={router.query.redirect as string}/>;
 }
 
 export default index;