diff --git a/web/src/component/SearchFolders.js b/web/src/component/SearchFolders.js index 981b382..2746a42 100644 --- a/web/src/component/SearchFolders.js +++ b/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 (