Version 1.0.0

Author: Abolfazl-ghodrati-k

components/Components.module.css

@@ -76,11 +76,20 @@
 
 .sidebar_profile {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   margin: 15px 5px 50px;
 }
 
+.sidebar_profile h2 {
+  color: orange;
+}
+
+.sidebar_profile div {
+  padding: 5px 10px;
+  border-radius: 15px;
+}
+
 .sidebar_link_container_closed {
   display: flex;
   justify-content: space-between;
@@ -121,4 +130,34 @@
   font-size: 0.8rem;
 }
 
+.control_pannel {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 5px;
+  padding: 15px;
+  font-size: 1rem;
+}
+
+.functions {
+  gap: 20px !important;
+}
+
+.functions {
+  font-size: 1.1rem !important;
+  background-color: transparent;
+  border-radius: 10px;
+  margin-top: 10px;
+  border: none;
+  outline: none;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  transition: all .5s ease-in-out;
+}
+
+.functions:hover {
+  background-color: brown;
+}
+
 /* Basic editor styles */

components/LoginForm.tsx

@@ -1,6 +1,8 @@
 import React, { FormEvent, useEffect } from "react";
 import Input from "./Input";
 import { ErrorTypo } from "../pages";
+import Router from "next/router";
+import { userService } from "../services/user-service";
 
 type Props = {
   mode: string;
@@ -19,6 +21,11 @@ type Props = {
 
 function LoginForm({ mode, onSubmit, errors, Login_props, seterrors }: Props) {
 
+  function enterAsGuest() {
+    userService.asGuest()
+    Router.push('/home')
+  }
+
   return (
     <form onSubmit={onSubmit}>
       <div className="form-block__input-wrapper">
@@ -75,9 +82,10 @@ function LoginForm({ mode, onSubmit, errors, Login_props, seterrors }: Props) {
       </button>
       {mode === "login" ? (
         <button
+          onClick={enterAsGuest}
           className="button button--secondary full-width"
           style={{ marginTop: "0.7rem", fontSize: ".8rem" }}
-          type="submit"
+          type="button"
         >
           Enter As Guest...
         </button>

components/Menubar.tsx

@@ -7,7 +7,7 @@ import { AiOutlineUnorderedList } from "react-icons/ai";
 import { BiUndo, BiRedo } from "react-icons/bi";
 
 type MenuProps = {
-  editor: Editor;
+  editor: Editor
 };
 
 const MenuBar = ({ editor }: MenuProps) => {

components/Note.tsx

@@ -8,7 +8,7 @@ import useStatus from "../hooks/useStatus";
 import { v4 as uuid } from "uuid";
 
 type Props = {
-  note?: Note;
+  note?: Note
   id?: string;
   redirect: string;
 };

components/NoteCard.tsx

@@ -9,7 +9,7 @@ import TextStyle from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import useIsToday from "../hooks/useIsToday";
 import BulletList from "@tiptap/extension-bullet-list";
-import ListItem from "@tiptap/extension-list-item";
+import ListItem from "@tiptap/extension-list-item"
 
 type NoteCardProps = {
   selectedNotes: Note[] | undefined;

pages/home/Notes.tsx components/Notes.tsxpages/home/Notes.tsx renamed to components/Notes.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import styles from "./Home.module.css";
+import styles from "../pages/home/Home.module.css";
 import Image from "next/image";
-import NoteCard from "../../components/NoteCard";
+import NoteCard from "./NoteCard";
 import Router from "next/router";
-import SideBar from "../../components/SideBar";
-import { Note } from "../_types";
+import SideBar from "./SideBar";
+import { Note } from "../pages/_types";
 import { AiOutlineDelete, AiOutlineStar } from "react-icons/ai";
 import { MdOutlineRestoreFromTrash } from "react-icons/md";
 
@@ -98,6 +98,8 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
     }
   }
 
+  console.log(Notes.length)
+
   return (
     <div
       className={
@@ -119,9 +121,7 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
           <small>
             {Notes.length > 0
               ? Notes.length == 1
-                ? Notes.length + title == "Recycle bin"
-                  ? "deleted"
-                  : "" + " note"
+                ? Notes.length + (title === "Recycle bin" ? " deleted": "") + " note"
                 : Notes.length +
                   (title == "Recycle bin" ? " deleted" : "") +
                   " notes"
@@ -302,7 +302,7 @@ function NotesContainer({ Notes, title, setNotes }: Props) {
               +
             </button>
           ))}
-        {title == "Recycle bin" && (
+        {title == "Recycle bin" && Notes.length > 0 && (
           <button
             className={styles.delete_btn}
             style={{ backgroundColor: "greenyellow" }}

components/SideBar.tsx

@@ -2,23 +2,31 @@ import React, { useEffect, useState } from "react";
 import styles from "./Components.module.css";
 import SideBarLink from "./SideBarLink";
 import Image from "next/image";
+import { User } from "../pages/_types";
+import Router from "next/router";
+import { FcSynchronize } from "react-icons/fc";
+import { CgProfile } from "react-icons/cg";
+import Link from "next/link"
+
 
 type Props = {
   showSidebar: boolean;
 };
 
 function SideBar({ showSidebar }: Props) {
-
-  const [storedNotesCount, setstoredNotesCount] = useState("")
-  const [deletedNotesCount, setdeletedNotesCount] = useState("")
+  const [storedNotesCount, setstoredNotesCount] = useState("");
+  const [deletedNotesCount, setdeletedNotesCount] = useState("");
+  const [User, setUser] = useState<User>();
 
   useEffect(() => {
-    const Notes = JSON.parse(localStorage.getItem("NOTES")!)
-    const deletedNotes = JSON.parse(localStorage.getItem("DELETED_NOTES")!)
+    const Notes = JSON.parse(localStorage.getItem("NOTES")!);
+    const deletedNotes = JSON.parse(localStorage.getItem("DELETED_NOTES")!);
+    const user = JSON.parse(localStorage.getItem("user")!);
 
-    setstoredNotesCount(Notes?.length)
-    setdeletedNotesCount(deletedNotes?.length)
-  },[])
+    setstoredNotesCount(Notes?.length);
+    setdeletedNotesCount(deletedNotes?.length);
+    setUser(user as User);
+  }, []);
 
   return (
     <div
@@ -30,10 +38,46 @@ function SideBar({ showSidebar }: Props) {
     >
       <div className={styles.sidebar_wrapper}>
         <div className={styles.sidebar_profile}>
-          <Image src="/Images/Icons/person.png" width={30} height={30} alt="person"/>
+          <h2>{User?.username}</h2>
+          <div>
+            <Image
+              src="/Images/Icons/person.png"
+              width={30}
+              height={30}
+              alt="person"
+            />
+          </div>
         </div>
-        <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} />
+        <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}
+        />
+        <hr />
+        {User?.guest ? (
+          <div className={styles.control_pannel}>
+            <CgProfile size={25} color="white" />
+            <Link href={'/'} style={{color: "white"}}>
+              Create Account for Free or SignIn
+            </Link>
+          </div>
+        ) : (
+          <div>
+            <button className={`${styles.control_pannel} ${styles.functions}`}>
+              <FcSynchronize size={25} color="white" />
+              <div>Sync Notes</div>
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

components/SideBarLink.tsx

@@ -8,7 +8,7 @@ type Props = {
   value: string;
   count: string;
   showSidebar: boolean;
-  path: string;
+  path: string
 };
 
 function SideBarLink({ icon, value, count, showSidebar, path }: Props) {