Allowing user to explicitly set date format (en/cs) throughout the UI.

Author: krulis-martin

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}

src/components/widgets/DateTime/DateTime.js

@@ -3,16 +3,23 @@ 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';
 
 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>
     )}

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)",

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)",

src/pages/EditUser/EditUser.js

@@ -51,13 +51,15 @@ const prepareUserUIDataInitialValues = defaultMemoize(
     openedSidebar = true,
     useGravatar = true,
     defaultPage = null,
+    dateFormatOverride = null,
     editorFontSize = EDITOR_FONT_SIZE_DEFAULT,
   }) => ({
     darkTheme,
     vimMode,
     openedSidebar,
     useGravatar,
     defaultPage: defaultPage || '',
+    dateFormatOverride: dateFormatOverride || '',
     editorFontSize: prepareNumber(editorFontSize, EDITOR_FONT_SIZE_MIN, EDITOR_FONT_SIZE_MAX, EDITOR_FONT_SIZE_DEFAULT),
   })
 );