queryで検索可能になった

Author: KaichiManabe

web/app/search/layout.tsx

@@ -1,19 +1,18 @@
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
-import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function HomePageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <NavigateByAuthState type="toLoginForUnauthenticated">
+    <>
       <Header title="検索/Search" />
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
       <BottomBar activeTab="2_search" />
-    </NavigateByAuthState>
+    </>
   );
 }

web/app/search/page.tsx

@@ -1,67 +1,24 @@
 "use client";
 
-import type { User } from "common/types";
 import type React from "react";
-import { useEffect, useState } from "react";
-import { useAll } from "~/api/user";
+import Search from "~/components/search/search";
+import Table from "~/components/search/table";
 
-import { useModal } from "~/components/common/modal/ModalProvider";
-import { HumanListItem } from "~/components/human/humanListItem";
-
-export default function SearchPage() {
-  const [searchWord, setSearchWord] = useState("");
-  const {
-    state: { data },
-  } = useAll();
-  const { openModal } = useModal();
-  const [users, setUsers] = useState<User[] | null>(null);
-
-  useEffect(() => {
-    if (data) {
-      setUsers(data);
-    }
-  }, [data]);
-
-  function searchByUserName() {
-    const filteredUsers = data?.filter((user) =>
-      user.name.toLowerCase().includes(searchWord.toLowerCase()),
-    );
-    setUsers(filteredUsers || null);
-  }
+export default function SearchPage(props: {
+  searchParams?: {
+    query?: string;
+    page?: string;
+  };
+}) {
+  const searchParams = props.searchParams;
+  const query = searchParams?.query || "";
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-100">
       <div className="card w-96 bg-white p-6 shadow-md">
         <h2 className="mb-4 font-bold text-2xl">Search</h2>
-        <div className="form-control mb-4">
-          <label htmlFor="searchInput" className="label">
-            <span className="label-text">Enter search term</span>
-          </label>
-          <input
-            type="text"
-            value={searchWord}
-            onChange={(e) => setSearchWord(e.target.value)}
-            placeholder="Type here"
-            className="input input-bordered w-full"
-          />
-        </div>
-        <button
-          type="button"
-          onClick={searchByUserName}
-          className="btn btn-primary w-full"
-        >
-          Search
-        </button>
-        {users?.map((user) => (
-          <HumanListItem
-            key={user.id}
-            id={user.id}
-            name={user.name}
-            pictureUrl={user.pictureUrl}
-            onOpen={() => openModal(user)}
-            hasDots
-          />
-        ))}
+        <Search placeholder="検索" />
+        <Table query={query} />
       </div>
     </div>
   );

web/components/search/search.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { MdOutlineSearch } from "react-icons/md";
+
+export default function Search({ placeholder }: { placeholder: string }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  function handleSearch(term: string) {
+    const params = new URLSearchParams(searchParams);
+    if (term) {
+      params.set("query", term);
+    } else {
+      params.delete("query");
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }
+
+  return (
+    <div className="relative flex flex-1 flex-shrink-0">
+      <label htmlFor="search" className="sr-only">
+        Search
+      </label>
+      <input
+        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+        placeholder={placeholder}
+        onChange={(e) => {
+          handleSearch(e.target.value);
+        }}
+        defaultValue={searchParams.get("query")?.toString()}
+      />
+      <MdOutlineSearch className="-translate-y-1/2 absolute top-1/2 left-3 h-[18px] w-[18px] text-gray-500 peer-focus:text-gray-900" />
+    </div>
+  );
+}

web/components/search/table.tsx

@@ -0,0 +1,50 @@
+"use client";
+import type { User } from "common/types";
+import { useEffect, useState } from "react";
+import { useAll } from "~/api/user";
+import { useModal } from "../common/modal/ModalProvider";
+import { HumanListItem } from "../human/humanListItem";
+
+export default function UserTable({ query }: { query: string }) {
+  const { openModal } = useModal();
+  const {
+    state: { data },
+  } = useAll();
+
+  const [users, setUsers] = useState<User[] | null>(null);
+
+  useEffect(() => {
+    if (data) {
+      setUsers(data);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    function searchByUserName(query: string) {
+      const filteredUsers = data?.filter((user) =>
+        user.name.toLowerCase().includes(query.toLowerCase()),
+      );
+      setUsers(filteredUsers || null);
+    }
+    if (query === "") {
+      setUsers(data);
+    }
+    if (query) {
+      searchByUserName(query);
+    }
+  }, [query, data]);
+
+  return (
+    <div>
+      {users?.map((user) => (
+        <HumanListItem
+          key={user.id}
+          id={user.id}
+          name={user.name}
+          pictureUrl={user.pictureUrl}
+          onOpen={() => openModal(user)}
+        />
+      ))}
+    </div>
+  );
+}