Multi tags support! (Beta) + Bug fix

src/componets/AddModal.js

@@ -6,7 +6,7 @@ import config from '../config.json';
 const AddModal = ({onExit, reFetch}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
-  const [tag, setTag] = useState('');
+  const [tag, setTag] = useState([]);
 
   function SetName(e) {
     setName(e.target.value);
@@ -17,7 +17,8 @@ const AddModal = ({onExit, reFetch}) => {
   }
 
   function SetTag(e) {
-    setTag(e.target.value);
+    setTag([e.target.value]);
+    setTag(e.target.value.split(/(\s+)/).filter( e => e.trim().length > 0).map(e => e.toLowerCase()))
   }
 
   async function submitBookmark() {
@@ -44,7 +45,7 @@ const AddModal = ({onExit, reFetch}) => {
         body: JSON.stringify({
             _id: nanoid(),
             name: name,
-            title: null,
+            title: '',
             link: link,
             tag: tag
         }),
@@ -84,7 +85,7 @@ const AddModal = ({onExit, reFetch}) => {
           <h3>Link:</h3>
           <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tag:</h3>
-          <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/>
+          <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/>
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
           <button className="cancel-btn">Cancel</button>
         </div>

src/componets/List.js

@@ -34,10 +34,13 @@ 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}</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><a href={e.link}>{url.hostname}</a></div>
-                                <div className="tag">{e.tag}</div>
+                                <div className="tags">
+                                    {e.tag.map((e, i) => {
+                                        return <div key={i}>{e}</div>
+                                    })}
+                                </div>
                             </div>
                         </div>
                         <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>