Added loader + Improvements.

src/componets/AddItem.js

@@ -3,11 +3,16 @@ import '../styles/AddItem.css';
 import TagSelection from './TagSelection';
 import addItem from '../modules/addItem';
 
-const AddItem = ({onExit, reFetch, tags}) => {
+const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
   const [tag, setTag] = useState([]);
 
+  function newItem() {
+    SetLoader(true)
+    addItem(name, link, tag, reFetch, onExit, SetLoader);
+  }
+
   function SetName(e) {
     setName(e.target.value);
   }
@@ -39,7 +44,7 @@ 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={() => addItem(name, link, tag, reFetch, onExit)} className="upload-btn">Upload &#xf093;</button>
+          <button onClick={newItem} className="upload-btn">Upload &#xf093;</button>
         </div>
       </fieldset>
     </>

src/componets/List.js

@@ -6,22 +6,23 @@ import deleteEntity from '../modules/deleteEntity';
 const List = ({data, reFetch}) => {
   return (
     <div className="list">
+        {/* eslint-disable-next-line */}
         {data.map((e, i) => {
             try {
                 const url = new URL(e.link);
                 const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname;
-                return <LazyLoad key={i} height={200} offset={200}>
+                return (<LazyLoad key={i} height={200} offset={200}>
                     <div className="list-row">
                         <div className="img-content-grp">
-                            <img src={favicon} />
+                            <img alt='' 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>
+                                    <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="tags">
                                     {e.tag.map((e, i) => {
-                                        return <div key={i}>{e}</div>
+                                        return (<div key={i}>{e}</div>)
                                     })}
                                 </div>
                             </div>
@@ -31,7 +32,7 @@ const List = ({data, reFetch}) => {
                             <div className="delete" onClick={() => deleteEntity(e._id, reFetch)}>&#xf2ed;</div>
                         </div>
                     </div>
-                </LazyLoad>
+                </LazyLoad>)
             } catch (e) {
                 console.log(e);
             }

src/componets/Loader.js

@@ -0,0 +1,13 @@
+import '../styles/Loader.css';
+import { InfinitySpin } from  'react-loader-spinner'
+
+
+const Loader = () => {
+  return (
+    <div className='loader'>
+      <InfinitySpin color="white" />
+    </div>
+  )
+}
+
+export default Loader

src/componets/NoResults.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const NoResults = () => {
+  return (
+    <div className='no-results'>
+        <h1>¯\_(ツ)_/¯</h1>
+        <p>Nothing found.</p>
+    </div>
+  )
+}
+
+export default NoResults;

src/componets/TagSelection.js

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import CreatableSelect from "react-select/creatable";
 
 const customStyles = {
@@ -7,6 +6,11 @@ const customStyles = {
     color: '#a9a9a9',
   }),
 
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: 'gray',
+  }),
+
   indicatorSeparator: (provided) => ({
     ...provided,
     display: 'none',
@@ -17,7 +21,7 @@ const customStyles = {
     border: 'solid',
     borderWidth: '1px',
     borderRadius: '0px',
-    borderColor: 'rgb(80, 80, 80)',
+    borderColor: 'rgb(141, 141, 141)',
     opacity: '90%',
     color: 'gray',
     background: '#273949',

src/componets/ViewArchived.js

@@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {
 
   return (
     <div className='view-archived'>
-        <a href={screenshotPath} target='_blank'>Screenshot</a>
+        <a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
         <hr className='seperator' />
-        <a href={pdfPath} target='_blank'>PDF</a>
+        <a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
     </div>
   )
 }