Merge pull request #12 from t007rushi/filters

[FEAT] : priority and Filters functionality added
t007rushi · Apr 7, 2022 · 3f08c4c · 3f08c4c
2 parents 70aef05 + 6038f5f
commit 3f08c4c
Show file tree

Hide file tree

Showing 34 changed files with 682 additions and 144 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,10 +9,12 @@
     "jwt-encode": "^1.0.1",
     "miragejs": "^0.1.43",
     "mockman-js": "^1.0.5",
+    "moment": "^2.29.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-masonry-css": "^1.0.16",
+    "react-moment": "^1.1.2",
     "react-quill": "^1.3.5",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",

diff --git a/src/Layout/Header/Header.jsx b/src/Layout/Header/Header.jsx
@@ -2,14 +2,17 @@ import React from "react";
 import "./note-header.css";
 import { AiOutlineSearch, AiOutlineMenu } from "react-icons/ai";
 import { MdDarkMode, MdLogout, MdLightMode } from "react-icons/md";
+import { BiArrowBack } from "react-icons/bi";
+import { IoMdOptions } from "react-icons/io";
 import { useTheme } from "../../context/theme-context";
 import { useHeader } from "../../context/header-context";
 import { NavLink, useLocation } from "react-router-dom";
 import { useAuth } from "../../context/auth-context";
 
 export const Header = () => {
   const { theme, toggleTheme } = useTheme();
-  const { toggle } = useHeader();
+  const { toggle, ShowFilters, showSearch, showSearchbar, hideSearchbar } =
+    useHeader();
   const { user, signOutHandler } = useAuth();
   const { pathname } = useLocation();
   const forbiddenpaths = ["/", "/login", "/signup"];
@@ -26,13 +29,18 @@ export const Header = () => {
         </NavLink>
       </div>
       {user.isUserLoggedIn && (
-        <div className="flex-row header-mid">
-          <AiOutlineSearch className="header-icon" />
-          <NavLink to="/search"> <input
-            type="text"
-            placeholder="Search"
-            className="search-bar"
-          /></NavLink>
+        <div className={showSearch ? "search-active" : "search-hide"}>
+          <div className="flex-row header-mid">
+            <NavLink to="/notes">
+              <BiArrowBack className="header-icon" onClick={hideSearchbar} />
+            </NavLink>
+            <NavLink to="/search">
+              <input type="text" placeholder="Search" className="search-bar" />
+            </NavLink>
+            <NavLink to="/search">
+              <IoMdOptions className="filter-icon" onClick={ShowFilters} />
+            </NavLink>
+          </div>
         </div>
       )}
       <div
@@ -42,21 +50,28 @@ export const Header = () => {
             : "flex-row header-right"
         }
       >
-        <AiOutlineSearch className="icon-active header-icon" />
+        {!showSearch && user.isUserLoggedIn && (
+          <AiOutlineSearch
+            className="icon-active header-icon"
+            onClick={() => {
+              showSearchbar();
+            }}
+          />
+        )}
         {theme === "light" ? (
           <MdDarkMode className="header-icon" onClick={toggleTheme} />
         ) : (
           <MdLightMode className="header-icon" onClick={toggleTheme} />
         )}
         {!user.isUserLoggedIn ? (
-          <div className="flex-row header-right-btn">
+          <div className="flex-row ">
             {pathname !== "/login" && (
-              <NavLink to="/login" className="btn auth-btn">
+              <NavLink to="/login" className="btn auth-btn flex-row center-it">
                 LOGIN
               </NavLink>
             )}
             {pathname !== "/signup" && (
-              <NavLink to="/signup" className="btn auth-btn">
+              <NavLink to="/signup" className="btn auth-btn flex-row center-it">
                 SIGNUP
               </NavLink>
             )}

diff --git a/src/Layout/Header/note-header.css b/src/Layout/Header/note-header.css
@@ -7,12 +7,14 @@
 }
 
 .header-mid {
-  width: 40rem;
   background-color: var(--accent-three-color);
-  border:none;
+  border: none;
+  justify-content: space-between;
+  position: absolute;
+  top: 10px;
+  left: 3rem;
 }
 .search-bar {
-  width: 40rem;
   border: none;
   font-size: 1rem;
   padding: 0.5rem;
@@ -42,14 +44,14 @@
   gap: 1rem;
 }
 
-.auth-btn{
-  width: 5rem;
+.auth-btn {
+  width: 4rem;
   font-size: 1rem;
-  margin-right: 3rem;
+  margin-right: 1.2rem;
   background-color: var(--foreground-color);
   color: var(--background-color);
   text-decoration: none;
-  font-weight:bold;
+  font-weight: bold;
 }
 
 .header-icon {
@@ -66,25 +68,36 @@
   padding: 5px;
 }
 
-.web-logo{
+.web-logo {
   cursor: pointer;
   text-decoration: none;
 }
 
-@media only screen and (max-width: 1020px) {
-  .header-mid {
-    display: none;
-  }
+.filter-icon {
+  font-size: 2rem;
+  color: var(--foreground-color);
+  cursor: pointer;
+}
+
+.search-active {
+  display: initial;
+}
+.search-hide {
+  display: none;
+}
+
+@media only screen and (max-width: 730px) {
   .header-righthm {
     margin: auto;
   }
   .header-righthm button {
     display: none;
   }
+
 }
 
-@media only screen and (min-width: 1020px) {
-  .icon-active {
-    display: none;
+@media only screen and (min-width: 730px) {
+  .header-mid {
+    left: auto;
   }
 }
diff --git a/src/Layout/Main/Main.jsx b/src/Layout/Main/Main.jsx
@@ -8,6 +8,7 @@ import {
   LabelsPage,
   LoginPage,
   NotesPage,
+  Search,
   SignupPage,
   TrashPage,
 } from "../../pages";
@@ -48,11 +49,30 @@ export const Main = () => {
               <ProtectedRoute ProtectedComp={<NotesPage />}></ProtectedRoute>
             }
           ></Route>
-          <Route path="/archives" element={<ArchivesPage />}></Route>
-
-          <Route path="/labels/:label" element={<LabelsPage />}></Route>
-          <Route path="/trash" element={<TrashPage />}></Route>
-          <Route path="/search" element={<></>}></Route>
+          <Route
+            path="/trash"
+            element={
+              <ProtectedRoute ProtectedComp={<TrashPage />}></ProtectedRoute>
+            }
+          ></Route>
+          <Route
+            path="/labels/:label"
+            element={
+              <ProtectedRoute ProtectedComp={<LabelsPage />}></ProtectedRoute>
+            }
+          ></Route>
+          <Route
+            path="/archives"
+            element={
+              <ProtectedRoute ProtectedComp={<ArchivesPage />}></ProtectedRoute>
+            }
+          ></Route>
+          <Route
+            path="/search"
+            element={
+              <ProtectedRoute ProtectedComp={<Search />}></ProtectedRoute>
+            }
+          ></Route>
           <Route path="/profile" element={<></>}></Route>
           <Route path="/*" element={<></>}></Route>
         </Routes>

diff --git a/src/Layout/sidebar/Sidebar.jsx b/src/Layout/sidebar/Sidebar.jsx
@@ -1,13 +1,12 @@
 import React from "react";
 import "./sidebar.css";
-import { useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import sidebarData from "../../data/sidebarData";
 import { useHeader } from "../../context/header-context";
 import { useNotes } from "../../context/notes-context";
 import { MdOutlineLabel, MdOutlineNote } from "react-icons/md";
 
 export const Sidebar = () => {
-  const navigator = useNavigate();
   const { sidebar } = useHeader();
   const { uniqueLabels } = useNotes();
   const labelArr = uniqueLabels.map((label) => {
@@ -23,18 +22,23 @@ export const Sidebar = () => {
     ...labelArr,
     ...sidebarData,
   ];
+
+  const NavStyles =({isActive}) =>{
+    return isActive?"flex-row gap-btwn cur-point sidebar-item bg-active":"flex-row gap-btwn cur-point sidebar-item"
+      }
+
   return (
     <ul className="flex-row flex-col  gap-btwn sidebar active">
       {sidebarArr.map(({ title, navigate, Icon }) => {
         return (
-          <li
+          <NavLink to={navigate}
+          title={title}
             key={title}
-            className="flex-row gap-btwn cur-point sidebar-item "
-            onClick={() => navigator(navigate)}
+            className={NavStyles}
           >
             <Icon />
             <span className={sidebar ? "side-hide" : "active"}>{title}</span>
-          </li>
+          </NavLink>
         );
       })}
     </ul>

diff --git a/src/Layout/sidebar/sidebar.css b/src/Layout/sidebar/sidebar.css
@@ -22,6 +22,7 @@
   width: 100%;
   border-radius: 10px;
   color: var(--foreground-color);
+  text-decoration: none;
 }
 
 .sidebar-item:focus{
@@ -40,6 +41,10 @@
   transition: all 0.1s ease-out;
 }
 
+.bg-active{
+background-color: var(--hover-bg-color);
+}
+
 @media only screen and (max-width: 750px) {
   .sidebar {
     padding: 0;