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

@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router";
+
+function FoldersTable(props) {
+  let navigate = useNavigate();
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Folder name</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.folders.map((folder) => (
+          <tr key={folder.id}>
+            <td
+              onClick={() => navigate(`/search-folders/${folder.id}`)}
+              className="clickable"
+            >
+              {folder.foldername}
+            </td>
+            <td onClick={() => navigate(`/search-folders/${folder.id}`)}>
+              <button>View</button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default FoldersTable;