Complete "URL Params in Loaders" and "Throwing Responses".

src/app/(sidebar)/contacts/[contactId]/Contact.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { ContactRecord } from "@/app/data";
+import Form from "next/form";
+import { use } from "react";
+
+export default function Contact({
+  contact
+}: {
+  contact: Promise<ContactRecord>
+}) {
+  const c = use(contact);
+
+  return (
+    <div id="contact">
+      <div>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          alt={`${c.first} ${c.last} avatar`}
+          key={c.avatar}
+          src={c.avatar}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {c.first || c.last ? (
+            <>
+              {c.first} {c.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}
+          <Favorite contact={c}/>
+        </h1>
+
+        {c.twitter ? (
+          <p>
+            <a
+              href={`https://twitter.com/${c.twitter}`}
+            >
+              {c.twitter}
+            </a>
+          </p>
+        ) : null}
+
+        {c.notes ? <p>{c.notes}</p> : null}
+
+        <div>
+          <Form action="edit">
+            <button type="submit">Edit</button>
+          </Form>
+
+          <Form
+            action="destroy"
+            formMethod="post"
+            onSubmit={(event) => {
+              const response = confirm(
+                "Please confirm you want to delete this record."
+              );
+              if (!response) {
+                event.preventDefault();
+              }
+            }}
+          >
+            <button type="submit">Delete</button>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Favorite({
+  contact,
+}: {
+  contact: Pick<ContactRecord, "favorite">;
+}) {
+  const favorite = contact.favorite;
+
+  return (
+    <Form action="." formMethod="post">
+      <button
+        aria-label={
+          favorite
+            ? "Remove from favorites"
+            : "Add to favorites"
+        }
+        name="favorite"
+        value={favorite ? "false" : "true"}
+      >
+        {favorite ? "★" : "☆"}
+      </button>
+    </Form>
+  );
+}