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

@@ -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 })
 		},