Add: simple get tags and create tag

web/src/component/EditTag.js

@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router";
+
+function EditTag() {
+  let params = useParams();
+  const [tag, setTag] = useState({});
+
+  useEffect(() => {
+    fetch("/api/v1/get_tag_info", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setTag(data.tag);
+        }
+      });
+  }, []);
+
+  return (
+    <div className="page">
+      <h3>Edit Tag</h3>
+      <div>
+        <label htmlFor="id">ID</label>
+        <input
+          type="text"
+          disabled
+          name="id"
+          id="id"
+          value={tag.id}
+          onChange={(e) => setTag({ ...tag, id: e.target.value })}
+        />
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          value={tag.name}
+          onChange={(e) => setTag({ ...tag, name: e.target.value })}
+        />
+        <label htmlFor="description">Description</label>
+        <textarea
+          name="description"
+          id="description"
+          value={tag.description}
+          onChange={(e) => setTag({ ...tag, description: e.target.value })}
+        />
+        <button onClick={() => {}}>Save</button>
+      </div>
+    </div>
+  );
+}
+
+export default EditTag;

web/src/component/Manage.js

@@ -24,7 +24,7 @@ function Manage(props) {
       },
       body: JSON.stringify({
         root: walkPath,
-        pattern: patternArray
+        pattern: patternArray,
       }),
     })
       .then((res) => res.json())
@@ -64,6 +64,7 @@ function Manage(props) {
         </button>
       )}
       <hr />
+      <button onClick={() => navigate("/manage/tags")}>Tags</button>
       <h3>Update Database</h3>
       <input
         type="text"

web/src/component/Tags.js

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+function Tags() {
+  const [tags, setTags] = useState([]);
+  const [newTagName, setNewTagName] = useState("");
+  const [newTagDescription, setNewTagDescription] = useState("");
+  const [showAddTag, setShowAddTag] = useState(false);
+
+  function refresh() {
+    fetch("/api/v1/get_tags")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setTags(data.tags);
+        }
+      });
+  }
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  return (
+    <div className="page">
+      <h3>Tags</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tags.map((tag) => (
+            <tr key={tag.id}>
+              <td>{tag.name}</td>
+              <td>{tag.description}</td>
+              <td>
+                <Link to={`/manage/tags/${tag.id}`}>Edit</Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {!showAddTag && (
+        <button onClick={() => setShowAddTag(true)}>Add Tag</button>
+      )}
+      {showAddTag && (
+        <div>
+          <label htmlFor="newTagName">New Tag Name</label>
+          <input
+            type="text"
+            id="newTagName"
+            value={newTagName}
+            onChange={(e) => setNewTagName(e.target.value)}
+          />
+          <label htmlFor="newTagDescription">New Tag Description</label>
+          <textarea
+            id="newTagDescription"
+            value={newTagDescription}
+            onChange={(e) => setNewTagDescription(e.target.value)}
+          />
+          <button
+            onClick={() => {
+              fetch("/api/v1/insert_tag", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  name: newTagName,
+                  description: newTagDescription,
+                }),
+              })
+                .then((res) => res.json())
+                .then((data) => {
+                  if (data.error) {
+                    alert(data.error);
+                  } else {
+                    setNewTagName("");
+                    setNewTagDescription("");
+                    refresh();
+                  }
+                });
+            }}
+          >
+            Create Tag
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Tags;