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

app/layouts/admin/dialog-upload.tsx

@@ -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"