replaces moment with luxon (#621)

src/components/application-loader/initializers/i18n.ts

@@ -1,34 +1,7 @@
 import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import Backend from 'i18next-http-backend'
-import moment from 'moment'
-import 'moment/locale/ar'
-import 'moment/locale/ca'
-import 'moment/locale/cs'
-import 'moment/locale/da'
-import 'moment/locale/de'
-import 'moment/locale/el'
-import 'moment/locale/eo'
-import 'moment/locale/es'
-import 'moment/locale/fr'
-import 'moment/locale/hi'
-import 'moment/locale/hr'
-import 'moment/locale/id'
-import 'moment/locale/it'
-import 'moment/locale/ja'
-import 'moment/locale/ko'
-import 'moment/locale/nl'
-import 'moment/locale/pl'
-import 'moment/locale/pt'
-import 'moment/locale/ru'
-import 'moment/locale/sk'
-import 'moment/locale/sr'
-import 'moment/locale/sv'
-import 'moment/locale/tr'
-import 'moment/locale/uk'
-import 'moment/locale/vi'
-import 'moment/locale/zh-cn'
-import 'moment/locale/zh-tw'
+import { Settings } from 'luxon'
 import { initReactI18next } from 'react-i18next'
 
 export const setUpI18n = async (): Promise<void> => {
@@ -48,5 +21,5 @@ export const setUpI18n = async (): Promise<void> => {
       }
     })
 
-  moment.locale(i18n.language)
+  Settings.defaultLocale = i18n.language
 }

src/components/editor/document-bar/document-info/document-info-button.tsx

@@ -1,5 +1,5 @@
-import moment from 'moment'
 import React, { Fragment, useState } from 'react'
