From 135d7c25a99de1618642256e470d1b8bd3f9d9a5 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 2 Jun 2022 18:01:53 +0430 Subject: [PATCH] Code improvements --- api/modules/getData.js | 8 ++-- api/server.js | 12 +++--- src/App.js | 81 +++------------------------------------ src/modules/concatTags.js | 13 +++++++ src/modules/filterData.js | 22 +++++++++++ src/modules/sortList.js | 46 ++++++++++++++++++++++ src/styles/App.css | 1 + src/styles/Filters.css | 16 +++++++- src/styles/Sort.css | 6 +-- 9 files changed, 113 insertions(+), 92 deletions(-) create mode 100644 src/modules/concatTags.js create mode 100644 src/modules/filterData.js create mode 100644 src/modules/sortList.js diff --git a/api/modules/getData.js b/api/modules/getData.js index 708ad5d..87e970f 100644 --- a/api/modules/getData.js +++ b/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 pdfDirectory = config.api.storage_location + '/Webmarker/pdf\'s/'; +const screenshotDirectory = config.API.STORAGE_LOCATION + '/Webmarker/screenshot\'s/'; +const pdfDirectory = config.API.STORAGE_LOCATION + '/Webmarker/pdf\'s/'; if (!fs.existsSync(screenshotDirectory)){ fs.mkdirSync(screenshotDirectory, { recursive: true }); @@ -32,4 +32,4 @@ module.exports = async (link, id) => { await browser.close(); return title; -} \ No newline at end of file +} diff --git a/api/server.js b/api/server.js index 0081c4b..13f8f1c 100644 --- a/api/server.js +++ b/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 database = config.api.database_name; -const collection = config.api.collection_name; +const URI = config.API.MONGODB_URI; +const database = config.API.DB_NAME; +const collection = config.API.COLLECTION_NAME; const client = new MongoClient(URI); @@ -88,4 +88,4 @@ async function deleteDoc(doc) { app.listen(port, () => { console.log(`Success! running on port ${port}.`); client.connect(); -}); \ No newline at end of file +}); diff --git a/src/App.js b/src/App.js index 66d378f..700adeb 100644 --- a/src/App.js +++ b/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 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; - } + const filteredData = filter(data, searchQuery, nameChecked, tagsChecked, descriptionChecked); 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 ? concatTags(data)} /> : null} ); diff --git a/src/modules/concatTags.js b/src/modules/concatTags.js new file mode 100644 index 0000000..2c9ad4f --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/modules/filterData.js b/src/modules/filterData.js new file mode 100644 index 0000000..0795503 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/modules/sortList.js b/src/modules/sortList.js new file mode 100644 index 0000000..3cbf1d2 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/styles/App.css b/src/styles/App.css index bae9b37..ec58622 100644 --- a/src/styles/App.css +++ b/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'; diff --git a/src/styles/Filters.css b/src/styles/Filters.css index 22763fc..512486d 100644 --- a/src/styles/Filters.css +++ b/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 { diff --git a/src/styles/Sort.css b/src/styles/Sort.css index 3546e8a..95f0d50 100644 --- a/src/styles/Sort.css +++ b/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;