Added update/edit support.

src/componets/AddItem.js

@@ -1,16 +1,16 @@
 import { useState } from 'react';
 import '../styles/AddItem.css';
 import TagSelection from './TagSelection';
-import addItem from '../modules/addItem';
+import addItem from '../modules/send';
 
 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);
+    addItem(name, link, tag, reFetch, onExit, SetLoader, "POST");
   }
 
   function SetName(e) {

src/componets/EditItem.js

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import deleteEntity from '../modules/deleteEntity';
+import '../styles/AddItem.css';
+import TagSelection from './TagSelection';
+import editItem from '../modules/send';
+
+// deleteEntity(e._id, reFetch)
+
+const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
+  const [name, setName] = useState(item.name);
+  const [tag, setTag] = useState(item.tag);
+
+  function EditItem() {
+    SetLoader(true)
+    editItem(name, item.link, tag, reFetch, onExit, SetLoader, "PUT", item._id);
+  }
+
+  function deleteItem() {
+    SetLoader(true)
+    deleteEntity(item._id, reFetch, onExit, SetLoader)
+  }
+
+  function SetName(e) {
+    setName(e.target.value);
+  }
+
+  function SetTags(value) {
+    setTag(value);
+    setTag(value.map(e => e.value.toLowerCase()));
+  }
+
+  function abort(e) {
+    if (e.target.className === "add-overlay") {
+      onExit();
+    }
+  }
+
+  const url = new URL(item.link);
+
+  return (
+    <>
+      <div className='add-overlay' onClick={abort}></div>
+      <fieldset className='box'>
+        <legend >Edit bookmark</legend>
+        <button className="edit-btn delete" onClick={deleteItem}>&#xf2ed;</button>
+        <div className='AddItem-content'>
+        <h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
+        <h3>{item.title}</h3>
+        
+          <h3>Name:</h3>
+          <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
+          <h3>Tags:</h3>
+          <TagSelection setTags={SetTags} tags={tags} tag={tag} />
+          <button onClick={EditItem} className="upload-btn">Update &#xf093;</button>
+        </div>
+      </fieldset>
+    </>
+  )
+}
+
+export default EditItem

src/componets/List.js

@@ -1,44 +1,58 @@
 import '../styles/List.css';
 import LazyLoad from 'react-lazyload';
 import ViewArchived from './ViewArchived';
-import deleteEntity from '../modules/deleteEntity';
+import EditItem from './EditItem';
+import { useState } from 'react'
 
-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}>
-                    <div className="list-row">
-                        <div className="img-content-grp">
-                            <img alt='' src={favicon} />
-                            <div className="list-entity-content">
-                                <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="tags">
-                                    {e.tag.map((e, i) => {
-                                        return (<div key={i}>{e}</div>)
-                                    })}
+const List = ({data, tags, reFetch, SetLoader}) => {
+    const [editBox, setEditBox] = useState(false)
+    const [editIndex, setEditIndex] = useState(0)
+
+    function edit(index) {
+        setEditBox(true);
+        setEditIndex(index);
+    }
+
+    function exitEditing() {
+        setEditBox(false);
+    }
+
+    return (
+        <div className="list">
+            {/* eslint-disable-next-line */}
+            {data.map((e, i, array) => {
+                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}>
+                        <div className="list-row">
+                            <div className="img-content-grp">
+                                <img alt='' src={favicon} />
+                                <div className="list-entity-content">
+                                    <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="tags">
+                                        {e.tag.map((e, i) => {
+                                            return (<div key={i}>{e}</div>)
+                                        })}
+                                    </div>
                                 </div>
                             </div>
+                            <div className='etc'>
+                                <ViewArchived className='view-archived' id={e._id} />
+                                <button className="edit-btn" onClick={() => edit(i)}>&#xf044;</button>
+                            </div>
                         </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) {
-                console.log(e);
-            }
-        })}
-    </div>
-  )
+                    </LazyLoad>)
+                } catch (e) {
+                    console.log(e);
+                }
+            })}
+            {editBox ? <EditItem tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
+        </div>
+    )
 }
 
 export default List

src/componets/TagSelection.js

@@ -42,13 +42,17 @@ const customStyles = {
   }),
 }
 
-export default function TagSelection({setTags, tags}) {
+export default function TagSelection({setTags, tags, tag=[]}) {
   const data = tags().map((e) => {
       return { value: e, label: e }
   })
+  const defaultTags = tag.map((e) => {
+    return { value: e, label: e }
+})
 
   return (
     <CreatableSelect
+        defaultValue={defaultTags}
         styles={customStyles}
         isMulti
         onChange={setTags}