Added timestamp to each bookmark + Bug fix.

src/App.js

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

src/componets/List.js

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

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

src/modules/sortList.js

@@ -1,9 +1,15 @@
 const sortList = (data, sortBy) => {
     let sortedData = data;
-    if(sortBy === 'Date (Oldest first)') {
+    if(sortBy === 'Default') {
-      sortedData.reverse();
+      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;

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,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;
+}