Bug fix.

src/App.js

@@ -8,7 +8,6 @@ import sortList from "./modules/sortList";
 import filter from "./modules/filterData";
 import concatTags from "./modules/concatTags";
 import concatCollections from "./modules/concatCollections";
-import NoResults from "./componets/NoResults";
 import Loader from "./componets/Loader";
 import SideBar from "./componets/SideBar";
 import Tags from "./routes/Tags.js";
@@ -20,7 +19,6 @@ function App() {
     [newBox, setNewBox] = useState(false),
     [filterBox, setFilterBox] = useState(false),
     [searchQuery, setSearchQuery] = useState(""),
-    [numberOfResults, setNumberOfResults] = useState(0),
     [filterCheckbox, setFilterCheckbox] = useState([true, true, true]),
     [sortBy, setSortBy] = useState(1),
     [loader, setLoader] = useState(false),
@@ -78,10 +76,6 @@ function App() {
     // eslint-disable-next-line
   }, []);
 
-  useEffect(() => {
-    setNumberOfResults(filteredData.length);
-  }, [filteredData]);
-
   useEffect(() => {
     if (lightMode) {
       document.body.classList.add("light");
@@ -133,10 +127,6 @@ function App() {
           ></button>
         </div>
 
-        {numberOfResults > 0 ? (
-          <p className="results">{numberOfResults} Bookmarks found</p>
-        ) : null}
-
         {filterBox ? (
           <Filters
             filterCheckbox={filterCheckbox}
@@ -158,7 +148,7 @@ function App() {
           />
         ) : null}
 
-        {numberOfResults === 0 ? <NoResults /> : null}
+        
 
         {loader ? <Loader lightMode={lightMode} /> : null}
       </div>

src/componets/List.js

@@ -2,12 +2,14 @@ import "../styles/List.css";
 import LazyLoad from "react-lazyload";
 import ViewArchived from "./ViewArchived";
 import EditItem from "./EditItem";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
+import NoResults from "./NoResults";
 
 const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
-  const [editBox, setEditBox] = useState(false);
-  const [editIndex, setEditIndex] = useState(0);
+  const [editBox, setEditBox] = useState(false),
+    [editIndex, setEditIndex] = useState(0),
+    [numberOfResults, setNumberOfResults] = useState(0);
 
   function edit(index) {
     setEditBox(true);
@@ -18,8 +20,18 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
     setEditBox(false);
   }
 
+  useEffect(() => {
+    setNumberOfResults(data.length);
+  }, [data]);
+
   return (
     <div className="list">
+      {numberOfResults > 0 ? (
+        <p className="results">{numberOfResults} Bookmarks found</p>
+      ) : null}
+
+      {numberOfResults === 0 ? <NoResults /> : null}
+
       {editBox ? (
         <EditItem
           lightMode={lightMode}

src/componets/SideBar.js

@@ -29,7 +29,7 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
       return 0;
     })
     .filter((e) => {
-      return e != "Unsorted";
+      return e !== "Unsorted";
     });
 
   return (
@@ -52,7 +52,7 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
 
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
-            suffix={<span className="badge">{sortedCollections.length}</span>}
+            suffix={<span className="badge">{sortedCollections.length + 1}</span>}
             title={<div className="menu-item">Collections</div>}
           >
             <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>

src/modules/filterData.js

@@ -4,24 +4,24 @@ const filteredData = (
   filterCheckbox
 ) => {
   return data.filter((e) => {
-    const name = e.name.toLowerCase().includes(searchQuery.toLowerCase());
-    const title = e.title.toLowerCase().includes(searchQuery.toLowerCase());
+    const linkName = e.name.toLowerCase().includes(searchQuery.toLowerCase());
+    const websiteTitle = e.title.toLowerCase().includes(searchQuery.toLowerCase());
     const tags = e.tag.some((e) => e.includes(searchQuery.toLowerCase()));
 
-    if (filterCheckbox === [true, true, true]) {
-      return name || title || tags;
+    if (filterCheckbox.every(e => e === true)) {
+      return linkName || websiteTitle || tags;
     } else if (filterCheckbox[0] && filterCheckbox[2]) {
-      return name || tags;
+      return linkName || tags;
     } else if (filterCheckbox[0] && filterCheckbox[1]) {
-      return name || title;
+      return linkName || websiteTitle;
     } else if (filterCheckbox[2] && filterCheckbox[1]) {
-      return tags || title;
+      return tags || websiteTitle;
     } else if (filterCheckbox[0]) {
-      return name;
+      return linkName;
     } else if (filterCheckbox[1]) {
-      return tags;
+      return websiteTitle;
     } else if (filterCheckbox[2]) {
-      return title;
+      return tags;
     }
   });
 };

src/styles/App.css

@@ -32,7 +32,7 @@
 }
 
 .content {
-  padding: 0px 20px 20px 20px;
+  padding: 0px 20px 0 20px;
 }
 
 .head {
@@ -86,20 +86,6 @@ input:focus {
   outline: none;
 }
 
-.results {
-  margin: 20px 20px 0px 0px;
-  display: inline-block;
-}
-
-.no-results {
-  text-align: center;
-  padding-top: 5%;
-  padding-bottom: 5%;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  margin-top: 10px;
-}
-
 .dark-light-btn {
   margin-left: 10px;
   font-size: 1.2em;

src/styles/List.css

@@ -208,3 +208,12 @@
   opacity: 80%;
   margin-right: auto;
 }
+
+.no-results {
+  text-align: center;
+  padding-top: 5%;
+  padding-bottom: 5%;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  margin-top: 10px;
+}

src/styles/SideBar.css

@@ -54,4 +54,4 @@
 
 .sidebar-item-prefix {
   font-family: "Font Awesome 5 Free";
-}
+}