diff --git a/src/components/notifications/ui-notification-toast.tsx b/src/components/notifications/ui-notification-toast.tsx index 786eff28b..6b024f81e 100644 --- a/src/components/notifications/ui-notification-toast.tsx +++ b/src/components/notifications/ui-notification-toast.tsx @@ -30,7 +30,7 @@ export const UiNotificationToast: React.FC = ({ contentI18nKey, titleI18nOptions, contentI18nOptions, - date, + createdAtTimestamp, icon, dismissed, notificationId, @@ -49,8 +49,17 @@ export const UiNotificationToast: React.FC = ({ log.debug(`Show notification ${notificationId}`) }) + const formatCreatedAtDate = useCallback(() => { + return DateTime.fromSeconds(createdAtTimestamp).toRelative({ style: 'short' }) + }, [createdAtTimestamp]) + + const [formattedCreatedAtDate, setFormattedCreatedAtDate] = useState(() => formatCreatedAtDate()) + useInterval( - () => setRemainingSteps((lastRemainingSteps) => lastRemainingSteps - 1), + () => { + setRemainingSteps((lastRemainingSteps) => lastRemainingSteps - 1) + setFormattedCreatedAtDate(formatCreatedAtDate()) + }, !dismissed && remainingSteps > 0 ? 1000 / STEPS_PER_SECOND : null ) @@ -90,8 +99,6 @@ export const UiNotificationToast: React.FC = ({ }) }, [contentI18nKey, contentI18nOptions, t]) - const formattedDate = useMemo(() => DateTime.fromSeconds(date).toRelative({ style: 'short' }), [date]) - return ( @@ -101,7 +108,7 @@ export const UiNotificationToast: React.FC = ({ - {formattedDate} + {formattedCreatedAtDate} {contentDom} { const notifications = useApplicationState((state) => state.uiNotifications) + const notificationElements = useMemo(() => { + return notifications.map((notification, notificationIndex) => ( + + )) + }, [notifications]) + return (
- {notifications.map((notification, notificationIndex) => ( - - ))} + {notificationElements}
) } diff --git a/src/redux/ui-notifications/methods.ts b/src/redux/ui-notifications/methods.ts index adbd3398e..dd915d8c2 100644 --- a/src/redux/ui-notifications/methods.ts +++ b/src/redux/ui-notifications/methods.ts @@ -42,7 +42,7 @@ export const dispatchUiNotification = async ( notification: { titleI18nKey, contentI18nKey, - date: DateTime.now().toSeconds(), + createdAtTimestamp: DateTime.now().toSeconds(), dismissed: false, titleI18nOptions: titleI18nOptions ?? {}, contentI18nOptions: contentI18nOptions ?? {}, diff --git a/src/redux/ui-notifications/types.ts b/src/redux/ui-notifications/types.ts index 2a11bc7fe..51f55661e 100644 --- a/src/redux/ui-notifications/types.ts +++ b/src/redux/ui-notifications/types.ts @@ -29,7 +29,7 @@ export interface DispatchOptions { export interface UiNotification extends DispatchOptions { titleI18nKey: string contentI18nKey: string - date: number + createdAtTimestamp: number dismissed: boolean }