legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-12 19:23:46 +08:00
parent f026277a88
commit eb7cc04256
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/pages/form-advertisements/index.tsx
View File

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

20
app/pages/form-contents/index.tsx
View File

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