add route for search folders

"q": string, foldername to search
"o": int, offset of search result

web/src/component/SearchFolders.js

@@ -1,10 +1,15 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "./Common";
 import FoldersTable from "./FoldersTable";
 
 function SearchFolders() {
-  const [foldername, setFoldername] = useState("");
+  const navigator = useNavigate();
+  const query = useQuery();
+  const foldername = query.get("q") || "";
+  const [foldernameInput, setFoldernameInput] = useState(foldername);
   const [folders, setFolders] = useState([]);
-  const [offset, setOffset] = useState(0);
+  const offset = parseInt(query.get("o")) || 0;
   const [isLoading, setIsLoading] = useState(false);
   const limit = 10;
 
@@ -35,7 +40,7 @@ function SearchFolders() {
   }
 
   function nextPage() {
-    setOffset(offset + limit);
+    navigator(`/folders?q=${foldername}&o=${offset + limit}`);
   }
 
   function lastPage() {
@@ -43,29 +48,29 @@ function SearchFolders() {
     if (offsetValue < 0) {
       return;
     }
-    setOffset(offsetValue);
+    navigator(`/folders?q=${foldername}&o=${offsetValue}`);
   }
 
-  useEffect(() => searchFolder(), [offset]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => searchFolder(), [offset, foldername]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="page">
       <h3>Search Folders</h3>
       <div className="search_toolbar">
         <input
-          onChange={(event) => setFoldername(event.target.value)}
+          onChange={(event) => setFoldernameInput(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
-              searchFolder();
+              navigator(`/folders?q=${foldernameInput}&o=0`);
             }
           }}
           type="text"
           placeholder="Enter folder name"
+          value={foldernameInput}
         />
         <button
           onClick={() => {
-            setOffset(0);
+            navigator(`/folders?q=${foldernameInput}&o=0`);
-            searchFolder();
           }}
         >
           {isLoading ? "Loading..." : "Search"}