From 5163cccca4a55e5345871716db09b610f233826b Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Mon, 9 May 2022 20:24:20 +0200
Subject: [PATCH] Replace Luxon DateTime with number in ui-notification redux
 state

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 src/components/notifications/ui-notification-toast.tsx | 5 ++++-
 src/redux/ui-notifications/methods.ts                  | 2 +-
 src/redux/ui-notifications/types.ts                    | 3 +--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/notifications/ui-notification-toast.tsx b/src/components/notifications/ui-notification-toast.tsx
index ec2979a6f..786eff28b 100644
--- a/src/components/notifications/ui-notification-toast.tsx
+++ b/src/components/notifications/ui-notification-toast.tsx
@@ -16,6 +16,7 @@ import { cypressId } from '../../utils/cypress-attribute'
 import { useEffectOnce, useInterval } from 'react-use'
 import { dismissUiNotification } from '../../redux/ui-notifications/methods'
 import styles from './notifications.module.scss'
+import { DateTime } from 'luxon'
 
 const STEPS_PER_SECOND = 10
 const log = new Logger('UiNotificationToast')
@@ -89,6 +90,8 @@ 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>
@@ -98,7 +101,7 @@ export const UiNotificationToast: React.FC<UiNotificationProps> = ({
           </ShowIf>
           <Trans i18nKey={titleI18nKey} tOptions={titleI18nOptions} />
         </strong>
-        <small>{date.toRelative({ style: 'short' })}</small>
+        <small>{formattedDate}</small>
       </Toast.Header>
       <Toast.Body>{contentDom}</Toast.Body>
       <ProgressBar
diff --git a/src/redux/ui-notifications/methods.ts b/src/redux/ui-notifications/methods.ts
index a48dd8519..adbd3398e 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(),
+        date: 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 a208fda82..2a11bc7fe 100644
--- a/src/redux/ui-notifications/types.ts
+++ b/src/redux/ui-notifications/types.ts
@@ -5,7 +5,6 @@
  */
 
 import type { Action } from 'redux'
-import type { DateTime } from 'luxon'
 import type { IconName } from '../../components/common/fork-awesome/types'
 import type { TOptions } from 'i18next'
 
@@ -30,7 +29,7 @@ export interface DispatchOptions {
 export interface UiNotification extends DispatchOptions {
   titleI18nKey: string
   contentI18nKey: string
-  date: DateTime
+  date: number
   dismissed: boolean
 }