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

feat: improve error handling and success messages in various forms and dialogs

Browse Source
This commit is contained in:
Ardeman 2025-03-15 09:16:57 +08:00
parent 405e57b92d
commit 6d99a37f20
9 changed files with 103 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/dialog/delete.tsx
View File

@ -23,12 +23,12 @@ export const DialogDelete = (properties: TProperties) => {
const fetcher = useFetcher()
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
close()
toast.success(`${title} berhasil dihapus!`)
return

2
app/layouts/admin/dashboard.tsx
View File

@ -1,5 +1,6 @@
import type { PropsWithChildren } from 'react'
import { DialogProfile } from './dialog-profile'
import { DialogUpload } from './dialog-upload'
import { Navbar } from './navbar'
import { Sidebar } from './sidebar'
@ -15,6 +16,7 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
</div>
<DialogUpload />
<DialogProfile />
</div>
)
}

77
app/layouts/admin/dialog-profile.tsx Normal file
View File

@ -0,0 +1,77 @@
import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect } from 'react'
import toast from 'react-hot-toast'
import { useFetcher } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'
import { useAdminContext } from '~/contexts/admin'
const profileSchema = z.object({
name: z.string().min(1, 'Name is required'),
email: z.string().email('Invalid email address'),
profile_picture: z.string().optional(),
})
type TProfileSchema = z.infer<typeof profileSchema>
export const DialogProfile = () => {
const { editProfile, setEditProfile } = useAdminContext()
const fetcher = useFetcher()
const formMethods = useRemixForm<TProfileSchema>({
mode: 'onSubmit',
fetcher,
resolver: zodResolver(profileSchema),
})
const { handleSubmit } = formMethods
useEffect(() => {
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success) {
setEditProfile(false)
return
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher.data])
return (
<Dialog
open={editProfile}
onClose={() => {
if (fetcher.state === 'idle') {
setEditProfile(false)
}
}}
className="relative z-50"
transition
>
<DialogBackdrop
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
transition
/>
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
<DialogPanel
transition
className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
>
<RemixFormProvider {...formMethods}>
<fetcher.Form
method="post"
onSubmit={handleSubmit}
className="space-y-4"
action="/actions/admin/profile"
encType="multipart/form-data"
></fetcher.Form>
</RemixFormProvider>
</DialogPanel>
</div>
</Dialog>
)
}

17
app/layouts/admin/dialog-upload.tsx
View File

@ -1,6 +1,7 @@
import { Dialog, DialogBackdrop, DialogPanel, Input } from '@headlessui/react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useEffect, useState, type ChangeEvent } from 'react'
import { useEffect, type ChangeEvent } from 'react'
import toast from 'react-hot-toast'
import { useFetcher } from 'react-router'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'
@ -18,7 +19,6 @@ export type TUploadSchema = z.infer<typeof uploadSchema>
export const DialogUpload = () => {
const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
const fetcher = useFetcher()
const [error, setError] = useState<string>()
const maxFileSize = 10 * 1024 // 10MB
const formMethods = useRemixForm<TUploadSchema>({
@ -30,14 +30,12 @@ export const DialogUpload = () => {
const { handleSubmit, register, setValue } = formMethods
useEffect(() => {
if (!fetcher.data?.success) {
setError(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
setUploadedFile(fetcher.data.uploadData.data.file_url)
setError(undefined)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetcher])
@ -58,12 +56,12 @@ export const DialogUpload = () => {
const img = new Image()
if (!file.type.startsWith('image/')) {
setError('Please upload an image file.')
toast.error('Please upload an image file.')
return
}
if (file.size > maxFileSize * 1024) {
setError(`File size is too big!`)
toast.error(`File size is too big!`)
return
}
@ -110,9 +108,6 @@ export const DialogUpload = () => {
action="/actions/admin/upload"
encType="multipart/form-data"
>
{error && (
<div className="text-sm text-red-500 capitalize">{error}</div>
)}
<Input
type="file"
id="input-file-upload"

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

@ -52,12 +52,12 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
const { handleSubmit } = formMethods
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
navigate('/lg-admin/advertisements')
return

6
app/pages/form-category/index.tsx
View File

@ -44,12 +44,12 @@ export const FormCategoryPage = (properties: TProperties) => {
const watchName = watch('name')
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
toast.success(
`Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
)

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

@ -96,12 +96,12 @@ export const FormContentsPage = (properties: TProperties) => {
const watchTags = watch('tags')
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`)
navigate('/lg-admin/contents')
return

6
app/pages/form-subscribe-plan/index.tsx
View File

@ -48,12 +48,12 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
const watchName = watch('name')
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
toast.success(
`Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
)

6
app/pages/form-tag/index.tsx
View File

@ -40,12 +40,12 @@ export const FormTagPage = (properties: TProperties) => {
const watchName = watch('name')
useEffect(() => {
if (fetcher.data?.success === false) {
toast.error(fetcher.data?.message)
if (!fetcher.data?.success && fetcher.data?.message) {
toast.error(fetcher.data.message)
return
}
if (fetcher.data?.success === true) {
if (fetcher.data?.success) {
toast.success(`Tag berhasil ${tagData ? 'diupdate' : 'dibuat'}!`)
navigate('/lg-admin/tags')
return