From 17b0d48f548f348304626616e3d18697fa049022 Mon Sep 17 00:00:00 2001
From: Martin Krulis <krulis@d3s.mff.cuni.cz>
Date: Wed, 20 Jul 2022 23:02:56 +0200
Subject: [PATCH] Allowing user to explicitly set date format (en/cs)
 throughout the UI.

---
 .../EditUserUIDataForm/EditUserUIDataForm.js  | 20 +++++++++++++++++++
 src/components/widgets/DateTime/DateTime.js   | 18 ++++++++++++++++-
 src/locales/cs.json                           |  1 +
 src/locales/en.json                           |  1 +
 src/pages/EditUser/EditUser.js                |  2 ++
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js b/src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js
index 421267037..dc067caf0 100644
--- a/src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js
+++ b/src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js
@@ -32,6 +32,11 @@ const getDefaultPages = defaultMemoize(formatMessage =>
   }))
 );
 
+const dateFormatOverrideOptions = [
+  { key: 'cs', name: 'Český formát (d. m. yyyy)' },
+  { key: 'en', name: 'English format (m/d/yyyy)' },
+];
+
 export const EDITOR_FONT_SIZE_MIN = 5;
 export const EDITOR_FONT_SIZE_MAX = 50;
 export const EDITOR_FONT_SIZE_DEFAULT = 16;
@@ -81,6 +86,19 @@ const EditUserUIDataForm = ({
       label={<FormattedMessage id="app.editUserUIData.defaultPage" defaultMessage="Default page (after login):" />}
     />
 
+    <Field
+      name="dateFormatOverride"
+      component={SelectField}
+      options={dateFormatOverrideOptions}
+      addEmptyOption={true}
+      label={
+        <FormattedMessage
+          id="app.editUserUIData.dateFormatOverride"
+          defaultMessage="Date format override (if not set, date is formatted according to selected language):"
+        />
+      }
+    />
+
     <Field
       name="openedSidebar"
       component={CheckboxField}
@@ -100,6 +118,8 @@ const EditUserUIDataForm = ({
       }
     />
 
+    <hr />
+
     <NumericTextField
       name="editorFontSize"
       maxLength={2}
diff --git a/src/components/widgets/DateTime/DateTime.js b/src/components/widgets/DateTime/DateTime.js
index c449b0d70..8bc3e2bc0 100644
--- a/src/components/widgets/DateTime/DateTime.js
+++ b/src/components/widgets/DateTime/DateTime.js
@@ -3,9 +3,12 @@ import PropTypes from 'prop-types';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { FormattedDate, FormattedTime, FormattedRelativeTime } from 'react-intl';
 import classnames from 'classnames';
+import { defaultMemoize } from 'reselect';
 
 import Icon from '../../icons';
 import { EMPTY_OBJ } from '../../../helpers/common';
+import { UserUIDataContext } from '../../../helpers/contexts';
+import { knownLocales } from '../../../helpers/localizedData';
 
 import styles from './DateTime.less';
 
@@ -13,6 +16,10 @@ const isAfter = unixTime => {
   return unixTime * 1000 < Date.now();
 };
 
+const getLocalizedIntlDateFormatter = defaultMemoize(locale =>
+  locale && knownLocales.includes(locale) ? new Intl.DateTimeFormat(locale) : null
+);
+
 const dateTime = ({
   unixts,
   isDeadline = false,
@@ -42,7 +49,16 @@ const dateTime = ({
         className={classnames({
           'text-nowrap': true,
         })}>
-        <FormattedDate value={unixts * 1000} />
+        <UserUIDataContext.Consumer>
+          {({ dateFormatOverride = null }) =>
+            getLocalizedIntlDateFormatter(dateFormatOverride) ? (
+              getLocalizedIntlDateFormatter(dateFormatOverride).format(unixts * 1000)
+            ) : (
+              <FormattedDate value={unixts * 1000} />
+            )
+          }
+        </UserUIDataContext.Consumer>
+
         {(showTime || showRelative) && <span className="px-1"> </span>}
       </span>
     )}
diff --git a/src/locales/cs.json b/src/locales/cs.json
index 2960e8544..9225e97e0 100644
--- a/src/locales/cs.json
+++ b/src/locales/cs.json
@@ -606,6 +606,7 @@
   "app.editUserSettings.submissionEvaluatedEmails": "Řešení vyhodnoceno (pokud trvalo delší dobu)",
   "app.editUserSettings.title": "Uživatelské nastavení",
   "app.editUserUIData.darkTheme": "Použít tmavý motiv pro editor zdrojového kódu",
+  "app.editUserUIData.dateFormatOverride": "Explicitní nastavení formátu data (pokud není formát nastaven, určí se podle aktuálního jazyka):",
   "app.editUserUIData.defaultPage": "Výchozí stránka (po přihlášení):",
   "app.editUserUIData.defaultPage.dashboard": "Přehled",
   "app.editUserUIData.defaultPage.home": "Domovská stránka (o ReCodExu)",
diff --git a/src/locales/en.json b/src/locales/en.json
index f4796f0db..f0a1e8e83 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -606,6 +606,7 @@
   "app.editUserSettings.submissionEvaluatedEmails": "Submission evaluation (when taking a long time)",
   "app.editUserSettings.title": "User Settings",
   "app.editUserUIData.darkTheme": "Use a dark theme for the source code viewers and editors",
+  "app.editUserUIData.dateFormatOverride": "Date format override (if not set, date is formatted according to selected language):",
   "app.editUserUIData.defaultPage": "Default page (after login):",
   "app.editUserUIData.defaultPage.dashboard": "Dashboard",
   "app.editUserUIData.defaultPage.home": "Home page (about)",
diff --git a/src/pages/EditUser/EditUser.js b/src/pages/EditUser/EditUser.js
index 59199928a..e52dd499e 100644
--- a/src/pages/EditUser/EditUser.js
+++ b/src/pages/EditUser/EditUser.js
@@ -51,6 +51,7 @@ const prepareUserUIDataInitialValues = defaultMemoize(
     openedSidebar = true,
     useGravatar = true,
     defaultPage = null,
+    dateFormatOverride = null,
     editorFontSize = EDITOR_FONT_SIZE_DEFAULT,
   }) => ({
     darkTheme,
@@ -58,6 +59,7 @@ const prepareUserUIDataInitialValues = defaultMemoize(
     openedSidebar,
     useGravatar,
     defaultPage: defaultPage || '',
+    dateFormatOverride: dateFormatOverride || '',
     editorFontSize: prepareNumber(editorFontSize, EDITOR_FONT_SIZE_MIN, EDITOR_FONT_SIZE_MAX, EDITOR_FONT_SIZE_DEFAULT),
   })
 );