Replace Luxon DateTime with number in redux state

Luxon DateTimes are not serializable for redux. Therefore redux throws errors.

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

src/components/editor-page/document-bar/note-info/note-info-line-created.tsx

@@ -3,12 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Trans } from 'react-i18next'
 import { NoteInfoLine } from './note-info-line'
 import type { NoteInfoTimeLineProps } from './note-info-time-line'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
 import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
+import { DateTime } from 'luxon'
 
 /**
  * Renders an info line about the creation of the current note.
@@ -16,11 +17,12 @@ import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
  */
 export const NoteInfoLineCreated: React.FC<NoteInfoTimeLineProps> = ({ size }) => {
   const noteCreateTime = useApplicationState((state) => state.noteDetails.createdAt)
+  const noteCreateDateTime = useMemo(() => DateTime.fromSeconds(noteCreateTime), [noteCreateTime])
 
   return (
     <NoteInfoLine icon={'plus'} size={size}>
       <Trans i18nKey={'editor.modal.documentInfo.created'}>
-        <UnitalicBoldTimeFromNow time={noteCreateTime} />
+        <UnitalicBoldTimeFromNow time={noteCreateDateTime} />
       </Trans>
     </NoteInfoLine>
   )

src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx

@@ -11,6 +11,7 @@ import type { NoteInfoTimeLineProps } from './note-info-time-line'
 import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
 import { UnitalicBoldTrans } from './utils/unitalic-bold-trans'
 import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
+import { DateTime } from 'luxon'
 
 /**
  * Renders an info line about the last update of the current note.
@@ -19,6 +20,7 @@ import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-f
 export const NoteInfoLineUpdated: React.FC<NoteInfoTimeLineProps> = ({ size }) => {
   useTranslation()
   const noteUpdateTime = useApplicationState((state) => state.noteDetails.updatedAt)
+  const noteUpdateDateTime = useMemo(() => DateTime.fromSeconds(noteUpdateTime), [noteUpdateTime])
   const noteUpdateUser = useApplicationState((state) => state.noteDetails.updateUsername)
 
   const userBlock = useMemo(() => {
@@ -38,7 +40,7 @@ export const NoteInfoLineUpdated: React.FC<NoteInfoTimeLineProps> = ({ size }) =
     <NoteInfoLine icon={'pencil'} size={size}>
       <Trans i18nKey={'editor.modal.documentInfo.edited'}>
         {userBlock}
-        <UnitalicBoldTimeFromNow time={noteUpdateTime} />
+        <UnitalicBoldTimeFromNow time={noteUpdateDateTime} />
       </Trans>
     </NoteInfoLine>
   )

src/redux/note-details/initial-state.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { DateTime } from 'luxon'
 import type { NoteDetails } from './types/note-details'
 import { NoteTextDirection, NoteType } from './types/note-details'
 import type { SlideOptions } from './types/slide-show-options'
@@ -18,7 +17,6 @@ export const initialSlideOptions: SlideOptions = {
 }
 
 export const initialState: NoteDetails = {
-  updatedAt: DateTime.fromSeconds(0),
   updateUsername: null,
   version: 0,
   markdownContent: {
@@ -35,7 +33,8 @@ export const initialState: NoteDetails = {
     slideOptions: initialSlideOptions
   },
   id: '',
-  createdAt: DateTime.fromSeconds(0),
+  createdAt: 0,
+  updatedAt: 0,
   aliases: [],
   primaryAddress: '',
   permissions: {

src/redux/note-details/reducers/build-state-from-set-note-data-from-server.test.ts

@@ -114,8 +114,8 @@ describe('build state from set note data from server', () => {
       firstHeading: '',
       rawFrontmatter: '',
       id: 'id',
-      createdAt: DateTime.fromISO('2012-05-25T09:08:34.123'),
+      createdAt: DateTime.fromISO('2012-05-25T09:08:34.123').toSeconds(),
-      updatedAt: DateTime.fromISO('2020-05-25T09:08:34.123'),
+      updatedAt: DateTime.fromISO('2020-05-25T09:08:34.123').toSeconds(),
       updateUsername: 'updateusername',
       viewCount: 987,
       aliases: [

src/redux/note-details/reducers/build-state-from-set-note-data-from-server.ts

@@ -46,7 +46,7 @@ const convertNoteDtoToNoteDetails = (note: Note): NoteDetails => {
       lineStartIndexes: calculateLineStartIndexes(newLines)
     },
     rawFrontmatter: '',
-    createdAt: DateTime.fromISO(note.metadata.createdAt),
+    createdAt: DateTime.fromISO(note.metadata.createdAt).toSeconds(),
-    updatedAt: DateTime.fromISO(note.metadata.updatedAt)
+    updatedAt: DateTime.fromISO(note.metadata.updatedAt).toSeconds()
   }
 }

src/redux/note-details/types/note-details.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { DateTime } from 'luxon'
 import type { SlideOptions } from './slide-show-options'
 import type { ISO6391 } from './iso6391'
 import type { CursorSelection } from '../../editor/types'
@@ -16,8 +15,8 @@ type UnnecessaryNoteAttributes = 'updatedAt' | 'createdAt' | 'tags' | 'descripti
  * Redux state containing the currently loaded note with its content and metadata.
  */
 export interface NoteDetails extends Omit<NoteMetadata, UnnecessaryNoteAttributes> {
-  updatedAt: DateTime
+  updatedAt: number
-  createdAt: DateTime
+  createdAt: number
   markdownContent: {
     plain: string
     lines: string[]