Added fully archive support!

src/componets/AddItem.js

@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import { nanoid } from 'nanoid'
 import '../styles/AddItem.css';
-import config from '../config';
 import TagSelection from './TagSelection';
+import addItem from '../modules/addItem';
 
 const AddItem = ({onExit, reFetch, tags}) => {
   const [name, setName] = useState('');
@@ -22,54 +21,6 @@ const AddItem = ({onExit, reFetch, tags}) => {
     setTag(value.map(e => e.value.toLowerCase()));
   }
 
-  async function submitBookmark() {
-    function isValidHttpUrl(string) {
-      let url;
-      
-      try {
-        url = new URL(string);
-      } catch (_) {
-        return false;  
-      }
-    
-      return url.protocol === "http:" || url.protocol === "https:";
-    }
-
-    if(name !== '' && isValidHttpUrl(link) && tag !== '') {
-      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: '',
-            link: link,
-            tag: tag
-        }),
-        
-        // Adding headers to the request
-        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 !== '') {
-      alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
-    }
-
-    else {
-      alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
-    }
-  }
-
   function abort(e) {
     if (e.target.className === "add-overlay") {
       onExit();
@@ -88,11 +39,11 @@ const AddItem = ({onExit, reFetch, tags}) => {
           <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tags:</h3>
           <TagSelection setTags={SetTags} tags={tags} />
-          <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
+          <button onClick={() => addItem(name, link, tag, reFetch, onExit)} className="upload-btn">Upload &#xf093;</button>
         </div>
       </fieldset>
     </>
   )
 }
 
-export default AddItem
+export default AddItem;

src/componets/List.js

@@ -1,28 +1,9 @@
 import '../styles/List.css';
-import config from '../config';
 import LazyLoad from 'react-lazyload';
+import ViewArchived from './ViewArchived';
+import deleteEntity from '../modules/deleteEntity';
 
 const List = ({data, reFetch}) => {
-  function deleteEntity(id) {
-    const ADDRESS = config.API.ADDRESS + ":" + config.API.PORT;
-    fetch(ADDRESS + "/api", {
-    
-        // Adding method type
-        method: "DELETE",
-        
-        // Adding body or contents to send
-        body: JSON.stringify({id}),
-        
-        // Adding headers to the request
-        headers: {
-            "Content-type": "application/json; charset=UTF-8",
-        }
-    })
-    .then(res => res.text())
-    .then(message => {console.log(message)})
-    .then(() => reFetch())
-  }
-
   return (
     <div className="list">
         {data.map((e, i) => {
@@ -34,7 +15,9 @@ const List = ({data, reFetch}) => {
                         <div className="img-content-grp">
                             <img src={favicon} />
                             <div className="list-entity-content">
-                                <div className='row-name'><span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a></div>
+                                <div className='row-name'>
+                                    <span className="num">{i + 1}.</span> {e.name} <a target="_blank" href={e.link}>({url.hostname})</a>
+                                </div>
                                 <div>{e.title}</div>
                                 <div className="tags">
                                     {e.tag.map((e, i) => {
@@ -43,7 +26,10 @@ const List = ({data, reFetch}) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>
+                        <div className='options'>
+                            <ViewArchived className='view-archived' id={e._id} />
+                            <div className="delete" onClick={() => deleteEntity(e._id, reFetch)}>&#xf2ed;</div>
+                        </div>
                     </div>
                 </LazyLoad>
             } catch (e) {

src/componets/ViewArchived.js

@@ -0,0 +1,17 @@
+import '../styles/ViewArchived.css';
+import config from '../config';
+
+const ViewArchived = ({ id }) => {
+    const screenshotPath = config.API.ADDRESS + ":" + config.API.PORT + '/screenshots/' + id + '.png';
+    const pdfPath = config.API.ADDRESS + ":" + config.API.PORT + '/pdfs/' + id + '.pdf';
+
+  return (
+    <div className='view-archived'>
+        <a href={screenshotPath} target='_blank'>Screenshot</a>
+        <hr className='seperator' />
+        <a href={pdfPath} target='_blank'>PDF</a>
+    </div>
+  )
+}
+
+export default ViewArchived;