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,7 +1,9 @@
 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()) => {
+  const dateCreated = date.toString();
+
   function isValidHttpUrl(string) {
     let url;
     
@@ -23,7 +25,8 @@ const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=n
           name: name,
           title: title,
           link: link,
-            tag: tag
+          tag: tag,
+          date: dateCreated
       }),
       headers: {
           "Content-type": "application/json; charset=UTF-8"

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;

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