diff --git a/src/App.js b/src/App.js
index b6e2f5f..c104528 100644
--- a/src/App.js
+++ b/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() {
>
- {numberOfResults > 0 ? (
-
{numberOfResults} Bookmarks found
- ) : null}
-
{filterBox ? (
) : null}
- {numberOfResults === 0 ? : null}
+
{loader ? : null}
diff --git a/src/componets/List.js b/src/componets/List.js
index bfcf05d..33b33f8 100644
--- a/src/componets/List.js
+++ b/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 (
+ {numberOfResults > 0 ? (
+
{numberOfResults} Bookmarks found
+ ) : null}
+
+ {numberOfResults === 0 ?
: null}
+
{editBox ? (
{
return 0;
})
.filter((e) => {
- return e != "Unsorted";
+ return e !== "Unsorted";
});
return (
@@ -52,7 +52,7 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
}
- suffix={{sortedCollections.length}}
+ suffix={{sortedCollections.length + 1}}
title={Collections
}
>
}>
diff --git a/src/modules/filterData.js b/src/modules/filterData.js
index cb77e46..5867bfe 100644
--- a/src/modules/filterData.js
+++ b/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;
}
});
};
diff --git a/src/styles/App.css b/src/styles/App.css
index f73e08b..fc270a5 100644
--- a/src/styles/App.css
+++ b/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;
diff --git a/src/styles/List.css b/src/styles/List.css
index 9544082..c381c30 100644
--- a/src/styles/List.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index f5e01c3..54e0698 100644
--- a/src/styles/SideBar.css
+++ b/src/styles/SideBar.css
@@ -54,4 +54,4 @@
.sidebar-item-prefix {
font-family: "Font Awesome 5 Free";
-}
\ No newline at end of file
+}