Fully added listing functionality.

src/App.js

@@ -12,6 +12,7 @@ import NoResults from "./componets/NoResults";
 import Loader from "./componets/Loader";
 import SideBar from "./componets/SideBar";
 import Tags from "./routes/Tags.js";
+import Lists from "./routes/Lists.js";
 import { Route, Routes } from "react-router-dom";
 
 function App() {
@@ -58,10 +59,6 @@ function App() {
 
   const filteredData = filter(data, searchQuery, filterCheckbox);
 
-  const tags = concatTags(data);
-
-  const lists = concatLists(data);
-
   async function fetchData() {
     const res = await fetch(API_HOST + "/api");
     const resJSON = await res.json();
@@ -98,7 +95,8 @@ function App() {
   return (
     <div className="App">
       <SideBar
-        tags={tags}
+        tags={concatTags(data)}
+        lists={concatLists(data)}
         handleToggleSidebar={handleToggleSidebar}
         toggle={toggle}
       />
@@ -155,8 +153,8 @@ function App() {
             onExit={exitAdding}
             reFetch={fetchData}
             lightMode={lightMode}
-            tags={() => tags}
-            lists={() => lists}
+            tags={() => concatTags(data)}
+            lists={() => concatLists(data)}
           />
         ) : null}
 
@@ -174,8 +172,8 @@ function App() {
                 lightMode={lightMode}
                 SetLoader={SetLoader}
                 data={filteredData}
-                tags={tags}
-                lists={lists}
+                tags={concatTags(data)}
+                lists={concatLists(data)}
                 reFetch={fetchData}
               />
             </div>
@@ -189,7 +187,22 @@ function App() {
               lightMode={lightMode}
               SetLoader={SetLoader}
               data={filteredData}
-              tags={tags}
+              tags={concatTags(data)}
+              lists={concatLists(data)}
+              reFetch={fetchData}
+            />
+          }
+        />
+
+        <Route
+          path="lists/:listId"
+          element={
+            <Lists
+              lightMode={lightMode}
+              SetLoader={SetLoader}
+              data={filteredData}
+              tags={concatTags(data)}
+              lists={concatLists(data)}
               reFetch={fetchData}
             />
           }

src/componets/SideBar.js

@@ -11,7 +11,7 @@ import "react-pro-sidebar/dist/css/styles.css";
 import "../styles/SideBar.css";
 import { Link } from "react-router-dom";
 
-const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
+const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
   const sortedTags = tags.sort((a, b) => {
     const A = a.toLowerCase(),
       B = b.toLowerCase();
@@ -19,6 +19,19 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
     if (A > B) return 1;
     return 0;
   });
+
+  const sortedLists = lists
+    .sort((a, b) => {
+      const A = a.toLowerCase(),
+        B = b.toLowerCase();
+      if (A < B) return -1;
+      if (A > B) return 1;
+      return 0;
+    })
+    .filter((e) => {
+      return e != "Unsorted";
+    });
+
   return (
     <ProSidebar
       toggled={toggle}
@@ -37,6 +50,21 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
             </Link>
           </MenuItem>
 
+          <SubMenu
+            icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
+            suffix={<span className="badge">{sortedTags.length}</span>}
+            title={<h3 className="menu-item">Lists</h3>}
+          >
+            {sortedLists.map((e, i) => {
+              const path = `/lists/${e}`;
+              return (
+                <MenuItem prefix={"#"} key={i}>
+                  <Link to={path}>{e}</Link>
+                </MenuItem>
+              );
+            })}
+          </SubMenu>
+
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
             suffix={<span className="badge">{sortedTags.length}</span>}

src/routes/Lists.js

@@ -0,0 +1,24 @@
+import { useParams } from "react-router-dom";
+import List from "../componets/List";
+
+const Lists = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
+  const { listId } = useParams();
+  const dataWithMatchingTag = data.filter((e) => {
+    return e.list.includes(listId);
+  });
+
+  return (
+    <div className="content">
+      <List
+        lightMode={lightMode}
+        data={dataWithMatchingTag}
+        tags={tags}
+        lists={lists}
+        SetLoader={SetLoader}
+        reFetch={reFetch}
+      />
+    </div>
+  );
+};
+
+export default Lists;

src/routes/Tags.js

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => {
+const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
   const { tagId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
     return e.tag.includes(tagId);
@@ -13,6 +13,7 @@ const Tags = ({ data, tags, SetLoader, lightMode, reFetch }) => {
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}
+        lists={lists}
         SetLoader={SetLoader}
         reFetch={reFetch}
       />

src/styles/SideBar.css

@@ -46,4 +46,4 @@
 
 .pro-inner-item {
   margin-bottom: 10px;
-}
+}