Directory allocation

2022-05-10 20:05:43 +04:30
parent 2511082f14
commit 9a0c383e0b
21 changed files with 26 additions and 26 deletions
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import '../styles/Modal.css';
+
+const AddModal = ({onExit}) => {
+  const [name, setName] = useState('');
+  const [link, setLink] = useState('');
+  const [tag, setTag] = useState('');
+
+  function SetName(e) {
+    setName(e.target.value);
+  }
+
+  function SetLink(e) {
+    setLink(e.target.value);
+  }
+
+  function SetTag(e) {
+    setTag(e.target.value);
+  }
+
+  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 != '') {
+      fetch("/post", {
+        
+        // Adding method type
+        method: "POST",
+        
+        // Adding body or contents to send
+        body: JSON.stringify({
+            name: name,
+            title: "foo",
+            link: link,
+            tag: tag
+        }),
+        
+        // Adding headers to the request
+        headers: {
+            "Content-type": "application/json; charset=UTF-8"
+        }
+      });
+  
+      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 == "overlay" || e.target.className == "cancel-btn") {
+      onExit();
+    }
+  }
+
+  return (
+    <div className='overlay' onClick={abort}>
+      <div className='box'>
+        <div className='modal-content'>
+          <h2>Add Bookmark</h2>
+          <h3>Name:</h3>
+          <input onChange={SetName} className="modal-input" type="search" placeholder="e.g. Example Tutorial"/>
+          <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"/>
+          <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
+          <button className="cancel-btn">Cancel</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AddModal
@@ -0,0 +1,54 @@
+import '../styles/List.css';
+
+const List = ({data}) => {
+  function deleteEntity(id) {
+    fetch("/delete", {
+    
+        // 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)})
+  }
+
+  return (
+    <table className="table">
+        <thead>
+            <tr>
+                <th className='number'>#</th>
+                <th>Name</th>
+                <th>Title</th>
+                <th>Link</th>
+                <th>Tag</th>
+            </tr>
+        </thead>
+        <tbody>
+        {data.map((e, i) => {
+            try {
+                const url = new URL(e.link)
+                return <tr key={i}>
+                    <td className='number'>{i + 1}</td>
+                    <td>{e.name}</td>
+                    <td>{e.title}</td>
+                    <td><a href={e.link}>{url.hostname}</a></td>
+                    <td>{e.tag}</td>
+                    <td className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</td>
+                </tr>
+            } catch (e) {
+                console.log(e)
+            }
+        })}
+        </tbody>
+    </table>
+  )
+}
+
+export default List