wip: search + delete + edit

src/app.css

@@ -325,22 +325,23 @@ i {
   flex-direction: column;
   gap: 1rem;
 }
-#contact-form > p:first-child {
+/* NOTE: originally first-child, which breaks when hidden $ACTION_ID input is injected */
+#contact-form > p:first-of-type {
   margin: 0;
   padding: 0;
 }
-#contact-form > p:first-child > :nth-child(2) {
+#contact-form > p:first-of-type > :nth-child(2) {
   margin-right: 1rem;
 }
-#contact-form > p:first-child,
+#contact-form > p:first-of-type,
 #contact-form label {
   display: flex;
 }
-#contact-form p:first-child span,
+#contact-form p:first-of-type span,
 #contact-form label span {
   width: 8rem;
 }
-#contact-form p:first-child input,
+#contact-form p:first-of-type input,
 #contact-form label input,
 #contact-form label textarea {
   flex-grow: 2;

src/routes/_action.ts

@@ -1,10 +1,40 @@
 "use server";
 
 import { ActionContext, redirect } from "@hiogawa/react-server/server";
-import { createEmptyContact } from "./_data";
+import { fakeContacts } from "./_data";
+import { tinyassert } from "@hiogawa/utils";
 
-export async function actionNewContact(this: ActionContext) {
+export async function actionCreateNewContact(this: ActionContext) {
   this.revalidate = true;
-  const contact = await createEmptyContact();
+  const contact = await fakeContacts.create({});
   throw redirect(`/contacts/${contact.id}/edit`);
 }
+
+export async function actionUpdateContact(
+  this: ActionContext,
+  formData: FormData,
+) {
+  this.revalidate = true;
+  const data = Object.fromEntries(formData) as any;
+  const contact = await fakeContacts.get(data.id);
+  tinyassert(contact);
+  await fakeContacts.set(contact.id, { ...contact, ...data });
+  throw redirect(`/contacts/${contact.id}`);
+}
+
+export async function actionDeleteContact(
+  this: ActionContext,
+  formData: FormData,
+) {
+  this.revalidate = true;
+  const data = Object.fromEntries(formData) as any;
+  const contact = await fakeContacts.get(data.id);
+  tinyassert(contact);
+  fakeContacts.destroy(contact.id);
+
+  // TODO
+  // action response stream renders `src/routes/contacts/[contactId]/page.tsx`
+  // but contact doesn't exists anymore and server component throws,
+  // which makes this redirect error to not caught by client?
+  throw redirect("/");
+}

src/routes/_data.ts

@@ -62,33 +62,18 @@ export async function getContacts(query?: string | null) {
   // 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));
+    const q = query.toLowerCase();
+    contacts = contacts.filter((c) =>
+      [c.first, c.last].some((v) => v?.toLowerCase().includes(q)),
+    );
   }
   return contacts;
 }
 
-export async function createEmptyContact() {
-  const contact = await fakeContacts.create({});
-  return contact;
-}
-
 export async function getContact(id: string) {
   return fakeContacts.get(id);
 }
 
-export async function updateContact(id: string, updates: ContactMutation) {
-  const contact = await fakeContacts.get(id);
-  if (!contact) {
-    throw new Error(`No contact found for ${id}`);
-  }
-  await fakeContacts.set(id, { ...contact, ...updates });
-  return contact;
-}
-
-export async function deleteContact(id: string) {
-  fakeContacts.destroy(id);
-}
-
 [
   {
     avatar:

src/routes/contacts/[contactId]/edit/page.tsx

@@ -1,5 +1,6 @@
 import { createError, type PageProps } from "@hiogawa/react-server/server";
 import { getContact } from "../../../_data";
+import { actionUpdateContact } from "../../../_action";
 
 export default async function EditContact(props: PageProps) {
   const contact = await getContact(props.params["contactId"]);
@@ -8,7 +9,8 @@ export default async function EditContact(props: PageProps) {
   }
 
   return (
-    <form key={contact.id} id="contact-form" method="post">
+    <form action={actionUpdateContact} key={contact.id} id="contact-form">
+      <input type="hidden" name="id" value={contact.id} />
       <p>
         <span>Name</span>
         <input

src/routes/contacts/[contactId]/page.tsx

@@ -1,5 +1,7 @@
 import { createError, type PageProps } from "@hiogawa/react-server/server";
 import { getContact, type ContactRecord } from "../../_data";
+import { Link } from "@hiogawa/react-server/client";
+import { actionDeleteContact } from "../../_action";
 
 export default async function Contact(props: PageProps) {
   const contact = await getContact(props.params["contactId"]);
@@ -40,22 +42,12 @@ export default async function Contact(props: PageProps) {
         {contact.notes ? <p>{contact.notes}</p> : null}
 
         <div>
-          <form action="edit">
-            <button type="submit">Edit</button>
-          </form>
-
-          <form
-            action="destroy"
-            method="post"
-            // onSubmit={(event) => {
-            //   const response = confirm(
-            //     "Please confirm you want to delete this record.",
-            //   );
-            //   if (!response) {
-            //     event.preventDefault();
-            //   }
-            // }}
-          >
+          <Link href={`${props.url.pathname}/edit`}>
+            <button>Edit</button>
+          </Link>
+          {/* TODO: client component for `window.confirm` */}
+          <form action={actionDeleteContact}>
+            <input type="hidden" name="id" value={contact.id} />
             <button type="submit">Delete</button>
           </form>
         </div>

src/routes/layout.tsx

@@ -1,12 +1,11 @@
 import { Link, LinkForm } from "@hiogawa/react-server/client";
 import { getContacts } from "./_data";
-import { actionNewContact } from "./_action";
+import { actionCreateNewContact } from "./_action";
 import type { LayoutProps } from "@hiogawa/react-server/server";
 
 export default async function Layout(props: LayoutProps) {
-  const contacts = await getContacts();
-  // TODO: search
-  props.url.search;
+  const q = new URLSearchParams(props.url.search).get("q");
+  const contacts = await getContacts(q);
 
   return (
     <html>
@@ -31,7 +30,7 @@ export default async function Layout(props: LayoutProps) {
               />
               <div aria-hidden hidden={true} id="search-spinner" />
             </LinkForm>
-            <form action={actionNewContact}>
+            <form action={actionCreateNewContact}>
               <button type="submit">New</button>
             </form>
           </div>

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ESNext",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "types": ["vite/client", "react/experimental"],
     "jsx": "react-jsx"
   }