From 5bdf8f5a4d9b44c88d73e4bcea4cb635054d9232 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Sat, 5 Apr 2025 08:40:19 +0700
Subject: [PATCH] feat(backoffice): add Toast

---
 apps/backoffice/src/app/_hooks/use-login.ts   |  9 +++-----
 .../gacha-roll/_components/modal-add-item.tsx | 10 ++++++---
 .../_components/modal-update-item.tsx         | 10 ++++++---
 .../src/app/gacha-roll/_hook/use-item.ts      | 22 ++++++++++++++-----
 apps/backoffice/src/main.tsx                  |  2 ++
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/apps/backoffice/src/app/_hooks/use-login.ts b/apps/backoffice/src/app/_hooks/use-login.ts
index e23709a..3c031d3 100644
--- a/apps/backoffice/src/app/_hooks/use-login.ts
+++ b/apps/backoffice/src/app/_hooks/use-login.ts
@@ -5,7 +5,7 @@ import {
   usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
 export const useLogin = () => {
   const postLogin = usePostLogin();
@@ -13,14 +13,11 @@ export const useLogin = () => {
     resolver: zodResolver(authLoginSchema),
     mode: 'all',
   });
-  const navigate = useNavigate();
 
   const onSubmit = form.handleSubmit((data) => {
     postLogin.mutate(data, {
-      onSuccess: () => {
-        console.log('Success Login');
-        navigate('/dashboard');
-      },
+      onSuccess: () => toast.success("Login sukses"),
+      onError: (error) => toast.error(error.message),
     });
   });
 
diff --git a/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx b/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
index 83dd111..2d13e2d 100644
--- a/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
+++ b/apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx
@@ -6,7 +6,7 @@ import { useItem, useConfirmItem } from '../_hook/use-item';
 interface IModalAddItem {
   isOpen: boolean;
   onClose: () => void;
-  handleAddItem?: () => void;
+  handleAddItem?: () => Promise<boolean>;
   currentStep?: number;
   nextStep: () => void;
   prevStep: () => void;
@@ -109,7 +109,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
 
 interface IStepTwoProps {
   onClose: () => void;
-  handleAddItem?: () => void;
+  handleAddItem?: () => Promise<boolean>;
   resetStep: () => void;
 }
 
@@ -117,7 +117,11 @@ const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
   const { onConfirm, onCancel } = useConfirmItem(
     onClose,
     resetStep,
-    handleAddItem
+    handleAddItem,
+    {
+      success: 'Item ditambahkan ke gacha item',
+      error: 'Item gagal ditambahkan ke gacha item',
+    }
   );
 
   return (
diff --git a/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx b/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
index 057afe7..db9f000 100644
--- a/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
+++ b/apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx
@@ -6,7 +6,7 @@ import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 interface IModalUpdateItem {
   isOpen: boolean;
   onClose: () => void;
-  handleUpdateItem?: () => void;
+  handleUpdateItem?: () => Promise<boolean>;
   currentStep?: number;
   nextStep: () => void;
   prevStep: () => void;
@@ -117,7 +117,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
 
 interface IStepTwoProps {
   onClose: () => void;
-  handleUpdateItem?: () => void;
+  handleUpdateItem?: () => Promise<boolean>;
   resetStep: () => void;
 }
 
@@ -125,7 +125,11 @@ const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => {
   const { onConfirm, onCancel } = useConfirmItem(
     onClose,
     resetStep,
-    handleUpdateItem
+    handleUpdateItem,
+    {
+      success: 'Item ditambahkan ke gacha item',
+      error: 'Item gagal ditambahkan ke gacha item',
+    }
   );
 
   return (
diff --git a/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts b/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
index 42514ed..1889359 100644
--- a/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
+++ b/apps/backoffice/src/app/gacha-roll/_hook/use-item.ts
@@ -4,6 +4,7 @@ import {
   gachaRollItemSchema,
   TGachaRollItem
 } from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
 
 export const useItem = (
   nextStep: () => void,
@@ -29,12 +30,23 @@ export const useItem = (
 export const useConfirmItem = (
   onClose: () => void,
   resetStep: () => void,
-  actionFunction?: () => void,
+  actionFunction?: () => Promise<boolean>,
+  messages?: {
+    success?: string;
+    error?: string;
+  }
 ) => {
-  const onConfirm = () => {
-    actionFunction?.();
-    onClose();
-    resetStep();
+  const onConfirm = async () => {
+    try {
+      // const result = await actionFunction?.();
+      // result ? toast.success(messages?.success) : toast.error(messages?.error);
+      toast.success(messages?.success);
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error(messages?.error);
+    }
   };
 
   const onCancel = () => {
diff --git a/apps/backoffice/src/main.tsx b/apps/backoffice/src/main.tsx
index 7201952..4f9c907 100644
--- a/apps/backoffice/src/main.tsx
+++ b/apps/backoffice/src/main.tsx
@@ -8,6 +8,7 @@ import {
   convertPagesToRoute,
   QueryProvider,
 } from '@imphnen-frontend-service/utils';
+import { Toaster } from 'sonner';
 import './index.css';
 
 const files = import.meta.glob('./app/**/*(page|layout).tsx');
@@ -34,6 +35,7 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
   <StrictMode>
     <QueryProvider>
+      <Toaster position="top-right" />
       <RouterProvider router={router} />
     </QueryProvider>
   </StrictMode>