wip: search

hi-ogawa · hi-ogawa · Apr 7, 2024 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
commit 2509a9b9ffe1745fe9d855b1565b1c486dea8e2f
diff --git a/src/routes/_data.ts b/src/routes/_data.ts
@@ -21,7 +21,7 @@ export type ContactRecord = ContactMutation & {
 ////////////////////////////////////////////////////////////////////////////////
 // This is just a fake DB table. In a real app you'd be talking to a real db or
 // fetching from an existing API.
-const fakeContacts = {
+export const fakeContacts = {
   records: {} as Record<string, ContactRecord>,
 
   async getAll(): Promise<ContactRecord[]> {
@@ -59,7 +59,7 @@ const fakeContacts = {
 ////////////////////////////////////////////////////////////////////////////////
 // Handful of helper functions to be called from route loaders and actions
 export async function getContacts(query?: string | null) {
-  await new Promise((resolve) => setTimeout(resolve, 500));
+  // await new Promise((resolve) => setTimeout(resolve, 500));
   let contacts = await fakeContacts.getAll();
   if (query) {
     contacts.filter((c) => c.first?.includes(query) || c.last?.includes(query));

diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
@@ -1,9 +1,11 @@
 import { Link } from "@hiogawa/react-server/client";
 import { getContacts } from "./_data";
 import { actionNewContact } from "./_action";
+import type { LayoutProps } from "@hiogawa/react-server/server";
 
-export default async function Layout(props: React.PropsWithChildren) {
+export default async function Layout(props: LayoutProps) {
   const contacts = await getContacts();
+  props.url.search;
 
   return (
     <html>
@@ -18,7 +20,8 @@ export default async function Layout(props: React.PropsWithChildren) {
             <Link href="/">Remix Contacts</Link>
           </h1>
           <div>
-            <form id="search-form" role="search">
+            {/* TODO: GET form navigation */}
+            <form action="" id="search-form" role="search">
               <input
                 aria-label="Search contacts"
                 id="q"