From cafe25bd49df50ff9c4e068e2b14dcfa54894ada Mon Sep 17 00:00:00 2001
From: tomolld <tomoki2757@gmail.com>
Date: Sat, 17 Aug 2024 21:37:43 +0900
Subject: [PATCH] =?UTF-8?q?useFetcher=E3=81=A0=E3=81=A8Validation=E3=81=8C?=
 =?UTF-8?q?=E3=81=86=E3=81=BE=E3=81=8F=E8=81=9E=E3=81=84=E3=81=A6=E3=81=84?=
 =?UTF-8?q?=E3=81=AA=E3=81=8B=E3=81=A3=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../$userName+/page+/$slug+/edit/_edit.tsx    |  7 +++---
 .../$slug+/edit/components/EditHeader.tsx     | 22 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx b/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
index 56112e10..61e98830 100644
--- a/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
+++ b/web/app/routes/$userName+/page+/$slug+/edit/_edit.tsx
@@ -1,7 +1,7 @@
 import { getFormProps, getTextareaProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import type { ActionFunction, LoaderFunction } from "@remix-run/node";
-import { useActionData, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { useFetcher } from "@remix-run/react";
 import { z } from "zod";
 import { authenticator } from "~/utils/auth.server";
@@ -97,11 +97,10 @@ export const action: ActionFunction = async ({ request, params }) => {
 
 export default function EditPage() {
 	const { currentUser, page } = useLoaderData<typeof loader>();
-	const actionData = useActionData<typeof action>();
-	const fetcher = useFetcher();
+	const fetcher = useFetcher<typeof action>();
 	const [form, { title, pageContent }] = useForm({
 		id: "edit-page",
-		lastResult: actionData?.lastResult,
+		lastResult: fetcher.data?.lastResult,
 		constraint: getZodConstraint(schema),
 		shouldValidate: "onBlur",
 		shouldRevalidate: "onInput",
diff --git a/web/app/routes/$userName+/page+/$slug+/edit/components/EditHeader.tsx b/web/app/routes/$userName+/page+/$slug+/edit/components/EditHeader.tsx
index 7f73727e..afcf5ee8 100644
--- a/web/app/routes/$userName+/page+/$slug+/edit/components/EditHeader.tsx
+++ b/web/app/routes/$userName+/page+/$slug+/edit/components/EditHeader.tsx
@@ -33,22 +33,22 @@ export function EditHeader({
 	return (
 		<header className="mb-10 z-10 ">
 			<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6  flex justify-between items-center">
-				<Button variant="ghost">
-					<Link
-						to={
-							pageSlug
-								? `/${currentUser?.userName}/page/${pageSlug}`
-								: `/${currentUser?.userName}`
-						}
-						className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
-					>
+				<Link
+					to={
+						pageSlug
+							? `/${currentUser?.userName}/page/${pageSlug}`
+							: `/${currentUser?.userName}`
+					}
+					className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+				>
+					<Button variant="ghost">
 						{isLoading ? (
 							<Loader2 className="w-6 h-6 animate-spin" />
 						) : (
 							<ArrowLeft className="w-6 h-6" />
 						)}
-					</Link>
-				</Button>
+					</Button>
+				</Link>
 				<Button type="submit" variant="ghost" disabled={isSubmitting}>
 					{isSubmitting ? (
 						<>