feat: add react-hot-toast in admin and news layouts, and update ads form handling

app/layouts/admin/default.tsx

@@ -1,10 +1,12 @@
 import type { PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
 
 export const AdminDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
   return (
     <main className="font-admin relative min-h-dvh bg-[#F7F8FC]">
       {children}
+      <Toaster />
     </main>
   )
 }

app/layouts/news/default.tsx

@@ -1,4 +1,5 @@
 import { type PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
 
 import { PopupModal } from '~/components/popup/modal'
 import { SuccessModal } from '~/components/popup/success-modal'
@@ -44,6 +45,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FooterLinks />
       </footer>
 
+      <Toaster />
+
       <PopupModal
         isOpen={isLoginOpen}
         onClose={() => setIsLoginOpen(false)}

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,17 +39,16 @@ 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)
+      toast.error(fetcher.data?.message)
       return
     }
+    toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
     navigate('/lg-admin/advertisements')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher])
 
@@ -63,9 +63,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"

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-hook-reading-time": "^1.0.0",
+    "react-hot-toast": "^2.5.2",
     "react-router": "^7.1.3",
     "react-share": "^5.2.2",
     "remix-hook-form": "^6.1.3",

pnpm-lock.yaml

@@ -98,6 +98,9 @@ importers:
       react-hook-reading-time:
         specifier: ^1.0.0
         version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-hot-toast:
+        specifier: ^2.5.2
+        version: 2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -2791,6 +2794,11 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
+  goober@2.1.16:
+    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3944,6 +3952,13 @@ packages:
       react: ^16.13.1
       react-dom: ^16.13.1
 
+  react-hot-toast@2.5.2:
+    resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-hotkeys-hook@4.6.1:
     resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
     peerDependencies:
@@ -7651,6 +7666,10 @@ snapshots:
 
   globrex@0.1.2: {}
 
+  goober@2.1.16(csstype@3.1.3):
+    dependencies:
+      csstype: 3.1.3
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
@@ -8737,6 +8756,13 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  react-hot-toast@2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      csstype: 3.1.3
+      goober: 2.1.16(csstype@3.1.3)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0