From d28df3a061d9fcdd7369da36d8d890bf9fcd96ad Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 17 Jun 2022 14:08:48 +0430 Subject: [PATCH] Much neater filters + cleaner code. --- src/App.js | 73 +++++-------------- src/componets/Filters.js | 149 ++++++++++++++++++++++++++++++-------- src/componets/Sort.js | 44 ----------- src/modules/filterData.js | 18 ++--- src/modules/sortList.js | 12 +-- src/styles/App.css | 12 ++- src/styles/Filters.css | 47 +++++++++--- src/styles/List.css | 1 + src/styles/SideBar.css | 3 - src/styles/Sort.css | 77 -------------------- src/styles/index.css | 35 +++------ 11 files changed, 208 insertions(+), 263 deletions(-) delete mode 100644 src/componets/Sort.js delete mode 100644 src/styles/Sort.css diff --git a/src/App.js b/src/App.js index 9de48a7..c2b7986 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,6 @@ import List from "./componets/List"; import AddItem from "./componets/AddItem"; import config from "./config"; import Filters from "./componets/Filters"; -import Sort from "./componets/Sort"; import sortList from "./modules/sortList"; import filter from "./modules/filterData"; import concatTags from "./modules/concatTags"; @@ -18,13 +17,10 @@ function App() { const [data, setData] = useState([]), [newBox, setNewBox] = useState(false), [filterBox, setFilterBox] = useState(false), - [sortBox, setSortBox] = useState(false), [searchQuery, setSearchQuery] = useState(""), [numberOfResults, setNumberOfResults] = useState(0), - [nameChecked, setNameChecked] = useState(true), - [descriptionChecked, setDescriptionChecked] = useState(true), - [tagsChecked, setTagsChecked] = useState(true), - [sortBy, setSortBy] = useState("Default"), + [filterCheckbox, setFilterCheckbox] = useState([true, true, true]), + [sortBy, setSortBy] = useState(1), [loader, setLoader] = useState(false), [lightMode, setLightMode] = useState( localStorage.getItem("light-mode") === "true" @@ -35,16 +31,8 @@ function App() { setLoader(x); } - function handleNameCheckbox() { - setNameChecked(!nameChecked); - } - - function handleDescriptionCheckbox() { - setDescriptionChecked(!descriptionChecked); - } - - function handleTagsCheckbox() { - setTagsChecked(!tagsChecked); + function handleFilterCheckbox(newVal) { + setFilterCheckbox(newVal); } function exitAdding() { @@ -55,15 +43,11 @@ function App() { setFilterBox(false); } - function exitSorting() { - setSortBox(false); - } - function search(e) { setSearchQuery(e.target.value); } - function sortByFunc(e) { + function handleSorting(e) { setSortBy(e); } @@ -71,13 +55,7 @@ function App() { setToggle(!toggle); } - const filteredData = filter( - data, - searchQuery, - nameChecked, - tagsChecked, - descriptionChecked - ); + const filteredData = filter(data, searchQuery, filterCheckbox); const tags = concatTags(data); @@ -92,9 +70,9 @@ function App() { useEffect(() => { const sortedData = sortList(data, sortBy); setData(sortedData); - exitSorting(); + exitFilter(); // eslint-disable-next-line - }, [sortBy]); + }, [sortBy, filterCheckbox]); useEffect(() => { fetchData(); @@ -138,6 +116,14 @@ function App() { placeholder=" Search" onChange={search} /> + + @@ -151,33 +137,14 @@ function App() {

{numberOfResults} Bookmarks found

) : null} - - - {numberOfResults === 0 ? : null} - {sortBox ? : null} - {filterBox ? ( ) : null} diff --git a/src/componets/Filters.js b/src/componets/Filters.js index ffbc093..2b39801 100644 --- a/src/componets/Filters.js +++ b/src/componets/Filters.js @@ -1,50 +1,137 @@ import "../styles/Filters.css"; +import { useState } from "react"; const Filters = ({ - nameChecked, - handleNameCheckbox, - descriptionChecked, - handleDescriptionCheckbox, - tagsChecked, - handleTagsCheckbox, + filterCheckbox, + handleFilterCheckbox, + sortBy, + sort, onExit, }) => { + const [nameChecked, setNameChecked] = useState(filterCheckbox[0]), + [titleChecked, setTitleChecked] = useState(filterCheckbox[1]), + [tagChecked, setTagChecked] = useState(filterCheckbox[2]), + [radio, setRadio] = useState(sort); + function abort(e) { if (e.target.className === "filter-overlay") { onExit(); } } + function handleRadio(e) { + setRadio(e.target.value); + } + + function applyChanges() { + handleFilterCheckbox([nameChecked, titleChecked, tagChecked]); + sortBy(radio); + } + return ( <>
- Filter by - - - + Filter search + +
+
+

Sort by

+ + + + + + +
+ +
+

Include/Exclude

+ + + +
+
+ +
diff --git a/src/componets/Sort.js b/src/componets/Sort.js deleted file mode 100644 index 9ce7468..0000000 --- a/src/componets/Sort.js +++ /dev/null @@ -1,44 +0,0 @@ -import "../styles/Sort.css"; - -const Sort = ({ sortBy, onExit }) => { - function abort(e) { - if (e.target.className === "sort-overlay") { - onExit(); - } - } - - function sort(e) { - sortBy(e.target.value); - } - - return ( - <> -
-
-
- Sort by - - - - - - -
-
- - ); -}; - -export default Sort; diff --git a/src/modules/filterData.js b/src/modules/filterData.js index 3240871..cb77e46 100644 --- a/src/modules/filterData.js +++ b/src/modules/filterData.js @@ -1,28 +1,26 @@ const filteredData = ( data, searchQuery, - nameChecked, - tagsChecked, - descriptionChecked + filterCheckbox ) => { return data.filter((e) => { const name = e.name.toLowerCase().includes(searchQuery.toLowerCase()); const title = e.title.toLowerCase().includes(searchQuery.toLowerCase()); const tags = e.tag.some((e) => e.includes(searchQuery.toLowerCase())); - if (nameChecked && tagsChecked && descriptionChecked) { + if (filterCheckbox === [true, true, true]) { return name || title || tags; - } else if (nameChecked && tagsChecked) { + } else if (filterCheckbox[0] && filterCheckbox[2]) { return name || tags; - } else if (nameChecked && descriptionChecked) { + } else if (filterCheckbox[0] && filterCheckbox[1]) { return name || title; - } else if (tagsChecked && descriptionChecked) { + } else if (filterCheckbox[2] && filterCheckbox[1]) { return tags || title; - } else if (nameChecked) { + } else if (filterCheckbox[0]) { return name; - } else if (tagsChecked) { + } else if (filterCheckbox[1]) { return tags; - } else if (descriptionChecked) { + } else if (filterCheckbox[2]) { return title; } }); diff --git a/src/modules/sortList.js b/src/modules/sortList.js index 3211259..0c52c43 100644 --- a/src/modules/sortList.js +++ b/src/modules/sortList.js @@ -1,14 +1,14 @@ const sortList = (data, sortBy) => { let sortedData = data; - if (sortBy === "Default") { + if (sortBy == 1) { sortedData.sort((a, b) => { return new Date(b.date) - new Date(a.date); }); - } else if (sortBy === "Date (Oldest first)") { + } else if (sortBy == 2) { sortedData.sort((a, b) => { return new Date(a.date) - new Date(b.date); }); - } else if (sortBy === "Name (A-Z)") { + } else if (sortBy == 3) { sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); @@ -16,7 +16,7 @@ const sortList = (data, sortBy) => { if (A > B) return 1; return 0; }); - } else if (sortBy === "Name (Z-A)") { + } else if (sortBy == 4) { sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); @@ -24,7 +24,7 @@ const sortList = (data, sortBy) => { if (A < B) return 1; return 0; }); - } else if (sortBy === "Title (A-Z)") { + } else if (sortBy == 5) { sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); @@ -32,7 +32,7 @@ const sortList = (data, sortBy) => { if (A > B) return 1; return 0; }); - } else if (sortBy === "Title (Z-A)") { + } else if (sortBy == 6) { sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); diff --git a/src/styles/App.css b/src/styles/App.css index bda507c..83d2460 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -1,13 +1,19 @@ -@media (min-width: 650px) { +@media (width >= 650px) { .search { width: 35%; min-width: 300px; } } -@media (max-width: 650px) { +@media (400px < width < 650px) { .search { - width: 170px; + width: 40%; + } +} + +@media (width <= 400px) { + .search { + width: 120px; } } diff --git a/src/styles/Filters.css b/src/styles/Filters.css index c4de1ce..abc43da 100644 --- a/src/styles/Filters.css +++ b/src/styles/Filters.css @@ -1,15 +1,20 @@ -@media (min-width: 800px) { +@media (min-width: 600px) { .filter { - left: 35%; - right: 35%; + left: 10%; + right: 10%; min-width: 200px; } + + .filter-groups { + display: flex; + justify-content: space-evenly; + } } -@media (max-width: 800px) { +@media (max-width: 600px) { .filter { - left: 20%; - right: 20%; + left: 10%; + right: 10%; min-width: 100px; } } @@ -36,10 +41,9 @@ border-width: 1px; font-weight: 300; border-color: rgb(141, 141, 141); - display: flex; - flex-direction: column; + justify-content: center; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; - padding: 5px; + padding: 10px; position: absolute; -moz-user-select: none; -webkit-user-select: none; @@ -51,10 +55,10 @@ font-weight: 600; } -.filter > label { - margin: 5px; +.section > label { + display: block; text-align: left; - margin-bottom: 5px; + margin-bottom: 10px; font-family: "Font Awesome 5 Free"; padding: 10px; font-size: 1.1rem; @@ -68,6 +72,25 @@ box-shadow: 0px 0px 10px rgb(83, 143, 255); } +.apply-btn { + font-family: "Font Awesome 5 Free"; + font-size: 1.2rem; + padding: 10px; + cursor: pointer; + 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; + border: none; + margin-top: 20px; + display: block; + margin-left: auto; + margin-right: auto; + transition: background-color 0.1s; +} + +.apply-btn:active { + box-shadow: 0px 0px 10px rgb(83, 143, 255); +} + @keyframes fadein { from { opacity: 0%; diff --git a/src/styles/List.css b/src/styles/List.css index 928cdb4..22c4c6a 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -159,6 +159,7 @@ .tags a { margin-right: 10px; color: #2b8add; + text-decoration: none; } .tags a::before { diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index 6bcb475..42800e4 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -1,9 +1,6 @@ .sidebar { height: 100vh; position: fixed; - border-right: solid; - border-width: 1px; - border-color: gray; } .sidebar h1 { diff --git a/src/styles/Sort.css b/src/styles/Sort.css deleted file mode 100644 index 5927d34..0000000 --- a/src/styles/Sort.css +++ /dev/null @@ -1,77 +0,0 @@ -@media (min-width: 800px) { - .sort { - left: 30%; - right: 30%; - min-width: 200px; - } -} - -@media (max-width: 800px) { - .sort { - left: 20%; - right: 20%; - min-width: 100px; - } -} - -.sort-overlay { - animation: fadein 0.2s; - background-color: black; - opacity: 10%; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 100vw; - z-index: 1; -} - -.sort-box { - position: relative; -} - -.sort { - animation: fadein 0.3s; - border: solid; - border-width: 1px; - font-weight: 300; - border-color: rgb(141, 141, 141); - display: flex; - flex-direction: column; - box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; - padding: 5px; - position: absolute; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; - z-index: 2; -} - -.sort legend { - font-weight: 600; -} - -.sort-by-btn { - margin: 5px; - text-align: left; - font-family: "Font Awesome 5 Free"; - padding: 10px; - font-size: 1.1rem; - cursor: pointer; - 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; - border: none; - transition: background-color 0.1s; -} - -.sort-by-btn:active { - box-shadow: 0px 0px 10px rgb(83, 143, 255); -} - -@keyframes fadein { - from { - opacity: 0%; - } - to { - } -} diff --git a/src/styles/index.css b/src/styles/index.css index df67303..f7dfa40 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -32,23 +32,15 @@ body { background-color: #1f2c38; } -.send-btn { - background-color: #273949; - color: #ffffffb6; -} - -.sort { - background-color: #1f2c38; -} - -.sort-by-btn { +.send-btn, +.apply-btn { background-color: #273949; color: #ffffffb6; } .btn:hover, -.sort-by-btn:hover, -.send-btn:hover { +.send-btn:hover, +.apply-btn:hover { background-color: rgb(76, 117, 170); } @@ -89,7 +81,7 @@ body { background-color: #1f2c38; } -.filter > label { +.section > label { background-color: #273949; color: #ffffffb6; } @@ -142,29 +134,24 @@ body { color: rgb(9, 139, 214); } -.light .filter, -.light .sort { +.light .filter { background-color: rgb(233, 220, 179); } -.light .filter > label { +.light .section > label { background-color: lightyellow; color: #4b4b4bb6; } -.light .sort-by-btn { - background-color: lightyellow; - color: #4b4b4bb6; -} - -.light .send-btn { +.light .send-btn, +.light .apply-btn { background-color: lightyellow; color: #717171b6; } -.light .sort-by-btn:hover, .light .btn:hover, -.light .send-btn:hover { +.light .send-btn:hover, +.light .apply-btn:hover { background-color: rgb(55, 131, 237); color: #d8d8d8; }