fix(i18n): format times and dates according to locale

ui/src/App.tsx

@@ -25,12 +25,19 @@ import MessageSheet from "views/journal/MessageSheet";
 import { Layout, LayoutMarginLess } from "views/Layout";
 import { default as client } from "client";
 import { Provider as FeatureFlagProvider } from "FeatureFlags";
-
+import "./i18n";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import de from "dayjs/locale/de";
+import fr from "dayjs/locale/fr";
+import it from "dayjs/locale/it";
+import en from "dayjs/locale/en";
 const Map = lazy(() => import("views/map"));
 
 function App() {
   const [userState, setUserState] = useState<UserState>({ isLoggedin: false, email: "", username: "" });
   const { i18n } = useTranslation();
+  dayjs.extend(LocalizedFormat);
 
   const setUserStateFromUserinfo = () => {
     fetch("/oauth2/userinfo", { credentials: "include" })
@@ -55,6 +62,22 @@ function App() {
   useEffect(() => {
     setUserStateFromUserinfo();
     i18n.changeLanguage();
+    const locale = (lang: string) => {
+      switch (lang) {
+        case "de":
+          return de;
+        case "en":
+          return en;
+        case "fr":
+          return fr;
+        case "it":
+          return it;
+        default:
+          return en;
+      }
+    };
+    const lang = locale(i18n.language);
+    dayjs.locale(lang.toString());
 
     const interval = setInterval(() => {
       setUserStateFromUserinfo();

ui/src/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import { ReloadPrompt } from "utils";
-import "./i18n";
 import reportWebVitals from "./reportWebVitals";
 const container = document.getElementById("root");
 

ui/src/utils/useDate.tsx

@@ -1,7 +1,9 @@
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const useDate = () => {
+  const { i18n } = useTranslation();
   const [now, setNow] = useState(new Date());
   useEffect(() => {
     const timer = setInterval(() => {
@@ -12,8 +14,8 @@ export const useDate = () => {
     };
   }, []);
 
-  const date = dayjs(now).format("LL");
-  const time = dayjs(now).format("LT");
+  const date = dayjs(now).locale(i18n.language).format("LL");
+  const time = dayjs(now).locale(i18n.language).format("LT");
 
   return {
     now,

ui/src/views/journal/Message.tsx

@@ -1,8 +1,6 @@
 import classNames from "classnames";
 import dayjs from "dayjs";
-import de from "dayjs/locale/de";
-import LocalizedFormat from "dayjs/plugin/localizedFormat";
-import relativeTime from "dayjs/plugin/relativeTime";
+
 import { useBooleanFlagValue } from "@openfeature/react-sdk";
 import { faArrowsToEye, faEdit, faPrint, faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -27,10 +25,6 @@ export interface MessageProps {
   setTriageMessage?: (message: MessageType | undefined) => void;
 }
 
-dayjs.locale(de);
-dayjs.extend(LocalizedFormat);
-dayjs.extend(relativeTime);
-
 function Message({
   id,
   sender,
@@ -45,7 +39,7 @@ function Message({
   setTriageMessage,
   origMessage,
 }: MessageProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { incidentId, journalId } = useParams();
   const showTasks = useBooleanFlagValue("show-tasks", false);
 
@@ -102,7 +96,7 @@ function Message({
               <div className="level-item has-text-centered is-flex-shrink-1">
                 <div className="mb-0">
                   <p className="heading is-size-7">{t("message.time")}</p>
-                  <p className="subtitle is-size-7">{dayjs(timeDate).format("LLL")}</p>
+                  <p className="subtitle is-size-7">{dayjs(timeDate).locale(i18n.language).format("LLL")}</p>
                 </div>
               </div>
               <div className="level-item has-text-centered is-flex-shrink-1">

ui/src/views/journal/MessageSheet.tsx

@@ -3,7 +3,6 @@ import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Spinner } from "components";
 import dayjs from "dayjs";
-import de from "dayjs/locale/de";
 import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 
@@ -13,13 +12,12 @@ import { useParams } from "react-router-dom";
 import { Medium, PriorityStatus, TriageMessageData, TriageMessageVars, TriageStatus } from "types";
 import { GetMessageForTriage } from "./graphql";
 
-dayjs.locale(de);
 dayjs.extend(LocalizedFormat);
 dayjs.extend(relativeTime);
 
 function MessageSheet() {
   const { messageId } = useParams();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const { loading, error, data } = useQuery<TriageMessageData, TriageMessageVars>(GetMessageForTriage, {
     variables: { messageId: messageId },
@@ -60,9 +58,9 @@ function MessageSheet() {
               </tr>
               <tr>
                 <th>{t("message.time")}</th>
-                <td>{dayjs(data?.messagesByPk.createdAt).format("LLL")}</td>
+                <td>{dayjs(data?.messagesByPk.createdAt).locale(i18n.language).format("LLL")}</td>
                 <th>{t("message.createdAt")}</th>
-                <td>{dayjs(data?.messagesByPk.createdAt).format("LLL")}</td>
+                <td>{dayjs(data?.messagesByPk.createdAt).locale(i18n.language).format("LLL")}</td>
               </tr>
               <tr>
                 <th>{t("message.id")}</th>

ui/src/views/journal/Overview.tsx

@@ -1,6 +1,8 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import relativeTime from "dayjs/plugin/relativeTime";
 
 import {
   faChartSimple,
@@ -15,21 +17,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { Spinner } from "components";
 import dayjs from "dayjs";
-import de from "dayjs/locale/de";
-import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import { t } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Journal, JournalListData, JournalListVars } from "types";
 import { CloseJournal, GetJournals } from "./graphql";
 
-dayjs.locale(de);
-dayjs.extend(LocalizedFormat);
-
 function Overview() {
   const { incidentId } = useParams();
   const [filterClosed, setFilterClosed] = useState(true);
   const navigate = useNavigate();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  useEffect(() => {
+    dayjs.extend(LocalizedFormat);
+    dayjs.extend(relativeTime);
+  }, [i18n.language]);
 
   const { loading, error, data } = useQuery<JournalListData, JournalListVars>(GetJournals, {
     variables: { incidentId: incidentId || "" },