From da52ca415115f82ae88a6ced67ab2c442b32556e Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 18 Jul 2024 11:35:02 -0300
Subject: [PATCH] fix: review

---
 .../fuselage-toastbar/src/ToastBarTimed.tsx   | 29 ++++++-------------
 .../components/ToastBar/ToastBar.styles.scss  |  4 ---
 .../src/components/ToastBar/ToastBar.tsx      |  3 ++
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
index 8b4bff5a6d..5171521dca 100644
--- a/packages/fuselage-toastbar/src/ToastBarTimed.tsx
+++ b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -1,6 +1,6 @@
 import { ToastBar } from '@rocket.chat/fuselage';
-import type { ReactElement } from 'react';
-import { useEffect, useState } from 'react';
+import { type ReactElement } from 'react';
+import { useCountdown } from 'react-timing-hooks';
 
 import type { ToastBarPayload } from './ToastBarContext';
 import { useToastBarDismiss } from './ToastBarContext';
@@ -11,34 +11,23 @@ const ToastBarTimed = ({
   id,
   message,
 }: ToastBarPayload): ReactElement => {
-  const timeInSeconds = time * 1000;
-  const [shouldPause, setShouldPause] = useState(false);
   const dismissToastMessage = useToastBarDismiss();
 
-  useEffect(() => {
-    const initialTime = Date.now();
-    const interval = setInterval(() => {
-      if (shouldPause) {
-        return;
-      }
-
-      if (Date.now() - initialTime >= timeInSeconds) {
-        dismissToastMessage(id);
-      }
-    }, timeInSeconds);
-
-    return () => clearInterval(interval);
-  }, [shouldPause]);
+  const [, { isPaused, pause, resume }] = useCountdown(time, 0, {
+    onEnd: () => dismissToastMessage(id),
+    startOnMount: true,
+  });
 
   return (
     <ToastBar
       variant={type}
-      onMouseEnter={() => setShouldPause(true)}
-      onMouseLeave={() => setShouldPause(false)}
+      onPointerEnter={() => pause()}
+      onPointerLeave={() => resume()}
       children={message}
       onClose={dismissToastMessage}
       id={id}
       time={time}
+      isPaused={isPaused}
     />
   );
 };
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
index d9e1c94491..b4c00461d4 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.styles.scss
@@ -112,8 +112,4 @@ $toastbar-progressbar-background-color: theme(
       background-color: $toastbar-progressbar-background-color;
     }
   }
-
-  &:hover &_progressbar::after {
-    animation-play-state: paused;
-  }
 }
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
index 7d0179e9ea..c8ae701fe1 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
@@ -12,6 +12,7 @@ export type ToastBarProps = {
   className?: string;
   children?: ReactNode;
   time?: number;
+  isPaused?: boolean;
   id?: string;
   onClose?: (id: string) => void;
   buttonLabel?: string;
@@ -22,6 +23,7 @@ export function ToastBar({
   className = '',
   variant = 'info',
   time = 5,
+  isPaused,
   id,
   onClose,
   buttonLabel = 'Dismiss alert',
@@ -60,6 +62,7 @@ export function ToastBar({
       width: 0%;
       animation: ${progressBar} ${time}s;
       animation-fill-mode: forwards;
+      animation-play-state: ${isPaused ? 'paused' : 'running'};
     }
   `;