Added sorting functionality

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": {

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",

src/App.js

@@ -7,16 +7,16 @@ import Filters from './componets/Filters';
 import Sort from './componets/Sort';
 
 function App() {
-  const [data, setData] = useState([]);
+  const [data, setData] = useState([]),
-  const [newBox, setNewBox] = useState(false);
+    [newBox, setNewBox] = useState(false),
-  const [filterBox, setFilterBox] = useState(false);
+    [filterBox, setFilterBox] = useState(false),
-  const [sortBox, setSortBox] = useState(false);
+    [sortBox, setSortBox] = useState(false),
-  const [searchQuery, setSearchQuery] = useState('');
+    [searchQuery, setSearchQuery] = useState(''),
-  const [numberOfResults, setNumberOfResults] = useState(0);
+    [numberOfResults, setNumberOfResults] = useState(0),
-  const [nameChecked, setNameChecked] = useState(true);
+    [nameChecked, setNameChecked] = useState(true),
-  const [descriptionChecked, setDescriptionChecked] = useState(true);
+    [descriptionChecked, setDescriptionChecked] = useState(true),
-  const [tagsChecked, setTagsChecked] = useState(true);
+    [tagsChecked, setTagsChecked] = useState(true),
-  const [sort, setSort] = useState('Date');
+    [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!
+    const data = resJSON.sort((a, b) => { return b-a });
-    setData(Data);
+    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() {
       <List data={filteredData} reFetch={fetchData} />
 
       {sortBox ? <Sort 
-        onExit={exitSorting} 
+        sortBy={sortByFunc}
-        reFetch={fetchData}
+        onExit={exitSorting}
       /> : null}
 
       {filterBox ? <Filters 

src/componets/Filters.js

@@ -13,7 +13,7 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
         <fieldset className='filter'>
             <legend >Filter by</legend>
             <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
-            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title</label>
+            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
             <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
         </fieldset>
     </>

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 (
     <>
         <div className='sort-overlay' onClick={abort}></div>
-        <fieldset className='sort'>
+        <fieldset className='sort' onClick={sort}>
             <legend>Sort by</legend>
-            <label><input name="sort" type="radio" />Date (Newest first)</label>
+            <button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
-            <label><input name="sort" type="radio" />Date (Oldest first)</label>
+            <button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button>
-            <label><input name="sort" type="radio" />Name (A-Z)</label>
+            <button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button>
-            <label><input name="sort" type="radio" />Name (Z-A)</label>
+            <button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button>
-            <label><input name="sort" type="radio" />Title (A-Z)</label>
+            <button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
-            <label><input name="sort" type="radio" />Title (Z-A)</label>
+            <button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button>
         </fieldset>
     </>
   )

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",

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;
 }