Added timestamp to each bookmark + Bug fix.

This commit is contained in:
Daniel 2022-06-12 07:18:12 +04:30
parent 870c67027c
commit 25a64dcccc
5 changed files with 82 additions and 49 deletions

View File

@ -75,6 +75,7 @@ function App() {
useEffect(() => {
const sortedData = sortList(data, sortBy);
setData(sortedData);
exitSorting();
// eslint-disable-next-line
}, [sortBy]);

View File

@ -32,12 +32,13 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
<div className='row-name'>
<span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a>
</div>
<div>{e.title}</div>
<div className='title'>{e.title}</div>
<div className="tags">
{e.tag.map((e, i) => {
return (<div key={i}>{e}</div>)
})}
</div>
<div className='date'>{new Date(e.date).toDateString()}</div>
</div>
</div>
<div className='etc'>

View File

@ -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;
const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=nanoid(), title='', date=new Date()) => {
const dateCreated = date.toString();
try {
url = new URL(string);
} catch (_) {
return false;
}
function isValidHttpUrl(string) {
let url;
return url.protocol === "http:" || url.protocol === "https:";
try {
url = new URL(string);
} catch (_) {
return false;
}
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)
}
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;

View File

@ -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;

View File

@ -3,6 +3,10 @@
margin-left: 70px;
}
.tags {
margin: 10px 10px 10px 0px;
}
.img-content-grp {
display: flex;
flex-direction: row;
@ -30,7 +34,10 @@
@media (max-width: 650px) {
.list-entity-content {
margin-top: 50px;
text-align: center;
}
.tags {
margin: 10px auto 10px auto;
}
.list-row {
@ -39,6 +46,7 @@
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: "# ";
}
@ -181,3 +196,10 @@
.delete:active {
box-shadow: 0px 0px 10px rgb(255, 83, 140);
}
.date {
font-weight: 500;
font-size: 0.7rem;
opacity: 80%;
margin-right: auto;
}