From 1b6f46903cfd5ea8494c147679ed69b4e560a6f4 Mon Sep 17 00:00:00 2001
From: Good <35160768+itsmegood@users.noreply.github.com>
Date: Tue, 28 Nov 2023 06:34:54 +0530
Subject: [PATCH] Use "useActionData" in note editor (#533)

* using noteFetcher.Form instead of Form

* Remove useFetcher with "useActionData"

* Using "useNavigation" to solve the isPending
---
 app/routes/users+/$username_+/__note-editor.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
index 5f3d543b..0c083a5e 100644
--- a/app/routes/users+/$username_+/__note-editor.tsx
+++ b/app/routes/users+/$username_+/__note-editor.tsx
@@ -17,7 +17,7 @@ import {
 	type DataFunctionArgs,
 	type SerializeFrom,
 } from '@remix-run/node'
-import { Form, useFetcher } from '@remix-run/react'
+import { Form, useActionData, useNavigation } from '@remix-run/react'
 import { useRef, useState } from 'react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { z } from 'zod'
@@ -134,11 +134,11 @@ export async function action({ request }: DataFunctionArgs) {
 	})
 
 	if (submission.intent !== 'submit') {
-		return json({ status: 'idle', submission } as const)
+		return json({ submission } as const)
 	}
 
 	if (!submission.value) {
-		return json({ status: 'error', submission } as const, { status: 400 })
+		return json({ submission } as const, { status: 400 })
 	}
 
 	const {
@@ -186,13 +186,15 @@ export function NoteEditor({
 		}
 	>
 }) {
-	const noteFetcher = useFetcher<typeof action>()
-	const isPending = noteFetcher.state !== 'idle'
+	const actionData = useActionData<typeof action>()
+
+	const navigation = useNavigation()
+	const isPending = navigation.state !== 'idle'
 
 	const [form, fields] = useForm({
 		id: 'note-editor',
 		constraint: getFieldsetConstraint(NoteEditorSchema),
-		lastSubmission: noteFetcher.data?.submission,
+		lastSubmission: actionData?.submission,
 		onValidate({ formData }) {
 			return parse(formData, { schema: NoteEditorSchema })
 		},