Added update/edit support.

2022-06-04 14:37:35 +04:30
parent a28417beeb
commit e57365fd0c
11 changed files with 188 additions and 79 deletions
@@ -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