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

2025-03-15 09:16:57 +08:00
parent 405e57b92d
commit 6d99a37f20
9 changed files with 103 additions and 29 deletions
@@ -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>
+  )
+}