From 2e2135976f454affce9a219a683470f4e66cca28 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 1 Jun 2022 16:03:36 +0430 Subject: [PATCH] Added sorting functionality --- api/package-lock.json | 2 +- package-lock.json | 2 +- src/App.js | 80 ++++++++++++++++++++++++++++++++-------- src/componets/Filters.js | 2 +- src/componets/Sort.js | 20 ++++++---- src/config.json | 2 +- src/styles/Sort.css | 22 +++++++++++ 7 files changed, 103 insertions(+), 27 deletions(-) diff --git a/api/package-lock.json b/api/package-lock.json index 1c1f481..87981ac 100644 --- a/api/package-lock.json +++ b/api/package-lock.json @@ -5,7 +5,7 @@ "requires": true, "packages": { "": { - "name": "web-extracts-api", + "name": "link-warden-api", "version": "1.0.0", "license": "MIT", "dependencies": { diff --git a/package-lock.json b/package-lock.json index fbf19f0..192a061 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,7 @@ "requires": true, "packages": { "": { - "name": "web-extracts", + "name": "link-warden", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.4", diff --git a/src/App.js b/src/App.js index e39e318..9a2f7f0 100644 --- a/src/App.js +++ b/src/App.js @@ -7,16 +7,16 @@ import Filters from './componets/Filters'; import Sort from './componets/Sort'; function App() { - const [data, setData] = useState([]); - const [newBox, setNewBox] = useState(false); - const [filterBox, setFilterBox] = useState(false); - const [sortBox, setSortBox] = useState(false); - const [searchQuery, setSearchQuery] = useState(''); - const [numberOfResults, setNumberOfResults] = useState(0); - const [nameChecked, setNameChecked] = useState(true); - const [descriptionChecked, setDescriptionChecked] = useState(true); - const [tagsChecked, setTagsChecked] = useState(true); - const [sort, setSort] = useState('Date'); + 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('Date (Newest first)'); function handleNameCheckbox() { setNameChecked(!nameChecked); @@ -45,6 +45,10 @@ function App() { function search(e) { setSearchQuery(e.target.value); } + + function sortByFunc(e) { + setSortBy(e) + } const filteredData = data.filter((e) => { const name = e.name.toLowerCase().includes(searchQuery.toLowerCase()); @@ -65,12 +69,58 @@ function App() { else if(descriptionChecked) { return title } }); + function sortList(data = data, sortBy = 'Default') { + let sortedData = data; + if(sortBy === 'Date (Oldest first)') { + sortedData.sort((a, b) => { return b-a }); + } else if(sortBy === 'Name (A-Z)') { + sortedData.sort(function(a, b){ + const A = a.name.toLowerCase(), B = b.name.toLowerCase(); + if (A < B) + return -1; + if (A > B) + return 1; + return 0; + }); + } else if(sortBy === 'Name (Z-A)') { + sortedData.sort(function(a, b){ + const A = a.name.toLowerCase(), B = b.name.toLowerCase(); + if (A > B) + return -1; + if (A < B) + return 1; + return 0; + }); + } else if(sortBy === 'Title (A-Z)') { + sortedData.sort(function(a, b){ + const A = a.title.toLowerCase(), B = b.title.toLowerCase(); + if (A < B) + return -1; + if (A > B) + return 1; + return 0; + }); + } else if(sortBy === 'Title (Z-A)') { + sortedData.sort(function(a, b){ + const A = a.title.toLowerCase(), B = b.title.toLowerCase(); + if (A > B) + return -1; + if (A < B) + return 1; + return 0; + }); + } + + return sortedData; + } + async function fetchData() { const address = config.api.address + ":" + config.api.port; const res = await fetch(address + '/api'); const resJSON = await res.json(); - const Data = resJSON.sort((a, b) => { return b-a }); // <-- SORT IT! - setData(Data); + const data = resJSON.sort((a, b) => { return b-a }); + const sortedData = sortList(data, sortBy); + setData(sortedData); } const concatTags = () => { @@ -87,7 +137,7 @@ function App() { useEffect(() => { fetchData(); - }, []); + }, [sortBy]); useEffect(() => { setNumberOfResults(filteredData.length); @@ -107,8 +157,8 @@ function App() { {sortBox ? : null} {filterBox ? Filter by - + diff --git a/src/componets/Sort.js b/src/componets/Sort.js index 1c6e3e9..7c8be1b 100644 --- a/src/componets/Sort.js +++ b/src/componets/Sort.js @@ -1,23 +1,27 @@ import '../styles/Sort.css' -const Sort = ({ onExit }) => { +const Sort = ({ sortBy, onExit }) => { function abort(e) { if (e.target.className === "sort-overlay") { onExit(); } } + function sort(e) { + sortBy(e.target.value); + } + return ( <>
-
+
Sort by - - - - - - + + + + + +
) diff --git a/src/config.json b/src/config.json index 29574bb..743b18f 100644 --- a/src/config.json +++ b/src/config.json @@ -1,7 +1,7 @@ { "api": { "address": "http://localhost", - "port": 5002, + "port": 5000, "mongodb_URI": "mongodb://localhost:27017", "database_name": "sample_db", "collection_name": "list", diff --git a/src/styles/Sort.css b/src/styles/Sort.css index c7e909f..763cb58 100644 --- a/src/styles/Sort.css +++ b/src/styles/Sort.css @@ -33,4 +33,26 @@ .sort label { margin: 5px; +} + +.sort-by-btn { + text-align: left; + margin-bottom: 5px; + 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; + color: #ffffffb6; + background-color:#273949; + border: none; + transition: background-color 0.1s; +} + +.sort-by-btn:hover { + background-color: rgb(76, 117, 170); +} + +.sort-by-btn:active { + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } \ No newline at end of file