From 25a64dcccc088128f0b007cc987b9989e74f9c8b Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 12 Jun 2022 07:18:12 +0430 Subject: [PATCH] Added timestamp to each bookmark + Bug fix. --- src/App.js | 1 + src/componets/List.js | 3 +- src/modules/send.js | 77 +++++++++++++++++++++-------------------- src/modules/sortList.js | 18 ++++++---- src/styles/List.css | 32 ++++++++++++++--- 5 files changed, 82 insertions(+), 49 deletions(-) diff --git a/src/App.js b/src/App.js index c657d27..0d9d115 100644 --- a/src/App.js +++ b/src/App.js @@ -75,6 +75,7 @@ function App() { useEffect(() => { const sortedData = sortList(data, sortBy); setData(sortedData); + exitSorting(); // eslint-disable-next-line }, [sortBy]); diff --git a/src/componets/List.js b/src/componets/List.js index 1cae087..c408671 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -32,12 +32,13 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
{i + 1}. {e.name} ({url.hostname})
-
{e.title}
+
{e.title}
{e.tag.map((e, i) => { return (
{e}
) })}
+
{new Date(e.date).toDateString()}
diff --git a/src/modules/send.js b/src/modules/send.js index ee822df..bb3c070 100644 --- a/src/modules/send.js +++ b/src/modules/send.js @@ -1,45 +1,48 @@ import config from '../config'; import { nanoid } from 'nanoid'; -const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=nanoid(), title='') => { - function isValidHttpUrl(string) { - let url; - - try { - url = new URL(string); - } catch (_) { - return false; - } +const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=nanoid(), title='', date=new Date()) => { + const dateCreated = date.toString(); + + function isValidHttpUrl(string) { + let url; - return url.protocol === "http:" || url.protocol === "https:"; - } - - if(isValidHttpUrl(link)) { - const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT; - fetch(ADDRESS + "/api", { - method: method, - body: JSON.stringify({ - _id: id, - name: name, - title: title, - link: link, - tag: tag - }), - headers: { - "Content-type": "application/json; charset=UTF-8" - } - }) - .then(res => res.text()) - .then(() => reFetch()) - .then(() => {SetLoader(false)}); - - onExit(); - } else if(!isValidHttpUrl(link) && link !== '') { - SetLoader(false) - alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")'); - } else { - SetLoader(false) + try { + url = new URL(string); + } catch (_) { + return false; } + + return url.protocol === "http:" || url.protocol === "https:"; } + if(isValidHttpUrl(link)) { + const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT; + fetch(ADDRESS + "/api", { + method: method, + body: JSON.stringify({ + _id: id, + name: name, + title: title, + link: link, + tag: tag, + date: dateCreated + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + .then(res => res.text()) + .then(() => reFetch()) + .then(() => {SetLoader(false)}); + + onExit(); + } else if(!isValidHttpUrl(link) && link !== '') { + SetLoader(false) + alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")'); + } else { + SetLoader(false) + } +} + export default addItem; \ No newline at end of file diff --git a/src/modules/sortList.js b/src/modules/sortList.js index 3cbf1d2..a44a616 100644 --- a/src/modules/sortList.js +++ b/src/modules/sortList.js @@ -1,9 +1,15 @@ const sortList = (data, sortBy) => { let sortedData = data; - if(sortBy === 'Date (Oldest first)') { - sortedData.reverse(); + if(sortBy === 'Default') { + sortedData.sort((a, b) => { + return new Date(b.date) - new Date(a.date); + }); + } else if(sortBy === 'Date (Oldest first)') { + sortedData.sort((a,b) => { + return new Date(a.date) - new Date(b.date); + }); } else if(sortBy === 'Name (A-Z)') { - sortedData.sort(function(a, b){ + sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); if (A < B) return -1; @@ -12,7 +18,7 @@ const sortList = (data, sortBy) => { return 0; }); } else if(sortBy === 'Name (Z-A)') { - sortedData.sort(function(a, b){ + sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); if (A > B) return -1; @@ -21,7 +27,7 @@ const sortList = (data, sortBy) => { return 0; }); } else if(sortBy === 'Title (A-Z)') { - sortedData.sort(function(a, b){ + sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); if (A < B) return -1; @@ -30,7 +36,7 @@ const sortList = (data, sortBy) => { return 0; }); } else if(sortBy === 'Title (Z-A)') { - sortedData.sort(function(a, b){ + sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); if (A > B) return -1; diff --git a/src/styles/List.css b/src/styles/List.css index b6c6af8..edba6ea 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -3,6 +3,10 @@ margin-left: 70px; } + .tags { + margin: 10px 10px 10px 0px; + } + .img-content-grp { display: flex; flex-direction: row; @@ -30,15 +34,19 @@ @media (max-width: 650px) { .list-entity-content { margin-top: 50px; - text-align: center; } + .tags { + margin: 10px auto 10px auto; + } + .list-row { margin-top: 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; + text-align: center; 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; } .etc { @@ -55,6 +63,15 @@ .list a { text-decoration: underline; } + + .date { + margin-left: auto; + } + + .title { + margin-right: auto; + margin-left: auto; + } } .list { @@ -129,10 +146,8 @@ .tags { display: flex; - margin: 10px; border-width: 1px; width: fit-content; - padding: 10px; font-size: 1rem; border-radius: 5px; flex-wrap: wrap; @@ -144,7 +159,7 @@ .tags div::before { - color: rgb(35, 112, 156); + color: rgb(42, 125, 172); content: "# "; } @@ -180,4 +195,11 @@ .delete:active { box-shadow: 0px 0px 10px rgb(255, 83, 140); -} \ No newline at end of file +} + +.date { + font-weight: 500; + font-size: 0.7rem; + opacity: 80%; + margin-right: auto; +}