From 26431e2cea140a580a9ebd7b0856e729ed2a6c8c Mon Sep 17 00:00:00 2001
From: Minh-Tue Vo <minhtuev@gmail.com>
Date: Tue, 22 Oct 2024 11:55:01 -0700
Subject: [PATCH] Toast component refactor (#4957)

* Refactored Toast component to support a primary and secondary button and exposed visibility state
* Addressed feedback
---
 .../components/src/components/Toast/Toast.tsx | 32 +++++++++++++------
 .../components/src/components/Toast/index.ts  |  2 +-
 .../components/src/components/index.ts        |  2 +-
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx
index 6cd18102eb..c16c7ec733 100644
--- a/app/packages/components/src/components/Toast/Toast.tsx
+++ b/app/packages/components/src/components/Toast/Toast.tsx
@@ -1,18 +1,23 @@
-import React, { useState } from "react";
-import { Snackbar, Button, SnackbarContent } from "@mui/material";
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import BoltIcon from '@mui/icons-material/Bolt'; // Icon for the lightning bolt
+import React from "react";
+import { atom, useRecoilState } from "recoil";
+import { Box, Snackbar, SnackbarContent } from "@mui/material";
 
 // Define types for the props
 interface ToastProps {
-  action: React.ReactNode;   // Accepts any valid React component, element, or JSX
-  message: React.ReactNode;  // Accepts any valid React component, element, or JSX
+  message: React.ReactNode;
+  primary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
+  secondary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
   duration?: number;         // Optional duration, with a default value
 }
 
-const Toast: React.FC<ToastProps> = ({ action, message, duration = 5000 }) => {
-  const [open, setOpen] = useState(true);
+const toastStateAtom = atom({
+  key: "toastOpenState",
+  default: true,
+});
+
+const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 5000 }) => {
+
+  const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility
 
   const handleClose = (event, reason) => {
     if (reason === "clickaway") {
@@ -21,6 +26,15 @@ const Toast: React.FC<ToastProps> = ({ action, message, duration = 5000 }) => {
     setOpen(false);
   };
 
+  const action = (
+    <div>
+      <Box display="flex" justifyContent="flex-end">
+        {primary(setOpen)} {/* Pass setOpen to primary button */}
+        {secondary(setOpen)} {/* Pass setOpen to secondary button */}
+      </Box>
+    </div>
+  );
+
   return (
     <Snackbar
       anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
diff --git a/app/packages/components/src/components/Toast/index.ts b/app/packages/components/src/components/Toast/index.ts
index 43c586feaf..a2323c2d29 100644
--- a/app/packages/components/src/components/Toast/index.ts
+++ b/app/packages/components/src/components/Toast/index.ts
@@ -1 +1 @@
-export {default as Toast} from "./Toast";
\ No newline at end of file
+export { default } from "./Toast";
\ No newline at end of file
diff --git a/app/packages/components/src/components/index.ts b/app/packages/components/src/components/index.ts
index 6f46e99c49..1db2226835 100644
--- a/app/packages/components/src/components/index.ts
+++ b/app/packages/components/src/components/index.ts
@@ -37,6 +37,6 @@ export { default as TabOption } from "./TabOption";
 export { default as TextField } from "./TextField";
 export { default as ThemeProvider, useFont, useTheme } from "./ThemeProvider";
 export { default as Tooltip } from "./Tooltip";
-export { Toast } from "./Toast";
+export { default as Toast } from "./Toast";
 
 export * from "./types";