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/GetRandomFiles.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import FilesTable from "./FilesTable";
+
+function GetRandomFiles(props) {
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  function refresh(setFiles) {
+    setIsLoading(true);
+    fetch("/api/v1/get_random_files")
+      .then((response) => response.json())
+      .then((data) => {
+        setIsLoading(false);
+        setFiles(data.files);
+      });
+  }
+
+  useEffect(() => {
+    refresh(setFiles);
+  }, []);
+  return (
+    <div className="page">
+      <div className="search_toolbar">
+        <button className="refresh" onClick={() => refresh(setFiles)}>
+          {isLoading ? "Loading..." : "Refresh"}
+        </button>
+      </div>
+      <FilesTable setPlayingFile={props.setPlayingFile} files={files} />
+    </div>
+  );
+}
+
+export default GetRandomFiles;