Add: support walk database with tags

web/src/component/Manage.js

@@ -1,38 +1,9 @@
-import { useState } from "react";
 import { useNavigate } from "react-router";
+import Database from "./Database";
 
 function Manage(props) {
   let navigate = useNavigate();
 
-  const [walkPath, setWalkPath] = useState("");
-  const [patternString, setPatternString] = useState("");
-
-  function updateDatabase() {
-    // split pattern string into array
-    let patternArray = patternString.split(" ");
-    // remove whitespace from array
-    patternArray = patternArray.map((item) => item.trim());
-    // remove empty strings from array
-    patternArray = patternArray.filter((item) => item !== "");
-    // add dot before item array
-    patternArray = patternArray.map((item) => "." + item);
-
-    fetch("/api/v1/walk", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        root: walkPath,
-        pattern: patternArray,
-      }),
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        console.log(data);
-      });
-  }
-
   return (
     <div>
       <h2>Manage</h2>
@@ -65,26 +36,7 @@ function Manage(props) {
       )}
       <hr />
       <button onClick={() => navigate("/manage/tags")}>Tags</button>
-      <h3>Update Database</h3>
-      <input
-        type="text"
-        value={walkPath}
-        placeholder="walk path"
-        onChange={(e) => setWalkPath(e.target.value)}
-      />
-      <input
-        type="text"
-        value={patternString}
-        placeholder="pattern wav flac mp3"
-        onChange={(e) => setPatternString(e.target.value)}
-      />
-      <button
-        onClick={() => {
-          updateDatabase();
-        }}
-      >
-        Update Database
-      </button>
+      <Database />
     </div>
   );
 }