Small UI improvements

public/index.html

@@ -4,11 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

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 ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-    const res = await fetch(address + '/api');
+    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);
   }

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;
+      const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-      fetch(address + "/api", {
+      fetch(ADDRESS + "/api", {
         
         // Adding method type
         method: "POST",

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;
+    const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-    fetch(address + "/api", {
+    fetch(ADDRESS + "/api", {
     
         // Adding method type
         method: "DELETE",

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"
+    }
+}

src/config.json

@@ -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"
-    }
-}

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);
@@ -73,3 +75,8 @@
 .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   {  }
+}

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 {
+@keyframes fadein {
-    background-color: black;
+    from { opacity: 0%; }
-    opacity: 10%;
+    to   {  }
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100vw;
 }

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;
@@ -56,3 +58,8 @@
 .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   {  }
+}