From f423f3e1c0c7670cac893fd2f94cc511492e38b1 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 12 Mar 2025 20:24:54 +0800
Subject: [PATCH] feat: integrate toast notifications for success and error
 handling

---
 app/pages/form-advertisements/index.tsx     | 20 +++++++++---------
 app/pages/form-category/index.tsx           | 23 ++++++++++++---------
 app/pages/form-subscriptions-plan/index.tsx | 23 ++++++++++++---------
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/app/pages/form-advertisements/index.tsx b/app/pages/form-advertisements/index.tsx
index 6b87f9d..121fd5b 100644
--- a/app/pages/form-advertisements/index.tsx
+++ b/app/pages/form-advertisements/index.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -38,20 +39,22 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
       url: adData?.url || '',
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
       return
     }
 
-    navigate('/lg-admin/advertisements')
-    setError(undefined)
+    if (fetcher.data?.success === true) {
+      toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
+      navigate('/lg-admin/advertisements')
+      return
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   return (
     <div className="relative">
@@ -64,9 +67,6 @@ 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"
diff --git a/app/pages/form-category/index.tsx b/app/pages/form-category/index.tsx
index c35dfd1..0ebb783 100644
--- a/app/pages/form-category/index.tsx
+++ b/app/pages/form-category/index.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -38,20 +39,25 @@ export const FormCategoryPage = (properties: TProperties) => {
       description: categoryData?.description || '',
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(
+        `Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
+      )
+      navigate('/lg-admin/categories')
       return
     }
-    navigate('/lg-admin/categories')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   useEffect(() => {
     setValue('code', urlFriendlyCode(watchName))
@@ -69,9 +75,6 @@ export const FormCategoryPage = (properties: TProperties) => {
             action={`/actions/admin/categories/${categoryData ? '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="name"
diff --git a/app/pages/form-subscriptions-plan/index.tsx b/app/pages/form-subscriptions-plan/index.tsx
index e728ec9..0a224fd 100644
--- a/app/pages/form-subscriptions-plan/index.tsx
+++ b/app/pages/form-subscriptions-plan/index.tsx
@@ -1,6 +1,7 @@
 import { Field, Label, Select } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -40,20 +41,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       status: subscribePlanData?.status || undefined,
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(
+        `Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
+      )
+      navigate('/lg-admin/subscribe-plan')
       return
     }
-    navigate('/lg-admin/subscribe-plan')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   useEffect(() => {
     setValue('code', urlFriendlyCode(watchName))
@@ -73,9 +79,6 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
             action={`/actions/admin/subscribe-plan/${subscribePlanData ? '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="name"