make it faster

Author: aster-void

web/app/search/page.tsx

@@ -1,23 +1,25 @@
 "use client";
 
 import type React from "react";
+import { useState } from "react";
 import Search from "~/components/search/search";
 import Table from "~/components/search/table";
 
-export default function SearchPage(props: {
+export default function SearchPage({
+  searchParams,
+}: {
   searchParams?: {
     query?: string;
     page?: string;
   };
 }) {
-  const searchParams = props.searchParams;
-  const query = searchParams?.query || "";
+  const [query, setQuery] = useState<string>(searchParams?.query ?? "");
 
   return (
     <div className="flex min-h-screen justify-center ">
       <div className="w-full">
         <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
-        <Search placeholder="検索" />
+        <Search placeholder="検索" setSearchString={setQuery} />
         <Table query={query} />
       </div>
     </div>

web/components/search/search.tsx

@@ -1,21 +1,23 @@
 "use client";
 
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { MdOutlineSearch } from "react-icons/md";
 
-export default function Search({ placeholder }: { placeholder: string }) {
+type Props = { placeholder: string; setSearchString: (s: string) => void };
+export default function Search({ placeholder, setSearchString }: Props) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
-  const { replace } = useRouter();
 
   function handleSearch(term: string) {
+    setSearchString(term);
     const params = new URLSearchParams(searchParams);
     if (term) {
       params.set("query", term);
     } else {
       params.delete("query");
     }
-    replace(`${pathname}?${params.toString()}`);
+    const newUrl = `${pathname}?${params.toString()}`;
+    history.replaceState(undefined, "", newUrl);
   }
 
   return (

web/components/search/table.tsx

@@ -1,6 +1,5 @@
 "use client";
-import type { User } from "common/types";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useAll, useMyID } from "~/api/user";
 import { useModal } from "../common/modal/ModalProvider";
 import { HumanListItem } from "../human/humanListItem";
@@ -11,27 +10,16 @@ export default function UserTable({ query }: { query: string }) {
     state: { data },
   } = useAll();
   const { state } = useMyID();
-  const [users, setUsers] = useState<User[] | null>(null);
-
-  const filteredData = useMemo(() => {
+  const initialData = useMemo(() => {
     return (
       data?.filter((item) => item.id !== state.data && item.id !== 0) ?? null
     );
   }, [data, state.data]);
-
-  useEffect(() => {
-    function searchByUserName(query: string) {
-      const filteredUsers = filteredData?.filter((user) =>
+  const users = query
+    ? initialData?.filter((user) =>
         user.name.toLowerCase().includes(query.toLowerCase()),
-      );
-      setUsers(filteredUsers || null);
-    }
-    if (!query) {
-      setUsers(filteredData);
-    } else {
-      searchByUserName(query);
-    }
-  }, [query, filteredData]);
+      )
+    : initialData;
 
   return (
     <div>