+import { DateTime } from 'luxon'
 import { ListGroup, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { CommonModal } from '../../../common/modals/common-modal'
@@ -25,14 +25,14 @@ export const DocumentInfoButton: React.FC = () => {
             <ListGroup.Item>
               <DocumentInfoTimeLine
                 mode={DocumentInfoLineWithTimeMode.CREATED}
-                time={ moment().subtract(11, 'days') }
+                time={DateTime.local().minus({ days: 11 })}
                 userName={'Tilman'}
                 profileImageSrc={'/avatar.png'}/>
             </ListGroup.Item>
             <ListGroup.Item>
               <DocumentInfoTimeLine
                 mode={DocumentInfoLineWithTimeMode.EDITED}
-                time={ moment().subtract(3, 'minutes') }
+                time={DateTime.local().minus({ minutes: 3 })}
                 userName={'Philip'}
                 profileImageSrc={'/avatar.png'}/>
             </ListGroup.Item>

src/components/editor/document-bar/document-info/document-info-time-line.tsx

@@ -1,4 +1,4 @@
-import { Moment } from 'moment'
+import { DateTime } from 'luxon'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { IconName } from '../../../common/fork-awesome/types'
@@ -8,7 +8,7 @@ import { TimeFromNow } from './time-from-now'
 import { UserAvatar } from '../../../common/user-avatar/user-avatar'
 
 export interface DocumentInfoLineWithTimeProps {
-  time: Moment,
+  time: DateTime,
   mode: DocumentInfoLineWithTimeMode
   userName: string
   profileImageSrc: string

src/components/editor/document-bar/document-info/time-from-now.tsx

@@ -1,12 +1,13 @@
-import { Moment } from 'moment'
+import { DateTime } from 'luxon'
+
 import React from 'react'
 
 export interface TimeFromNowProps {
-  time: Moment
+  time: DateTime
 }
 
 export const TimeFromNow: React.FC<TimeFromNowProps> = ({ time }) => {
   return (
-    <time className={'mx-1'} title={time.format('LLLL')} dateTime={time.format()}>{time.fromNow(true)}</time>
+    <time className={'mx-1'} title={time.toFormat('DDDD T')} dateTime={time.toString()}>{time.toRelative()}</time>
   )
 }

src/components/editor/document-bar/revisions/revision-modal-list-entry.tsx

@@ -1,5 +1,5 @@
-import moment from 'moment'
 import React from 'react'
+import { DateTime } from 'luxon'
 import { ListGroup } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
 import { RevisionListEntry } from '../../../../api/revisions/types'
@@ -23,7 +23,7 @@ export const RevisionModalListEntry: React.FC<RevisionModalListEntryProps> = ({
   >
     <span>
       <ForkAwesomeIcon icon={'clock-o'} className='mx-2'/>
-      {moment(revision.timestamp * 1000).format('LLLL')}
+      {DateTime.fromMillis(revision.timestamp * 1000).toFormat('DDDD T')}
     </span>
     <span>
       <ForkAwesomeIcon icon={'file-text-o'} className='mx-2'/>

src/components/editor/editor-pane/autocompletion/link-and-extra-tag.ts

@@ -1,5 +1,5 @@
 import { Editor, Hint, Hints, Pos } from 'codemirror'
-import moment from 'moment'
+import { DateTime } from 'luxon'
 import { getUser } from '../../../../redux/user/methods'
 import { findWordAtCursor, Hinter } from './index'
 
@@ -45,7 +45,7 @@ const linkAndExtraTagHint = (editor: Editor): Promise< Hints| null > => {
             case 'time':
               // show the current time when the autocompletion is opened and not when the function is loaded
               return {
-                text: `[time=${moment(new Date()).format('llll')}]`
+                text: `[time=${DateTime.local().toFormat('DDDD T')}]`
               }
             default:
               return {

src/components/history-page/history-card/history-card.tsx

@@ -1,5 +1,5 @@
-import moment from 'moment'
 import React from 'react'
+import { DateTime } from 'luxon'
 import { Badge, Card } from 'react-bootstrap'
 import { Link } from 'react-router-dom'
 import { formatHistoryDate } from '../utils'
@@ -22,7 +22,7 @@ export const HistoryCard: React.FC<HistoryEntryProps> = ({ entry, onPinClick, on
               <Card.Title className="m-0 mt-1dot5">{entry.title}</Card.Title>
               <div>
                 <div className="text-black-50 mt-2">
-                  <ForkAwesomeIcon icon="clock-o"/> {moment(entry.lastVisited).fromNow()}<br/>
+                  <ForkAwesomeIcon icon="clock-o"/> {DateTime.fromISO(entry.lastVisited).toRelative()}<br/>
                   {formatHistoryDate(entry.lastVisited)}
                 </div>
                 <div className={'card-footer-min-height p-0'}>

src/components/history-page/history-page.tsx

@@ -21,7 +21,7 @@ import { HistoryToolbar, HistoryToolbarState, initState as toolbarInitState } fr
 export interface HistoryEntry {
   id: string,
   title: string,
-  lastVisited: Date,
+  lastVisited: string,
   tags: string[],
   pinned: boolean
 }

src/components/history-page/utils.ts

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import { DateTime } from 'luxon'
 import { SortModeEnum } from './sort-button/sort-button'
 import {
   HistoryEntry,
@@ -85,8 +85,8 @@ function sortEntries (entries: LocatedHistoryEntry[], viewState: HistoryToolbarS
   })
 }
 
-export function formatHistoryDate (date: Date): string {
-  return moment(date).format('llll')
+export function formatHistoryDate (date: string): string {
+  return DateTime.fromISO(date).toFormat('DDDD T')
 }
 
 export interface V1HistoryEntry {
@@ -102,7 +102,7 @@ export function convertV1History (oldHistory: V1HistoryEntry[]): HistoryEntry[]
     return {
       id: entry.id,
       title: entry.text,
-      lastVisited: moment(entry.time).toDate(),
+      lastVisited: DateTime.fromMillis(entry.time).toISO(),
       tags: entry.tags,
       pinned: entry.pinned
     }

src/components/landing-layout/footer/language-picker.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import { Settings } from 'luxon'
 import React, { useCallback } from 'react'
 import { Form } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
@@ -47,7 +47,7 @@ const LanguagePicker: React.FC = () => {
 
   const onChangeLang = useCallback(() => async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const language = event.currentTarget.value
-    moment.locale(language)
+    Settings.defaultLocale = language
     await i18n.changeLanguage(language)
   }, [i18n])