add id to toast

apps/remix-ide/src/app/plugins/notification.tsx

@@ -38,7 +38,7 @@ export class NotificationPlugin extends Plugin implements MethodApi<INotificatio
     return this.dispatcher.alert(args)
   }
 
-  async toast (message: string | JSX.Element) {
-    this.dispatcher.toast(message)
+  async toast (message: string | JSX.Element, uid?: string | number) {
+    this.dispatcher.toast(message, uid)
   }
 }

libs/remix-ui/app/src/lib/remix-app/actions/modals.ts

@@ -22,7 +22,7 @@ export const enum modalActionTypes {
 type ModalPayload = {
   [modalActionTypes.setModal]: AppModal
   [modalActionTypes.handleHideModal]: any
-  [modalActionTypes.setToast]: string | JSX.Element
+  [modalActionTypes.setToast]: { message: string | JSX.Element, uid: string | number }
   [modalActionTypes.handleToaster]: any,
   [modalActionTypes.processQueue]: any
 }

libs/remix-ui/app/src/lib/remix-app/components/modals/dialogs.tsx

@@ -10,7 +10,7 @@ const AppDialogs = () => {
   return (
     <>
       <ModalWrapper {...focusModal} handleHide={handleHideModal}></ModalWrapper>
-      <Toaster message={focusToaster} handleHide={handleToaster} />
+      <Toaster message={focusToaster.message} uid={focusToaster.uid} handleHide={handleToaster} />
     </>)
 }
 export default AppDialogs

libs/remix-ui/app/src/lib/remix-app/context/context.tsx

@@ -6,7 +6,7 @@ export const AppContext = React.createContext<any>(null)
 
 export interface dispatchModalInterface {
   modal: (data: AppModal) => void
-  toast: (message: string | JSX.Element) => void
+  toast: (message: string | JSX.Element, uid?:string | number) => void
   alert: (data: AlertModal) => void
   handleHideModal: () => void,
   handleToaster: () => void
@@ -14,7 +14,7 @@ export interface dispatchModalInterface {
 
 export const dispatchModalContext = React.createContext<dispatchModalInterface>({
   modal: (data: AppModal) => { },
-  toast: (message: string | JSX.Element) => {},
+  toast: (message: string | JSX.Element, uid?:string | number) => {},
   alert: (data: AlertModal) => {},
   handleHideModal: () => {},
   handleToaster: () => {}

libs/remix-ui/app/src/lib/remix-app/context/provider.tsx

@@ -36,10 +36,10 @@ export const ModalProvider = ({ children = [], reducer = modalReducer, initialSt
     })
   }
 
-  const toast = (message: string | JSX.Element) => {
+  const toast = (message: string | JSX.Element, uid?: string | number) => {
     dispatch({
       type: modalActionTypes.setToast,
-      payload: message
+      payload: { message, uid }
     })
   }
 

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -33,7 +33,7 @@ export interface AlertModal {
 
 export interface ModalState {
     modals: AppModal[],
-    toasters: (string | JSX.Element)[],
+    toasters: {message: (string | JSX.Element), uid: string | number }[],
     focusModal: AppModal,
-    focusToaster: string | JSX.Element
+    focusToaster:  {message: (string | JSX.Element), uid: string | number }
 }

libs/remix-ui/app/src/lib/remix-app/reducer/modals.ts

@@ -62,8 +62,7 @@ export const modalReducer = (state: ModalState = ModalInitialState, action: Moda
     }
     case modalActionTypes.setToast: {
       const toasterList = state.toasters.slice()
-      const message = action.payload
-      toasterList.push(message)
+      toasterList.push(action.payload)
       if (toasterList.length === 1) {
         return { ...state, toasters: toasterList, focusToaster: action.payload }
       } else {

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -7,7 +7,8 @@ import './toaster.css'
 export interface ToasterProps {
   message: string | JSX.Element
   timeOut?: number,
-  handleHide?: () => void
+  handleHide?: () => void,
+  uid?: string | number
 }
 
 export const Toaster = (props: ToasterProps) => {
@@ -49,7 +50,7 @@ export const Toaster = (props: ToasterProps) => {
         }
       })
     }
-  }, [props.message])
+  }, [props.message, props.uid])
 
   useEffect(() => {
     if (state.hiding) {