replaces moment with luxon (#621)

package.json

@@ -17,6 +17,7 @@
         "@types/highlight.js": "9.12.4",
         "@types/jest": "26.0.14",
         "@types/js-yaml": "3.12.5",
+        "@types/luxon": "1.25.0",
         "@types/markdown-it": "10.0.2",
         "@types/markdown-it-anchor": "4.0.4",
         "@types/markdown-it-container": "2.0.3",
@@ -58,6 +59,7 @@
         "i18next-http-backend": "1.0.21",
         "js-yaml": "3.14.0",
         "katex": "0.12.0",
+        "luxon": "1.25.0",
         "markdown-it": "11.0.1",
         "markdown-it-abbr": "1.0.4",
         "markdown-it-anchor": "5.3.0",
@@ -78,7 +80,6 @@
         "markdown-it-toc-done-right": "4.1.0",
         "markmap-lib": "0.8.1",
         "mermaid": "8.8.0",
-        "moment": "2.29.0",
         "node-sass": "4.14.1",
         "react": "16.13.1",
         "react-bootstrap": "1.3.0",

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])
 

yarn.lock

@@ -2169,6 +2169,11 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
   integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
 
+"@types/luxon@1.25.0":
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.25.0.tgz#3d6fe591fac874f48dd225cb5660b2b785a21a05"
+  integrity sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g==
+
 "@types/markdown-it-anchor@4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@types/markdown-it-anchor/-/markdown-it-anchor-4.0.4.tgz#f36b67608d238d15024fb6508efd7ad3990209f6"
@@ -9209,6 +9214,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72"
+  integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ==
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -9696,11 +9706,6 @@ moment-mini@^2.22.1:
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
   integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
 
-moment@2.29.0:
-  version "2.29.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425"
-  integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA==
-
 moment@^2.27.0:
   version "2.28.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.28.0.tgz#cdfe73ce01327cee6537b0fafac2e0f21a237d75"