feat: Implement search using query string

new-web/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
+    "@react-hookz/web": "^24.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.397.0",

new-web/src/app/page.tsx

@@ -1,20 +1,15 @@
 import { Header } from "components";
+import { SearchContainer } from "./search/components";
 
-import { SearchInput, SearchResultTable } from "./search/components";
-
-export default function SearchPage() {
+const SearchPage = () => {
   return (
     <>
       <Header>Companies</Header>
       <main className="flex flex-col items-center w-full px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-6xl mt-8">
-          <h2 className="text-2xl font-semibold text-gray-800 mb-6">
-            Search for a Company
-          </h2>
-          <SearchInput />
-          <SearchResultTable />
-        </div>
+        <SearchContainer />
       </main>
     </>
   );
-}
+};
+
+export default SearchPage;

new-web/src/app/search/components/index.ts

@@ -1,2 +1,3 @@
 export { default as SearchResultTable } from "./search-result-table";
 export { default as SearchInput } from "./search-input";
+export { default as SearchContainer } from "./search-container";

new-web/src/app/search/components/search-container.tsx

@@ -0,0 +1,111 @@
+"use client";
+import { createQueryString } from "lib/utils";
+import SearchInput from "./search-input";
+import SearchResultTable from "./search-result-table";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useDebouncedCallback } from "@react-hookz/web";
+
+interface SearchResults {
+  content: Content[];
+  pageable: Pageable;
+}
+
+interface Pageable {
+  size: number;
+  pageNumber: number;
+  offset: number;
+}
+
+interface Content {
+  name: string;
+  city: string;
+  county: string;
+  type: string;
+  route: string;
+}
+
+const mockData = {
+  content: [
+    {
+      name: "ABC company",
+      city: "London",
+      county: "London",
+      type: "Worker",
+      route: "Skilled Worker",
+    },
+    {
+      name: "ABC company",
+      city: "London",
+      county: "London",
+      type: "Worker",
+      route: "Skilled Worker",
+    },
+    {
+      name: "ABC company",
+      city: "London",
+      county: "London",
+      type: "Worker",
+      route: "Skilled Worker",
+    },
+    {
+      name: "ABC company",
+      city: "London",
+      county: "London",
+      type: "Worker",
+      route: "Skilled Worker",
+    },
+  ],
+  pageable: {
+    size: 10,
+    pageNumber: 0,
+    offset: 0,
+  },
+};
+
+const SearchContainer = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const keyword = (searchParams.get("keyword") as string) ?? "";
+
+  const changeKeyword = (value: string) => {
+    const keywordQueryString = createQueryString({
+      searchParams,
+      name: "keyword",
+      value,
+    });
+    router.replace(`${pathname}?${keywordQueryString}`, {
+      scroll: true,
+    });
+  };
+
+  const onChangeKeyword = useDebouncedCallback(
+    changeKeyword,
+    [changeKeyword],
+    500
+  );
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const value = formData.get("search-input") as string;
+    changeKeyword(value);
+  };
+
+  return (
+    <div className="w-full max-w-6xl mt-8">
+      <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+        Search for a Company
+      </h2>
+      <SearchInput
+        value={keyword}
+        onSubmit={onSubmit}
+        onChange={onChangeKeyword}
+      />
+      <SearchResultTable searchResults={mockData} />
+    </div>
+  );
+};
+
+export default SearchContainer;

new-web/src/app/search/components/search-input.tsx

@@ -2,17 +2,28 @@ import { Input } from "components";
 
 import { SearchIcon } from "lucide-react";
 
-const SearchInput = () => {
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: any) => void;
+}
+
+const SearchInput = ({ value, onSubmit, onChange }: Props) => {
   return (
-    <div className="relative mb-10 flex items-center w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
-      <label htmlFor="company-search" className="sr-only">
-        Company Name
-      </label>
-      <Input id="company-search" placeholder="Company Name" />
-      <button className="absolute inset-y-0 right-0 pr-3 flex items-center ">
-        <SearchIcon className="h-5 w-5 text-gray-400" />
-      </button>
-    </div>
+    <form onSubmit={onSubmit}>
+      <div className="relative mb-10 flex items-center w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
+        <Input
+          id="company-search"
+          name="search-input"
+          placeholder="Company Name"
+          defaultValue={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+        <button className="absolute inset-y-0 right-0 pr-3 flex items-center">
+          <SearchIcon className="h-5 w-5 text-gray-400" />
+        </button>
+      </div>
+    </form>
   );
 };
 export default SearchInput;

new-web/src/app/search/components/search-result-table.tsx

@@ -8,7 +8,11 @@ import {
   TableRow,
 } from "components/table";
 
-const SearchResultTable = () => {
+interface Props {
+  searchResults: any;
+}
+
+const SearchResultTable = ({ searchResults }: Props) => {
   return (
     <Table className="min-w-full bg-white">
       <TableCaption>A list of companies</TableCaption>
@@ -22,13 +26,15 @@ const SearchResultTable = () => {
         </TableRow>
       </TableHeader>
       <TableBody>
-        <TableRow>
-          <TableCell className="font-medium">ABC company</TableCell>
-          <TableCell>London</TableCell>
-          <TableCell>London</TableCell>
-          <TableCell>Worker</TableCell>
-          <TableCell className="text-right">Skilled Worker</TableCell>
-        </TableRow>
+        {searchResults.content.map((result: any) => (
+          <TableRow key={result.name}>
+            <TableCell className="font-medium">{result.name}</TableCell>
+            <TableCell>{result.city}</TableCell>
+            <TableCell>{result.county}</TableCell>
+            <TableCell>{result.type}</TableCell>
+            <TableCell className="text-right">{result.route}</TableCell>
+          </TableRow>
+        ))}
       </TableBody>
     </Table>
   );