From 28f9d1dcfd0f2bb31bf0911a1b175d872ab91108 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 2 Jun 2022 01:48:21 +0430 Subject: [PATCH] Small UI improvements --- public/index.html | 5 ----- src/App.js | 12 ++++++------ src/componets/AddItem.js | 6 +++--- src/componets/List.js | 6 +++--- src/config.js | 10 ++++++++++ src/config.json | 10 ---------- src/styles/AddItem.css | 7 +++++++ src/styles/Filters.css | 23 +++++++++++++++-------- src/styles/Sort.css | 7 +++++++ 9 files changed, 51 insertions(+), 35 deletions(-) create mode 100644 src/config.js delete mode 100644 src/config.json diff --git a/public/index.html b/public/index.html index b188d84..86ac087 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,6 @@ - - diff --git a/src/App.js b/src/App.js index 9a2f7f0..66d378f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import './styles/App.css'; import List from './componets/List'; import AddItem from './componets/AddItem'; -import config from './config.json'; +import config from './config'; import Filters from './componets/Filters'; import Sort from './componets/Sort'; @@ -16,7 +16,7 @@ function App() { [nameChecked, setNameChecked] = useState(true), [descriptionChecked, setDescriptionChecked] = useState(true), [tagsChecked, setTagsChecked] = useState(true), - [sortBy, setSortBy] = useState('Date (Newest first)'); + [sortBy, setSortBy] = useState('Default'); function handleNameCheckbox() { setNameChecked(!nameChecked); @@ -72,7 +72,7 @@ function App() { function sortList(data = data, sortBy = 'Default') { let sortedData = data; if(sortBy === 'Date (Oldest first)') { - sortedData.sort((a, b) => { return b-a }); + sortedData.reverse(); } else if(sortBy === 'Name (A-Z)') { sortedData.sort(function(a, b){ const A = a.name.toLowerCase(), B = b.name.toLowerCase(); @@ -115,10 +115,10 @@ function App() { } async function fetchData() { - const address = config.api.address + ":" + config.api.port; - const res = await fetch(address + '/api'); + 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 }); + const data = resJSON.reverse(); const sortedData = sortList(data, sortBy); setData(sortedData); } diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index 5100f61..a4d5455 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -1,7 +1,7 @@ import { useState } from 'react'; import { nanoid } from 'nanoid' import '../styles/AddItem.css'; -import config from '../config.json'; +import config from '../config'; import TagSelection from './TagSelection'; const AddItem = ({onExit, reFetch, tags}) => { @@ -36,8 +36,8 @@ const AddItem = ({onExit, reFetch, tags}) => { } if(name !== '' && isValidHttpUrl(link) && tag !== '') { - const address = config.api.address + ":" + config.api.port; - fetch(address + "/api", { + const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT; + fetch(ADDRESS + "/api", { // Adding method type method: "POST", diff --git a/src/componets/List.js b/src/componets/List.js index 75aede0..85c2205 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -1,11 +1,11 @@ import '../styles/List.css'; -import config from '../config.json'; +import config from '../config'; import LazyLoad from 'react-lazyload'; const List = ({data, reFetch}) => { function deleteEntity(id) { - const address = config.api.address + ":" + config.api.port; - fetch(address + "/api", { + const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT; + fetch(ADDRESS + "/api", { // Adding method type method: "DELETE", diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..eacfbab --- /dev/null +++ b/src/config.js @@ -0,0 +1,10 @@ +module.exports = { + "API": { + "ADDRESS": "http://localhost", + "PORT": 5000, + "MONGODB_URI": "mongodb://localhost:27017", + "DB_NAME": "sample_db", + "COLLECTION_NAME": "list", + "STORAGE_LOCATION": "/home/danny/Documents" + } +} \ No newline at end of file diff --git a/src/config.json b/src/config.json deleted file mode 100644 index 743b18f..0000000 --- a/src/config.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "api": { - "address": "http://localhost", - "port": 5000, - "mongodb_URI": "mongodb://localhost:27017", - "database_name": "sample_db", - "collection_name": "list", - "storage_location": "/home/danny/Documents" - } -} \ No newline at end of file diff --git a/src/styles/AddItem.css b/src/styles/AddItem.css index c7cbbe0..624fc80 100644 --- a/src/styles/AddItem.css +++ b/src/styles/AddItem.css @@ -1,4 +1,5 @@ .add-overlay { + animation: fadein 0.2s; background-color: black; opacity: 10%; position: fixed; @@ -9,6 +10,7 @@ } .box { + animation: fadein 0.3s; border: solid; border-width: 1px; border-color: rgb(141, 141, 141); @@ -72,4 +74,9 @@ .upload-btn:active { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; +} + +@keyframes fadein { + from { opacity: 0%; } + to { } } \ No newline at end of file diff --git a/src/styles/Filters.css b/src/styles/Filters.css index 939c89a..22763fc 100644 --- a/src/styles/Filters.css +++ b/src/styles/Filters.css @@ -1,4 +1,16 @@ +.filter-overlay { + animation: fadein 0.2s; + background-color: black; + opacity: 10%; + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 100vw; +} + .filter { + animation: fadein 0.3s; border: solid; border-width: 1px; font-weight: 300; @@ -25,12 +37,7 @@ margin: 5px; } -.filter-overlay { - background-color: black; - opacity: 10%; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 100vw; +@keyframes fadein { + from { opacity: 0%; } + to { } } \ No newline at end of file diff --git a/src/styles/Sort.css b/src/styles/Sort.css index 763cb58..3546e8a 100644 --- a/src/styles/Sort.css +++ b/src/styles/Sort.css @@ -1,4 +1,5 @@ .sort-overlay { + animation: fadein 0.2s; background-color: black; opacity: 10%; position: fixed; @@ -9,6 +10,7 @@ } .sort { + animation: fadein 0.3s; border: solid; border-width: 1px; font-weight: 300; @@ -55,4 +57,9 @@ .sort-by-btn:active { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; +} + +@keyframes fadein { + from { opacity: 0%; } + to { } } \ No newline at end of file