feat: add toast notifications for delete actions and update button titles in advertisements page

app/pages/dashboard-advertisements/dialog-delete.tsx

@@ -5,7 +5,8 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react'
-import type { Dispatch, SetStateAction } from 'react'
+import { useEffect, type Dispatch, type SetStateAction } from 'react'
+import toast from 'react-hot-toast'
 import { Link, useFetcher } from 'react-router'
 
 import type { TAdResponse } from '~/apis/common/get-ads'
@@ -20,6 +21,20 @@ export const DialogDelete = (properties: TProperties) => {
   const { selectedAds, setSelectedAds } = properties || {}
   const fetcher = useFetcher()
 
+  useEffect(() => {
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      setSelectedAds(undefined)
+      toast.success('Banner iklan berhasil dihapus!')
+      return
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
   return (
     <Dialog
       open={!!selectedAds}

app/pages/dashboard-advertisements/index.tsx

@@ -1,9 +1,12 @@
-import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid'
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/20/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { Link, useRouteLoaderData } from 'react-router'
-import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import type { TAdResponse } from '~/apis/common/get-ads'
 import { Button } from '~/components/ui/button'
@@ -19,21 +22,6 @@ export const AdvertisementsPage = () => {
   )
   const { adsData: dataTable } = loaderData || {}
   const [selectedAds, setSelectedAds] = useState<TAdResponse>()
-  const fetcher = useFetcher()
-
-  useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
-    }
-
-    if (fetcher.data?.success === true) {
-      setSelectedAds(undefined)
-      toast.success('Banner iklan berhasil dihapus!')
-      return
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher.data])
 
   const dataColumns: ConfigColumns[] = [
     {
@@ -71,6 +59,7 @@ export const AdvertisementsPage = () => {
           href={`/lg-admin/advertisements/update/${value}`}
           className=""
           size="icon"
+          title="Update Banner Iklan"
         >
           <PencilSquareIcon className="h-4 w-4" />
         </Button>
@@ -79,6 +68,7 @@ export const AdvertisementsPage = () => {
           size="icon"
           variant="newsDanger"
           onClick={() => setSelectedAds(data)}
+          title="Hapus Banner Iklan"
         >
           <TrashIcon className="h-4 w-4" />
         </Button>
@@ -95,10 +85,9 @@ export const AdvertisementsPage = () => {
         <Button
           as={Link}
           to="/lg-admin/advertisements/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
         >
-          Buat Banner Iklan
+          <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
         </Button>
       </div>