From 5be29a9745aa08310edc3ebfcd2dc4112367d5c7 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 22 Feb 2024 14:59:12 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20id=20to=20allow?=
 =?UTF-8?q?=20singular=20toast=20deletion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/Toast/SimpleToast.tsx   | 24 ++++++++++---------
 .../src/components/shared/Toast/Toaster.tsx   |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
index d780640f..c15f2d45 100644
--- a/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
+++ b/packages/frontend/src/components/shared/Toast/SimpleToast.tsx
@@ -17,13 +17,15 @@ interface CtaProps extends ButtonBaseProps, ButtonTheme {
   buttonLabel: string;
 }
 export interface SimpleToastProps extends ToastProps {
+  id: string;
   title: string;
   variant?: SimpleToastTheme['variant'];
   cta?: CtaProps[];
-  onDismiss: (id?: string) => void;
+  onDismiss: (toastId: string) => void;
 }
 
 export const SimpleToast = ({
+  id,
   className,
   title,
   variant = 'success',
@@ -50,23 +52,23 @@ export const SimpleToast = ({
   const renderCta = useMemo(() => {
     if (!hasCta) return null;
     return (
-        <div className="flex gap-1.5 ml-2">
-          {cta.map(({ buttonLabel, ...props }, index) => (
-            <Button key={index} {...props}>
-              {buttonLabel}
-            </Button>
-          ))}
-        </div>
-  );
+      <div className="flex gap-1.5 ml-2">
+        {cta.map(({ buttonLabel, ...props }, index) => (
+          <Button key={index} {...props}>
+            {buttonLabel}
+          </Button>
+        ))}
+      </div>
+    );
   }, [cta]);
 
   const renderCloseButton = useMemo(
     () => (
-      <div onClick={() => onDismiss(props.id)} className={closeIconCls()}>
+      <div onClick={() => onDismiss(id)} className={closeIconCls()}>
         <CrossIcon className="h-3 w-3" />
       </div>
     ),
-    [],
+    [id],
   );
 
   return (
diff --git a/packages/frontend/src/components/shared/Toast/Toaster.tsx b/packages/frontend/src/components/shared/Toast/Toaster.tsx
index 85222167..66556956 100644
--- a/packages/frontend/src/components/shared/Toast/Toaster.tsx
+++ b/packages/frontend/src/components/shared/Toast/Toaster.tsx
@@ -11,7 +11,7 @@ export const Toaster = ({}: ToasterProps) => {
   const renderToasts = useMemo(
     () =>
       toasts.map(({ id, ...props }) => (
-        <SimpleToast key={id} {...(props as SimpleToastProps)} />
+        <SimpleToast key={id} {...(props as SimpleToastProps)} id={id} />
       )),
     [toasts],
   );