Fix issues in Toast component refactor

ifmeorg · Nov 25, 2024 · 6a803c6 · 6a803c6
1 parent 163314f
commit 6a803c6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/client/app/components/Toast/__tests__/Toast.spec.jsx b/client/app/components/Toast/__tests__/Toast.spec.jsx
@@ -11,7 +11,7 @@ describe('Toast', () => {
       render(
         <Toast
           alert="Invalid username or password."
-          appendDashboardClass="true"
+          appendDashboardClass={true}
         />,
       );
       expect(screen).not.toBeNull();
@@ -21,7 +21,7 @@ describe('Toast', () => {
       const { getByRole, container } = render(
         <Toast
           alert="Invalid username or password."
-          appendDashboardClass="true"
+          appendDashboardClass={true}
         />,
       );
 
@@ -37,7 +37,7 @@ describe('Toast', () => {
       const { getByRole } = render(
         <Toast
           alert="Invalid username or password."
-          appendDashboardClass="true"
+          appendDashboardClass={true}
         />,
       );
 

diff --git a/client/app/components/Toast/index.jsx b/client/app/components/Toast/index.jsx
@@ -34,12 +34,16 @@ export const Toast = ({ alert, notice, appendDashboardClass }: Props): Node => {
   };
 
   useEffect(() => {
+    let timer;
     if (showAlert || showNotice) {
-      setTimeout(() => {
+      timer = setTimeout(() => {
         hideNotice();
         hideAlert();
       }, 7000);
     }
+    return () => {
+      clearTimeout(timer);
+    };
   }, [showAlert, showNotice]);
 
   return (

diff --git a/client/app/stories/Toast.stories.jsx b/client/app/stories/Toast.stories.jsx
@@ -13,7 +13,7 @@ export const noticeToast = Template.bind({});
 
 noticeToast.args = {
   notice: 'Login successful.',
-  appendDashboardClass: 'true',
+  appendDashboardClass: true,
 };
 noticeToast.storyName = 'Toast Type: Notice';