Code improvements

api/modules/getData.js

@@ -1,11 +1,11 @@
 const puppeteer = require('puppeteer');
 const { PuppeteerBlocker } = require('@cliqz/adblocker-puppeteer');
 const fetch = require('cross-fetch');
-const config = require('../../src/config.json');
+const config = require('../../src/config.js');
 const fs = require('fs');
 
-const screenshotDirectory = config.api.storage_location + '/Webmarker/screenshot\'s/';
+const screenshotDirectory = config.API.STORAGE_LOCATION + '/Webmarker/screenshot\'s/';
-const pdfDirectory = config.api.storage_location + '/Webmarker/pdf\'s/';
+const pdfDirectory = config.API.STORAGE_LOCATION + '/Webmarker/pdf\'s/';
 
 if (!fs.existsSync(screenshotDirectory)){
   fs.mkdirSync(screenshotDirectory, { recursive: true });

api/server.js

@@ -2,14 +2,14 @@ const express = require('express');
 const app = express();
 const { MongoClient } = require('mongodb');
 const cors = require('cors');
-const config = require('../src/config.json');
+const config = require('../src/config.js');
 const getData = require('./modules/getData.js')
 
-const port = config.api.port;
+const port = config.API.PORT;
 
-const URI = config.api.mongodb_URI;
+const URI = config.API.MONGODB_URI;
-const database = config.api.database_name;
+const database = config.API.DB_NAME;
-const collection = config.api.collection_name;
+const collection = config.API.COLLECTION_NAME;
 
 const client = new MongoClient(URI);
 

src/App.js

@@ -5,6 +5,9 @@ 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';
 
 function App() {
   const [data, setData] = useState([]),
@@ -50,69 +53,7 @@ function App() {
     setSortBy(e)
   }
   
-  const filteredData = data.filter((e) => {
+  const filteredData = filter(data, searchQuery, nameChecked, tagsChecked, descriptionChecked);
-    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) || (!nameChecked && !tagsChecked && !descriptionChecked)) {
-      return (name || title || tags);
-    } else if(nameChecked && tagsChecked) {
-      return (name || tags);
-    } else if(nameChecked && descriptionChecked) {
-      return (name || title);
-    } else if(tagsChecked && descriptionChecked) {
-      return (tags || title);
-    } 
-    else if(nameChecked) { return name } 
-    else if(tagsChecked) { return tags }
-    else if(descriptionChecked) { return title }
-  });
-
-  function sortList(data = data, sortBy = 'Default') {
-    let sortedData = data;
-    if(sortBy === 'Date (Oldest first)') {
-      sortedData.reverse();
-    } 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;
@@ -123,18 +64,6 @@ function App() {
     setData(sortedData);
   }
 
-  const concatTags = () => {
-    let tags = [];
-
-    for (let i = 0; i < data.length; i++) {
-      tags = tags.concat(data[i].tag)
-    }
-
-    tags = tags.filter((v, i, a) => a.indexOf(v) === i);
-
-    return tags;
-  }
-
   useEffect(() => {
     fetchData();
   }, [sortBy]);
@@ -174,7 +103,7 @@ function App() {
       {newBox ? <AddItem 
         onExit={exitAdding} 
         reFetch={fetchData} 
-        tags={concatTags} 
+        tags={() => concatTags(data)} 
       /> : null}
     </div>
   );

src/modules/concatTags.js

@@ -0,0 +1,13 @@
+const concatTags = (data) => {
+    let tags = [];
+
+    for (let i = 0; i < data.length; i++) {
+      tags = tags.concat(data[i].tag)
+    }
+
+    tags = tags.filter((v, i, a) => a.indexOf(v) === i);
+
+    return tags;
+}
+
+export default concatTags;

src/modules/filterData.js

@@ -0,0 +1,22 @@
+const filteredData = (data, searchQuery, nameChecked, tagsChecked, descriptionChecked) => {
+    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)) {
+          return (name || title || tags);
+        } else if(nameChecked && tagsChecked) {
+          return (name || tags);
+        } else if(nameChecked && descriptionChecked) {
+          return (name || title);
+        } else if(tagsChecked && descriptionChecked) {
+          return (tags || title);
+        } 
+        else if(nameChecked) { return name } 
+        else if(tagsChecked) { return tags }
+        else if(descriptionChecked) { return title }
+    });
+}
+
+export default filteredData;

src/modules/sortList.js

@@ -0,0 +1,46 @@
+const sortList = (data, sortBy) => {
+    let sortedData = data;
+    if(sortBy === 'Date (Oldest first)') {
+      sortedData.reverse();
+    } 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;
+}
+
+export default sortList;

src/styles/App.css

@@ -27,6 +27,7 @@
 }
 
 .btn {
+  position: relative;
   border-radius: 100%;
   margin: 20px 20px 0px auto;
   font-family: 'Font Awesome 5 Free';

src/styles/Filters.css

@@ -33,8 +33,22 @@
     font-weight: 600;
 }
 
-.filter label {
+.filter > label {
     margin: 5px;
+    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;
+}
+
+.filter label:active {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
 @keyframes fadein {

src/styles/Sort.css

@@ -33,13 +33,9 @@
     font-weight: 600;
 }
 
-.sort label {
-    margin: 5px;
-}
-
 .sort-by-btn {
+    margin: 5px;
     text-align: left;
-    margin-bottom: 5px;
     font-family: 'Font Awesome 5 Free';
     padding: 10px;
     font-size: 1.1rem;