From c82e09a80a338a7c9969232cfc670307e2c83309 Mon Sep 17 00:00:00 2001
From: Hugues Tavernier <hugues.tavernier@protonmail.com>
Date: Tue, 5 Nov 2024 08:10:18 +0100
Subject: [PATCH] updated Remix Form Route with conform v1

---
 CHANGELOG.md         |  4 ++++
 src/forms/conform.ts | 21 ++++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0321a3d..ee89b14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to the "remix-forge" extension will be documented in this file. 
 
+## [0.5.5]
+
+- Updated Remix Form Route with conform v1 
+
 ## [0.5.3]
 - Added `clientLoader` generator
 - Added `clientAction` generator
diff --git a/src/forms/conform.ts b/src/forms/conform.ts
index a364d30..4ce17d2 100644
--- a/src/forms/conform.ts
+++ b/src/forms/conform.ts
@@ -3,8 +3,8 @@ import { getConfig } from "../config";
 export const generateConformForm = () => {
   const runtimeDependency = getConfig().get("runtimeDependency") || "@remix-run/node";
   return [
-    'import { useForm } from "@conform-to/react";',
-    'import { parse } from "@conform-to/zod";',
+    'import { getFormProps, useForm } from "@conform-to/react";',
+    'import { getZodConstraint, parseWithZod } from "@conform-to/zod";',
     'import { Form, useActionData } from "@remix-run/react";',
     `import { json } from "${runtimeDependency}";`,
     `import type { ActionFunctionArgs } from "${runtimeDependency}";`,
@@ -16,10 +16,10 @@ export const generateConformForm = () => {
     "",
     "export async function action({ request }: ActionFunctionArgs) {",
     "  const formData = await request.formData();",
-    "  const submission = parse(formData, { schema });",
+    "  const submission = parseWithZod(formData, { schema });",
     "",
-    "  if (!submission.value || submission.intent !== 'submit') {",
-    "    return json(submission, { status: 400 });",
+    '  if (submission.status !== "success") {',
+    "    return submission.reply();",
     "  }",
     "",
     "  // Do something with the data",
@@ -27,16 +27,19 @@ export const generateConformForm = () => {
     "}",
     "",
     "export default function FormRoute() {",
-    "  const lastSubmission = useActionData<typeof action>();",
+    "  const lastResult = useActionData<typeof action>();",
     "  const [form, fields] = useForm({",
-    "    lastSubmission,",
+    "    lastResult,",
+    "    constraint: getZodConstraint(schema),",
     "    onValidate({ formData }) {",
-    "      return parse(formData, { schema });",
+    "      return parseWithZod(formData, { schema });",
     "    },",
     "  });",
     "",
     "  return (",
-    '    <Form method="post" {...form.props}>',
+    '    <Form method="post" {...getFormProps(form)}>',
+    "      <div id={form.errorId}>{form.errors}</div>",
+    "",
     "      {/** Your form elements here */}",
     "      <button>Submit</button>",
     "    </Form>",