From 7cb1a5d02fcead49ec507a1905b47e5d978343cb Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 12 Jun 2022 02:48:17 +0800
Subject: [PATCH] add frontend route for search files

"q": string, filename to search
"o": int, offset of search result
---
 web/src/component/SearchFiles.js | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/component/SearchFiles.js b/web/src/component/SearchFiles.js
index b80e0ba..bbbc90d 100644
--- a/web/src/component/SearchFiles.js
+++ b/web/src/component/SearchFiles.js
@@ -1,10 +1,19 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import FilesTable from "./FilesTable";
 
+function useQuery() {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+
 function SearchFiles(props) {
+  const navigator = useNavigate();
   const [files, setFiles] = useState([]);
-  const [filename, setFilename] = useState("");
-  const [offset, setOffset] = useState(0);
+  const [filenameInput, setFilenameInput] = useState("");
+  const query = useQuery();
+  const filename = query.get("q") || "";
+  const offset = parseInt(query.get("o")) || 0;
   const [isLoading, setIsLoading] = useState(false);
   const limit = 10;
 
@@ -37,7 +46,7 @@ function SearchFiles(props) {
   }
 
   function nextPage() {
-    setOffset(offset + limit);
+    navigator(`/files?q=${filenameInput}&o=${offset + limit}`);
   }
 
   function lastPage() {
@@ -45,29 +54,29 @@ function SearchFiles(props) {
     if (offsetValue < 0) {
       return;
     }
-    setOffset(offsetValue);
+    navigator(`/files?q=${filenameInput}&o=${offsetValue}`);
   }
 
-  useEffect(() => searchFiles(), [offset]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => searchFiles(), [offset, filename]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="page">
       <h3>Search Files</h3>
       <div className="search_toolbar">
         <input
-          onChange={(event) => setFilename(event.target.value)}
+          onChange={(event) => setFilenameInput(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
-              searchFiles();
+              navigator(`/files?q=${filenameInput}&o=0`);
             }
           }}
           type="text"
           placeholder="Enter filename"
+          value={filenameInput}
         />
         <button
           onClick={() => {
-            setOffset(0);
-            searchFiles();
+            navigator(`/files?q=${filenameInput}&o=0`);
           }}
         >
           {isLoading ? "Loading..." : "Search"}