implement notification onClick

Author: mrdadah

src/components/SetupPage/index.js

@@ -18,19 +18,29 @@ import DatasetJSONEditor from "../DatasetJSONEditor"
 import useInterface from "../../hooks/use-interface"
 import useSample from "../../hooks/use-sample"
 import Protip from "./Protip"
+import { useToasts } from "../Toasts"
 
 const noop = () => {}
 
 export default ({ onClearLabelData }) => {
   const { iface, updateInterface } = useInterface()
   const { sample } = useSample(0)
-
+  const { addToast } = useToasts()
   const [currentTab, setTab] = useState(iface?.type ? "configure" : "datatype")
 
   return (
     <div>
       <Box padding="8px" paddingBottom="0px">
-        <Tabs value={currentTab} onChange={(e, newTab) => setTab(newTab)}>
+        <Tabs value={currentTab} onChange={(e, newTab) => {
+          addToast(
+            "Couldn't load plugin: ",
+            "error",
+            () => {
+              console.log('passed click')
+            }
+          )
+          setTab(newTab)
+        }}>
           <Tab icon={<CategoryIcon />} label="Data Type" value="datatype" />
           <Tab
             disabled={!iface?.type}

src/components/Toasts/index.js

@@ -95,6 +95,7 @@ export const ToastProvider = ({ children }) => {
           id: Math.random().toString().split(".")[1],
           message: action.message,
           type: action.messageType,
+          onClick: action.onClick || null,
           life: fullLife,
           fullLife,
         },
@@ -126,8 +127,8 @@ export const ToastProvider = ({ children }) => {
     return () => clearInterval(interval)
   }, [toasts])
 
-  const addToast = (message: string, messageType: string = "info") =>
-    changeToasts({ type: "add", message, messageType })
+  const addToast = (message: string, messageType: string = "info", onClick: function = null) =>
+    changeToasts({ type: "add", message, messageType, onClick })
 
   return (
     <>
@@ -141,6 +142,7 @@ export const ToastProvider = ({ children }) => {
               <Notification
                 type={msg.type}
                 message={msg.message}
+                onClick={msg.onClick}
                 onClose={() => changeToasts({ type: "remove", id: msg.id })}
               />
             </Fade>
@@ -151,7 +153,7 @@ export const ToastProvider = ({ children }) => {
   )
 }
 
-export const Notification = ({ type, message, onClose }) => {
+export const Notification = ({ type, message, onClick, onClose }) => {
   const classes = useStyles()
   let Icon = null
   switch (type) {
@@ -170,7 +172,12 @@ export const Notification = ({ type, message, onClose }) => {
   return (
     <paper
       className={classes.notificationPaper}
-      style={{ position: "relative" }}
+      style={{ position: "relative", cursor: 'pointer' }}
+      onClick={() => {
+        if (onClick) {
+          onClick()
+        }
+      }}
     >
       <div className={classNames(classes.icon, type)}>
         <Icon fontSize="large" style={{ padding: 12 }} />