Unify date formatting, base it on locale

This patch aims for a consistent date display across the entire
ui. That it is not always consistent can be seen for example in the
event details metadata, where the start date is formatted differently
from the created date.

Furthermore, this patch aims to base date formatting more on the
chosen locale to create a more intuitive experience for users.
No more A.M./P.M. in the german locale for example.

To achieve this, date-fns is chosen as the gold standard and momentjs
is removed from the project completely. Not only because
moment is legacy, but also because our datepickers were
using date-fns already and will not use anything else.

Additionally, this removes our custom date formatting from
the translation files and replaces it with date-fns tokens. In my
opinion, we do not need to try and be smarter than our datetime
library when it comes to formatting dates. Translators retain the
ability to enforce their favourite
formatting should they so chose,
but will have to be aware that it will not be respect everywhere,
e.g. not in the datepickers.

This patch contains changes to all translation files. I am aware that
everything except en_US will get overwritten, the changes to other
languages are merely for ease of reviewing. If this patch is merged,
the translations should be adapted asap as per this example.

Author: Arnei

package-lock.json

@@ -23,8 +23,6 @@
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-http-backend": "^3.0.2",
     "lodash": "^4.17.23",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.6.0",
     "react": "^19.2.4",
     "react-chartjs-2": "^5.3.1",
     "react-datepicker": "^8.8.0",

package.json

@@ -52,6 +52,7 @@ import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
 import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 import { ParseKeys } from "i18next";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
