Switch from moment to luxon (#5352)

Moment is ..deprecated, https://momentjs.com/docs/#/-project-status/

Switching DateComponent to luxon.

Author: himdel

package-lock.json

@@ -20,7 +20,7 @@
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
+    "luxon": "^3.5.0",
     "monaco-editor": "^0.44.0",
     "monaco-yaml": "^5.2.2",
     "react": "^18.3.1",

package.json

@@ -1,12 +1,16 @@
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import React from 'react';
 import { Tooltip } from 'src/components';
+import { language as locale } from 'src/l10n';
+
+const dateFormat = (date) =>
+  DateTime.fromISO(date, { locale }).toFormat('d MMMM y, HH:mm z');
+const relativeFormat = (date) =>
+  DateTime.fromISO(date, { locale }).toRelative();
 
 export const DateComponent = ({ date }: { date: string }) =>
   date && (
     <time dateTime={date}>
-      <Tooltip content={moment(date).format('DD MMMM YYYY, HH:mm Z')}>
-        {moment(date).fromNow()}
-      </Tooltip>
+      <Tooltip content={dateFormat(date)}>{relativeFormat(date)}</Tooltip>
     </time>
   );

src/components/date-component.tsx

@@ -1,5 +1,4 @@
 import { i18n } from '@lingui/core';
-import * as moment from 'moment';
 
 // remember to update lingui.config.js as well
 export const availableLanguages = [
@@ -12,6 +11,7 @@ export const availableLanguages = [
   'ja',
   'zh',
 ];
+
 export const languageNames = {
   en: 'English',
   es: 'Español',
@@ -23,11 +23,6 @@ export const languageNames = {
   zh: '中文',
 };
 
-// map missing moment locales (node_modules/moment/src/locale/<locale>.js must exist, except for english)
-const momentLocales = {
-  zh: 'zh-cn',
-};
-
 async function activate(locale: string, pseudolocalization = false) {
   const { messages } = await import(`src/../locale/${locale}.js`);
 
@@ -45,8 +40,6 @@ async function activate(locale: string, pseudolocalization = false) {
 
   i18n.load(locale, messages);
   i18n.activate(locale);
-
-  moment.locale(momentLocales[locale] || locale);
 }
 
 // Accept-Language