fix(notify): reset circle animation on notification re-trigger with id (

#559) Resolves #554 * fix(notify): prevent duration not showing in notifications with id * fix(notify): add toast key to reset circle animation * refactor(web/notify): use ref for key counter instead of state --------- Co-authored-by: Luke <[email protected]>
overextended · Apr 27, 2024 · 8bb3b5a · 8bb3b5a
1 parent 8261156
commit 8bb3b5a
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/web/src/features/notifications/NotificationWrapper.tsx b/web/src/features/notifications/NotificationWrapper.tsx
@@ -2,7 +2,7 @@ import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { toast, Toaster } from 'react-hot-toast';
 import ReactMarkdown from 'react-markdown';
 import { Box, Center, createStyles, Group, keyframes, RingProgress, Stack, Text, ThemeIcon } from '@mantine/core';
-import React from 'react';
+import React, { useRef } from 'react';
 import tinycolor from 'tinycolor2';
 import type { NotificationProps } from '../../typings';
 import MarkdownComponents from '../../config/MarkdownComponents';
@@ -111,8 +111,13 @@ const durationCircle = keyframes({
 
 const Notifications: React.FC = () => {
   const { classes } = useStyles();
+  const toastKeyRef = useRef(0);
 
   useNuiEvent<NotificationProps>('notify', (data) => {
+    const toastId = data.id?.toString();
+
+    if (toastId) toastKeyRef.current++;
+
     if (!data.title && !data.description) return;
 
     let iconColor: string;
@@ -190,6 +195,7 @@ const Notifications: React.FC = () => {
               <>
                 {data.showDuration ? (
                   <RingProgress
+                    key={toastKeyRef.current}
                     size={38}
                     thickness={2}
                     sections={[{ value: 100, color: iconColor }]}
@@ -201,7 +207,7 @@ const Notifications: React.FC = () => {
                           animationDuration: `${duration}ms`,
                         },
                         margin: -3,
-                      }
+                      },
                     }}
                     label={
                       <Center>
@@ -211,12 +217,7 @@ const Notifications: React.FC = () => {
                           size={32}
                           variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'}
                         >
-                          <LibIcon
-                            icon={data.icon}
-                            fixedWidth
-                            color={iconColor}
-                            animation={data.iconAnimation}
-                          />
+                          <LibIcon icon={data.icon} fixedWidth color={iconColor} animation={data.iconAnimation} />
                         </ThemeIcon>
                       </Center>
                     }
@@ -229,12 +230,7 @@ const Notifications: React.FC = () => {
                     variant={tinycolor(iconColor).getAlpha() === 0 ? undefined : 'light'}
                     style={{ alignSelf: !data.alignIcon || data.alignIcon === 'center' ? 'center' : 'start' }}
                   >
-                    <LibIcon
-                      icon={data.icon}
-                      fixedWidth
-                      color={iconColor}
-                      animation={data.iconAnimation}
-                    />
+                    <LibIcon icon={data.icon} fixedWidth color={iconColor} animation={data.iconAnimation} />
                   </ThemeIcon>
                 )}
               </>
@@ -254,7 +250,7 @@ const Notifications: React.FC = () => {
         </Box>
       ),
       {
-        id: data.id?.toString(),
+        id: toastId,
         duration: duration,
         position: position || 'top-right',
       }