+import i18n from "../../../../i18n/i18n";
 
 export type InitialValues = {
 	scheduleStartDate: string;
@@ -104,7 +105,7 @@ const EventDetailsSchedulingTab = ({
 	}, []);
 
 	// Get info about the current language and its date locale
-	const currentLanguage = getCurrentLanguageInformation();
+	const currentLanguage = getCurrentLanguageInformation(i18n.language);
 
 	// Get timezone offset; Checks should be performed on UTC times
 	const offset = getTimezoneOffset();

src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx

@@ -49,6 +49,7 @@ import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
 import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
 import { ParseKeys } from "i18next";
 import { LuCircleX } from "react-icons/lu";
+import i18n from "../../../../i18n/i18n";
 
 /**
  * This component renders the source page for new events in the new event wizard.
@@ -390,7 +391,7 @@ const Schedule = <T extends {
 	inputDevices: Recording[]
 }) => {
 	const { t } = useTranslation();
-	const currentLanguage = getCurrentLanguageInformation();
+	const currentLanguage = getCurrentLanguageInformation(i18n.language);
 	const dispatch = useAppDispatch();
 
 	// Parse start-Date strings

src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx

@@ -4,6 +4,7 @@ import { hours, minutes } from "../../../../../configs/modalConfig";
 import { formatTimeForDropdown } from "../../../../../utils/dropDownUtils";
 import { getCurrentLanguageInformation } from "../../../../../utils/utils";
 import { ParseKeys } from "i18next";
+import i18n from "../../../../../i18n/i18n";
 
 const SchedulingTime = ({
 	hour,
@@ -28,7 +29,7 @@ const SchedulingTime = ({
 }) => {
 	const { t } = useTranslation();
 	// Get info about the current language and its date locale
-	const currentLanguage = getCurrentLanguageInformation();
+	const currentLanguage = getCurrentLanguageInformation(i18n.language);
 
 	return (
 		<tr>

src/components/events/partials/wizards/scheduling/SchedulingTime.tsx

@@ -18,7 +18,6 @@ import {
 import TableFilterProfiles from "./TableFilterProfiles";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { useHotkeys } from "react-hotkeys-hook";
-import moment from "moment";
 import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
 import { renderValidDate } from "../../utils/dateUtils";
 import { getCurrentLanguageInformation } from "../../utils/utils";
@@ -30,6 +29,8 @@ import SearchContainer from "./SearchContainer";
 import { Resource } from "../../slices/tableSlice";
 import { HiFunnel } from "react-icons/hi2";
 import { LuSettings, LuX } from "react-icons/lu";
+import { isValid } from "date-fns";
+import i18n from "../../i18n/i18n";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -196,7 +197,7 @@ const TableFilters = ({
 	};
 
 	const submitDateFilter = async (start: Date | undefined | null, end: Date | undefined | null) => {
-		if (start && end && moment(start).isValid() && moment(end).isValid()) {
+		if (start && end && isValid(start) && isValid(end)) {
 			const filter = filterMap.find(({ name }) => name === selectedFilter);
 			if (filter) {
 				dispatch(editFilterValue({
@@ -482,7 +483,7 @@ const FilterSwitch = ({
 						popperPlacement="bottom"
 						popperClassName="datepicker-custom"
 						className="datepicker-custom-input"
-						locale={getCurrentLanguageInformation()?.dateLocale}
+						locale={getCurrentLanguageInformation(i18n.language)?.dateLocale}
 						strictParsing
 					/>
 				</div>

src/components/shared/TableFilters.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import moment from "moment";
 import { getCurrentLanguageInformation } from "../../utils/utils";
 import DatePicker from "react-datepicker";
 import { Formik, FormikErrors } from "formik";
@@ -11,14 +10,16 @@ import {
 	statisticDateFormatStrings,
 	statisticTimeModes,
 } from "../../configs/statisticsConfig";
-import { localizedMoment } from "../../utils/dateUtils";
+import { formatRangeEnd, formatRangeStart } from "../../utils/dateUtils";
 import { useTranslation } from "react-i18next";
 import type { ChartOptions } from "chart.js";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import { useAppDispatch } from "../../store";
 import { DataResolution, Statistics, TimeMode } from "../../slices/statisticsSlice";
 import { ParseKeys } from "i18next";
 import { LuChevronLeft, LuChevronRight, LuDownload } from "react-icons/lu";
+import { add, format, parseISO, sub } from "date-fns";
+import i18n from "../../i18n/i18n";
 
 
 /**
@@ -73,12 +74,17 @@ const TimeSeriesStatistics = ({
 	const formatStrings = statisticDateFormatStrings;
 
 	// Get info about the current language and its date locale
-	const currentLanguage = getCurrentLanguageInformation();
+	const currentLanguage = getCurrentLanguageInformation(i18n.language);
 
 	// Set the date for the react-datepicker
 	const [startDatepicker, setStartDatepicker] = useState(fromDate ? new Date(fromDate) : null);
 	const [endDatepicker, setEndDatepicker] = useState(toDate ? new Date(toDate) : null);
 
+	const unitMap = {
+		year: "years",
+		month: "months",
+	} as const;
+
 	// change formik values and get new statistic values from API
 	const change = (
 		setFormikValue: (field: string, value: any) => Promise<void | FormikErrors<any>>,
@@ -88,8 +94,8 @@ const TimeSeriesStatistics = ({
 		dataResolution: DataResolution,
 	) => {
 		if (timeMode === "year" || timeMode === "month") {
-			from = moment(from).clone().startOf(timeMode).format("YYYY-MM-DD");
-			to = moment(from).clone().endOf(timeMode).format("YYYY-MM-DD");
+			from = formatRangeStart(from, timeMode);
+			to = formatRangeEnd(from, timeMode);
 			setStartDatepicker(new Date(from));
 			setEndDatepicker(new Date(to));
 			setFormikValue("fromDate", from);
@@ -129,9 +135,8 @@ const TimeSeriesStatistics = ({
 		from: string,
 		timeMode: keyof typeof formatStrings,
 	) => {
-		return localizedMoment(from, currentLanguage ? currentLanguage.dateLocale.code : "en").format(
-			formatStrings[timeMode],
-		);
+		const locale = currentLanguage?.dateLocale;
+		return format(parseISO(from), formatStrings[timeMode], { locale });
 	};
 
 	// change to and from dates in formik to previous timeframe and get new values from API
@@ -141,10 +146,11 @@ const TimeSeriesStatistics = ({
 		timeMode: TimeMode,
 		dataResolution: DataResolution,
 	) => {
-		const newFrom = moment(from)
-			// According to the moment.js docs, string is supported as a second argument here
-			.subtract(1, timeMode + "s" as moment.unitOfTime.DurationConstructor)
-			.format("YYYY-MM-DD");
+		if (timeMode === "custom") { return; }
+
+		const date = parseISO(from);
+		const newFromDate = sub(date, { [unitMap[timeMode]]: 1 });
+		const newFrom = format(newFromDate, "yyyy-MM-dd");
 		const to = newFrom;
 		change(setFormikValue, timeMode, newFrom, to, dataResolution);
 	};
@@ -156,10 +162,11 @@ const TimeSeriesStatistics = ({
 		timeMode: TimeMode,
 		dataResolution: DataResolution,
 	) => {
-		const newFrom = moment(from)
-			// According to the moment.js docs, string is supported as a second argument here
-			.add(1, timeMode + "s" as moment.unitOfTime.DurationConstructor)
-			.format("YYYY-MM-DD");
+		if (timeMode === "custom") { return; }
+
+		const date = parseISO(from);
+		const newFromDate = add(date, { [unitMap[timeMode]]: 1 });
+		const newFrom = format(newFromDate, "yyyy-MM-dd");
 		const to = newFrom;
 		change(setFormikValue, timeMode, newFrom, to, dataResolution);
 	};
@@ -171,12 +178,8 @@ const TimeSeriesStatistics = ({
 			initialValues={{
 				timeMode: timeMode,
 				dataResolution: dataResolution,
-				// Typescript complains that the method "startOf" cannot take "custom" as a parameter, but in practice
-				// this does not seem to be a problem
-				// @ts-expect-error: timeMode should be assignable here
-				fromDate: moment(fromDate).startOf(timeMode).format("YYYY-MM-DD"),
-				// @ts-expect-error: timeMode should be assignable here
-				toDate: moment(toDate).endOf(timeMode).format("YYYY-MM-DD"),
+				fromDate: formatRangeStart(fromDate, timeMode),
+				toDate: formatRangeEnd(toDate, timeMode),
 			}}
 			onSubmit={() => {}}
 		>
@@ -282,8 +285,8 @@ const TimeSeriesStatistics = ({
 										const [startDate, endDate] = dates;
 										setStartDatepicker(startDate);
 										setEndDatepicker(endDate);
-										const newStartDate = startDate ? moment(startDate).format("YYYY-MM-DD") : formik.values.fromDate;
-										const newEndDate = endDate ? moment(endDate).format("YYYY-MM-DD") : formik.values.toDate;
+										const newStartDate = startDate ? format(startDate, "yyyy-MM-dd") : formik.values.fromDate;
+										const newEndDate = endDate ? format(endDate, "yyyy-MM-dd") : formik.values.toDate;
 										change(
 											formik.setFieldValue,
 											formik.values.timeMode,
@@ -304,7 +307,7 @@ const TimeSeriesStatistics = ({
 									popperPlacement="bottom"
 									popperClassName="datepicker-custom"
 									className="datepicker-custom-input"
-									locale={getCurrentLanguageInformation()?.dateLocale}
+									locale={getCurrentLanguageInformation(i18n.language)?.dateLocale}
 									strictParsing
 								/>
 							</div>

src/components/shared/TimeSeriesStatistics.tsx

@@ -12,6 +12,7 @@ import { GroupBase, SelectInstance } from "react-select";
 import TextareaAutosize from "react-textarea-autosize";
 import { LuCheck, LuSquarePen } from "react-icons/lu";
 import axios from "axios";
+import i18n from "../../../i18n/i18n";
 
 /**
  * This component renders an editable field for single values depending on the type of the corresponding metadata
@@ -188,7 +189,7 @@ const EditableDateValue = ({
 				popperClassName="datepicker-custom"
 				className="datepicker-custom-input"
 				wrapperClassName="datepicker-custom-wrapper"
-				locale={getCurrentLanguageInformation()?.dateLocale}
+				locale={getCurrentLanguageInformation(i18n.language)?.dateLocale}
 				strictParsing
 				autoFocus={isFirstField}
 			/>
@@ -319,7 +320,7 @@ const EditableSingleValueTime = ({
 				popperClassName="datepicker-custom"
 				className="datepicker-custom-input"
 				wrapperClassName="datepicker-custom-wrapper"
-				locale={getCurrentLanguageInformation()?.dateLocale}
+				locale={getCurrentLanguageInformation(i18n.language)?.dateLocale}
 				strictParsing
 				autoFocus={isFirstField}
 			/>

src/components/shared/wizard/RenderField.tsx

@@ -1,5 +1,5 @@
 import { Service } from "../../../slices/serviceSlice";
-import moment from "moment";
+import { formatHMS } from "../../../utils/dateUtils";
 
 /**
  * This component renders the mean queue time cells of systems in the table view
@@ -12,7 +12,7 @@ const MeanQueueTimeCell = ({
 
 	return (
 		<span>
-			{ moment.utc(moment.duration(row.meanQueueTime * 1000).asMilliseconds()).format("HH:mm:ss") }
+			 {formatHMS(row.meanQueueTime)}
 		</span>
 	);
 };

src/components/systems/partials/MeanQueueTimeCell.tsx

@@ -1,5 +1,5 @@
 import { Service } from "../../../slices/serviceSlice";
-import moment from "moment";
+import { formatHMS } from "../../../utils/dateUtils";
 
 /**
  * This component renders the mean run time cells of systems in the table view
@@ -12,7 +12,7 @@ const MeanRunTimeCell = ({
 
 	return (
 		<span>
-			{ moment.utc(moment.duration(row.meanRunTime * 1000).asMilliseconds()).format("HH:mm:ss") }
+			{formatHMS(row.meanQueueTime)}
 		</span>
 	);
 };