Added archive support! (Beta) + UI change

src/App.js

@@ -21,17 +21,17 @@ function App() {
     return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
   });
 
-  useEffect(() => {
-    async function fetchData() {
-      const address = config.client.api_address + ":" + config.server.port;
-      const res = await fetch(address + '/get');
-      const resJSON = await res.json();
-      const Data = resJSON.sort((a, b) => { return b-a });
-      setData(Data);
-    }
+  async function fetchData() {
+    const address = config.api.address + ":" + config.api.port;
+    const res = await fetch(address + '/api');
+    const resJSON = await res.json();
+    const Data = resJSON.sort((a, b) => { return b-a });
+    setData(Data);
+  }
 
+  useEffect(() => {
     fetchData();
-  }, [data]);
+  }, []);
   
   return (
     <div className="App">
@@ -39,8 +39,8 @@ function App() {
         <input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
         <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
       </div>
-      <List data={filteredData} />
-      {isAdding ? <AddModal onExit={exitAdding} /> : null}
+      <List data={filteredData} reFetch={fetchData} />
+      {isAdding ? <AddModal onExit={exitAdding} reFetch={fetchData} /> : null}
     </div>
   );
 }

src/componets/AddModal.js

@@ -1,8 +1,9 @@
 import { useState } from 'react';
+import { nanoid } from 'nanoid'
 import '../styles/Modal.css';
 import config from '../config.json';
 
-const AddModal = ({onExit}) => {
+const AddModal = ({onExit, reFetch}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
   const [tag, setTag] = useState('');
@@ -33,16 +34,17 @@ const AddModal = ({onExit}) => {
     }
 
     if(name !== '' && isValidHttpUrl(link) && tag !== '') {
-      const address = config.client.api_address + ":" + config.server.port;
-      fetch(address + "/post", {
+      const address = config.api.address + ":" + config.api.port;
+      fetch(address + "/api", {
         
         // Adding method type
         method: "POST",
         
         // Adding body or contents to send
         body: JSON.stringify({
+            _id: nanoid(),
             name: name,
-            title: "foo",
+            title: null,
             link: link,
             tag: tag
         }),
@@ -51,7 +53,10 @@ const AddModal = ({onExit}) => {
         headers: {
             "Content-type": "application/json; charset=UTF-8"
         }
-      });
+      })
+      .then(res => res.text())
+      .then(message => {console.log(message)})
+      .then(() => reFetch());
   
       onExit();
     } else if(name !== '' && link !== '' && tag !== '') {

src/componets/List.js

@@ -1,10 +1,10 @@
 import '../styles/List.css';
 import config from '../config.json';
 
-const List = ({data}) => {
+const List = ({data, reFetch}) => {
   function deleteEntity(id) {
-    const address = config.client.api_address + ":" + config.server.port;
-    fetch(address + "/delete", {
+    const address = config.api.address + ":" + config.api.port;
+    fetch(address + "/api", {
     
         // Adding method type
         method: "DELETE",
@@ -19,37 +19,32 @@ const List = ({data}) => {
     })
     .then(res => res.text())
     .then(message => {console.log(message)})
+    .then(() => reFetch())
   }
 
   return (
-    <table className="table">
-        <thead>
-            <tr>
-                <th className='number'>#</th>
-                <th>Name</th>
-                <th>Title</th>
-                <th>Link</th>
-                <th>Tag</th>
-            </tr>
-        </thead>
-        <tbody>
+    <div className="list">
         {data.map((e, i) => {
             try {
-                const url = new URL(e.link)
-                return <tr key={i}>
-                    <td className='number'>{i + 1}</td>
-                    <td>{e.name}</td>
-                    <td>{e.title}</td>
-                    <td><a href={e.link}>{url.hostname}</a></td>
-                    <td>{e.tag}</td>
-                    <td className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</td>
-                </tr>
+                const url = new URL(e.link);
+                const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname;
+                return <div className="list-row">
+                    <div className="img-content-grp">
+                        <img src={favicon} />
+                        <div className="list-entity-content" key={i}>
+                            <div className='row-name'><span className="num">{i + 1}.</span> {e.name}</div>
+                            <div>{e.title}</div>
+                            <div><a href={e.link}>{url.hostname}</a></div>
+                            <div className="tag">{e.tag}</div>
+                        </div>
+                    </div>
+                    <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>
+                </div>
             } catch (e) {
-                console.log(e)
+                console.log(e);
             }
         })}
-        </tbody>
-    </table>
+    </div>
   )
 }
 

src/config.json

@@ -1,11 +1,10 @@
 {
-    "client": {
-        "api_address": "http://localhost"
-    },
-    "server": {
-        "port": 5000,
-        "mongodb_full_address": "mongodb://localhost:27017",
+    "api": {
+        "address": "http://localhost",
+        "port": 5002,
+        "mongodb_URI": "mongodb://localhost:27017",
         "database_name": "sample_db",
-        "collection_name": "list"
+        "collection_name": "list",
+        "storage_location": "/home/danny/Documents"
     }
 }

src/styles/App.css

@@ -1,6 +1,5 @@
 .App {
-  min-height: 96vh;
-  padding: 2vh;
+  min-height: 100vh;
   background-color: #1f2c38;
   color: white;
 }
@@ -10,11 +9,15 @@
 }
 
 .search {
+  border-radius: 10px;
+  margin: 20px 20px 0px 20px;
+  padding: 10px;
   font-family: 'Font Awesome 5 Free';
   font-size: 1.5rem;
   padding-left: 10px;
   border: none;
-  width: 50%;
+  width: 30%;
+  min-width: 450px;
   color: white;
   background-color:#273949;
   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;
@@ -29,6 +32,8 @@
 }
 
 .add-btn {
+  border-radius: 10px;
+  margin: 20px 20px 0px 20px;
   font-family: 'Font Awesome 5 Free';
   padding: 10px;
   font-size: 1.5rem;
@@ -38,7 +43,6 @@
   background-color:#273949;
   border: none;
   margin-left: auto;
-  margin-right: 10px;
   transition: background-color 0.1s;
 }
 

src/styles/List.css

@@ -1,32 +1,47 @@
-.table {
+.list {
   width: 100%;
   text-align: left;
   padding-top: 20px;
   border-spacing: 10px 10px;
 }
 
-.table td {
-  font-size: 1.3rem;
-  padding: 10px;
-  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;
+.list img {
+  margin: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 }
 
-.table th {
-  font-size: 1.6rem;
+.img-content-grp {
+  display: flex;
+  align-items: center;
 }
 
-.table tbody tr:nth-of-type(2n-1) {
+.list-row {
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   background-color:#273949;
-
+  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;
+  margin: 20px;
 }
 
-.table a {
+.list-entity-content {
+  padding: 20px;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+}
+
+.list a {
   text-decoration: none;
   color: rgb(194, 193, 193);
   font-size: 1rem;
 }
 
-.table a:hover {
+.list a:hover {
   text-decoration: underline;
 }
 
@@ -35,6 +50,11 @@
   cursor: pointer;
   transition: background-color 0.1s;
   font-family: 'Font Awesome 5 Free';
+  padding: 10px;
+  width: fit-content;
+  height: fit-content;
+  margin: 10px;
+  border-radius: 10px;
 }
 
 .delete:hover {
@@ -45,6 +65,19 @@
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.number {
-  text-align: center;
+.row-name {
+  font-size: 2rem;
 }
+
+.tag {
+  margin: 10px;
+  border: solid;
+  border-width: 1px;
+  width: fit-content;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+.num {
+  font-size: 1rem;
+}

src/styles/index.css

@@ -5,4 +5,5 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #1f2c38;
 }