Rename date prop in UI-Notification

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/notifications/ui-notification-toast.tsx

@@ -30,7 +30,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
   contentI18nKey,
   titleI18nOptions,
   contentI18nOptions,
-  date,
+  createdAtTimestamp,
   icon,
   dismissed,
   notificationId,
@@ -49,8 +49,17 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
     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<UiNotificationProps> = ({
       })
   }, [contentI18nKey, contentI18nOptions, t])
 
-  const formattedDate = useMemo(() => DateTime.fromSeconds(date).toRelative({ style: 'short' }), [date])
-
   return (
     <Toast className={styles.toast} show={!dismissed} onClose={dismissNow} {...cypressId('notification-toast')}>
       <Toast.Header>
@@ -101,7 +108,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
           </ShowIf>
           <Trans i18nKey={titleI18nKey} tOptions={titleI18nOptions} />
         </strong>
-        <small>{formattedDate}</small>
+        <small>{formattedCreatedAtDate}</small>
       </Toast.Header>
       <Toast.Body>{contentDom}</Toast.Body>
       <ProgressBar

src/components/notifications/ui-notifications.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useMemo } from 'react'
 import { UiNotificationToast } from './ui-notification-toast'
 import styles from './notifications.module.scss'
 import { useApplicationState } from '../../hooks/common/use-application-state'
@@ -12,11 +12,15 @@ import { useApplicationState } from '../../hooks/common/use-application-state'
 export const UiNotifications: React.FC = () => {
   const notifications = useApplicationState((state) => state.uiNotifications)
 
+  const notificationElements = useMemo(() => {
+    return notifications.map((notification, notificationIndex) => (
+      <UiNotificationToast key={notificationIndex} notificationId={notificationIndex} {...notification} />
+    ))
+  }, [notifications])
+
   return (
     <div className={styles['notifications-area']} aria-live='polite' aria-atomic='true'>
-      {notifications.map((notification, notificationIndex) => (
+      {notificationElements}
-        <UiNotificationToast key={notificationIndex} notificationId={notificationIndex} {...notification} />
-      ))}
     </div>
   )
 }

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 ?? {},

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
 }