Rewrite web front-end using React

This is a big commit, some font-end function are still working,
including manage, error handle, as others.

web/src/component/Share.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import FilesTable from "./FilesTable";
+
+function Share(props) {
+  let params = useParams();
+  const [file, setFile] = useState([]);
+  useEffect(() => {
+    fetch("/api/v1/get_file_info", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        id: parseInt(params.id),
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setFile([data]);
+      });
+  }, [params]);
+  return (
+    <div className="page">
+      <h3>Share with others! {params.id}</h3>
+      <p>
+        Share link: <a href={window.location.href}>{window.location.href}</a>
+      </p>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={file} />
+    </div>
+  );
+}
+
+export default Share;