feat: enhance error handling in content forms with state management and toast notifications

app/pages/form-advertisements/index.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { useEffect, useState } from 'react'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -39,16 +38,18 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
       url: adData?.url || '',
     },
   })
+  const [error, setError] = useState<string>()
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
     if (!fetcher.data?.success) {
-      toast.error(fetcher.data?.message)
+      setError(fetcher.data?.message)
       return
     }
-    toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
+
     navigate('/lg-admin/advertisements')
+    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
@@ -63,6 +64,9 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
             action={`/actions/admin/advertisements/${adData ? 'update' : 'create'}`}
             className="space-y-4"
           >
+            {error && (
+              <div className="text-sm text-red-500 capitalize">{error}</div>
+            )}
             <div className="flex items-end justify-between gap-4">
               <InputFile
                 id="image"

app/pages/form-contents/index.tsx

@@ -1,6 +1,7 @@
 import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -72,7 +73,6 @@ export const FormContentsPage = (properties: TProperties) => {
   )
   const { categoriesData: categories } = loaderData || {}
   const { tagsData: tags } = loaderData || {}
-  const [error, setError] = useState<string>()
 
   const formMethods = useRemixForm<TContentSchema>({
     mode: 'onSubmit',
@@ -97,15 +97,14 @@ export const FormContentsPage = (properties: TProperties) => {
   const watchTags = watch('tags')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
+    if (fetcher.data?.success) {
+      toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`)
+      navigate('/lg-admin/contents')
+    } else {
+      toast.error(fetcher.data?.message)
     }
-
-    navigate('/lg-admin/contents')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   return (
     <div className="relative">
@@ -117,9 +116,6 @@ export const FormContentsPage = (properties: TProperties) => {
           action={`/actions/admin/contents/${newsData ? 'update' : 'create'}`}
           className="space-y-4"
         >
-          {error && (
-            <div className="text-sm text-red-500 capitalize">{error}</div>
-          )}
           <div className="flex items-end justify-between gap-4">
             <Input
               id="title"