chore: use LinkForm and ActionContext.revalidate

package.json

@@ -16,7 +16,7 @@
     "cf-release": "cd misc/cloudflare-workers && wrangler deploy"
   },
   "dependencies": {
-    "@hiogawa/react-server": "latest",
+    "@hiogawa/react-server": "0.1.15",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "react-server-dom-webpack": "18.3.0-canary-14898b6a9-20240318"

src/routes/_action.ts

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

src/routes/layout.tsx

@@ -1,10 +1,11 @@
-import { Link } from "@hiogawa/react-server/client";
+import { Link, LinkForm } 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: LayoutProps) {
   const contacts = await getContacts();
+  // TODO: search
   props.url.search;
 
   return (
@@ -20,8 +21,7 @@ export default async function Layout(props: LayoutProps) {
             <Link href="/">Remix Contacts</Link>
           </h1>
           <div>
-            {/* TODO: GET form navigation */}
-            <form action="" id="search-form" role="search">
+            <LinkForm action="/" id="search-form" role="search" revalidate>
               <input
                 aria-label="Search contacts"
                 id="q"
@@ -30,9 +30,7 @@ export default async function Layout(props: LayoutProps) {
                 type="search"
               />
               <div aria-hidden hidden={true} id="search-spinner" />
-            </form>
-            {/* TODO: better error message when forgot to add `action`? */}
-            {/* TODO: layout doesn't invalidate when adding a new contact */}
+            </LinkForm>
             <form action={actionNewContact}>
               <button type="submit">New</button>
             </form>