wip: add edit page

src/routes/_action.ts

@@ -0,0 +1,9 @@
+"use server";
+
+import { redirect } from "@hiogawa/react-server/server";
+import { createEmptyContact } from "./_data";
+
+export async function actionNewContact() {
+  const contact = await createEmptyContact();
+  throw redirect(`/contacts/${contact.id}/edit`);
+}

src/routes/_data.ts

@@ -1,6 +1,6 @@
 import { tinyassert } from "@hiogawa/utils";
 
-// verify this only lives on the server
+// verify the data accessed only on the server
 tinyassert(typeof document === "undefined");
 
 type ContactMutation = {

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

@@ -0,0 +1,58 @@
+import { createError, type PageProps } from "@hiogawa/react-server/server";
+import { getContact } from "../../../_data";
+
+export default async function EditContact(props: PageProps) {
+  const contact = await getContact(props.params["contactId"]);
+  if (!contact) {
+    throw createError({ status: 404 });
+  }
+
+  return (
+    <form key={contact.id} id="contact-form" method="post">
+      <p>
+        <span>Name</span>
+        <input
+          defaultValue={contact.first}
+          aria-label="First name"
+          name="first"
+          type="text"
+          placeholder="First"
+        />
+        <input
+          aria-label="Last name"
+          defaultValue={contact.last}
+          name="last"
+          placeholder="Last"
+          type="text"
+        />
+      </p>
+      <label>
+        <span>Twitter</span>
+        <input
+          defaultValue={contact.twitter}
+          name="twitter"
+          placeholder="@jack"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Avatar URL</span>
+        <input
+          aria-label="Avatar URL"
+          defaultValue={contact.avatar}
+          name="avatar"
+          placeholder="https://example.com/avatar.jpg"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Notes</span>
+        <textarea defaultValue={contact.notes} name="notes" rows={6} />
+      </label>
+      <p>
+        <button type="submit">Save</button>
+        <button type="button">Cancel</button>
+      </p>
+    </form>
+  );
+}

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

@@ -1,16 +1,11 @@
-"use client";
+import { createError, type PageProps } from "@hiogawa/react-server/server";
+import { getContact, type ContactRecord } from "../../_data";
 
-import type { ContactRecord } from "../../_data";
-
-export default function Contact() {
-  const contact = {
-    first: "Your",
-    last: "Name",
-    avatar: "https://placekitten.com/g/200/200",
-    twitter: "your_handle",
-    notes: "Some notes",
-    favorite: true,
-  };
+export default async function Contact(props: PageProps) {
+  const contact = await getContact(props.params["contactId"]);
+  if (!contact) {
+    throw createError({ status: 404 });
+  }
 
   return (
     <div id="contact">
@@ -52,14 +47,14 @@ export default function Contact() {
           <form
             action="destroy"
             method="post"
-            onSubmit={(event) => {
-              const response = confirm(
-                "Please confirm you want to delete this record.",
-              );
-              if (!response) {
-                event.preventDefault();
-              }
-            }}
+            // onSubmit={(event) => {
+            //   const response = confirm(
+            //     "Please confirm you want to delete this record.",
+            //   );
+            //   if (!response) {
+            //     event.preventDefault();
+            //   }
+            // }}
           >
             <button type="submit">Delete</button>
           </form>
@@ -69,10 +64,8 @@ export default function Contact() {
   );
 }
 
-const Favorite: React.FC<{
-  contact: Pick<ContactRecord, "favorite">;
-}> = ({ contact }) => {
-  const favorite = contact.favorite;
+function Favorite(props: { contact: ContactRecord }) {
+  const favorite = props.contact.favorite;
 
   return (
     <form method="post">
@@ -85,4 +78,4 @@ const Favorite: React.FC<{
       </button>
     </form>
   );
-};
+}

src/routes/layout.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@hiogawa/react-server/client";
 import { getContacts } from "./_data";
+import { actionNewContact } from "./_action";
 
 export default async function Layout(props: React.PropsWithChildren) {
   const contacts = await getContacts();
@@ -25,7 +26,9 @@ export default async function Layout(props: React.PropsWithChildren) {
               />
               <div aria-hidden hidden={true} id="search-spinner" />
             </form>
-            <form method="post">
+            {/* TODO: better error message when forgot to add `action`? */}
+            {/* TODO: layout doesn't invalidate when adding a new contact */}
+            <form action={actionNewContact}>
               <button type="submit">New</button>
             </form>
           </div>