feat: Add date/time template options to template titles

shared/i18n/index.ts

@@ -1,6 +1,7 @@
 import i18n from "i18next";
 import backend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
+import { unicodeBCP47toCLDR, unicodeCLDRtoBCP47 } from "../utils/date";
 
 // Note: Updating the available languages? Make sure to also update the
 // locales array in app/utils/i18n.js to enable translation for timestamps.
@@ -77,14 +78,8 @@ export const languageOptions = [
 
 export const languages: string[] = languageOptions.map((i) => i.value);
 
-// Languages are stored in en_US format in the database, however the
-// frontend translation framework (i18next) expects en-US
-const underscoreToDash = (text: string) => text.replace("_", "-");
-
-const dashToUnderscore = (text: string) => text.replace("-", "_");
-
 export const initI18n = (defaultLanguage = "en_US") => {
-  const lng = underscoreToDash(defaultLanguage);
+  const lng = unicodeCLDRtoBCP47(defaultLanguage);
   i18n
     .use(backend)
     .use(initReactI18next)
@@ -94,7 +89,7 @@ export const initI18n = (defaultLanguage = "en_US") => {
         // this must match the path defined in routes. It's the path that the
         // frontend UI code will hit to load missing translations.
         loadPath: (languages: string[]) =>
-          `/locales/${dashToUnderscore(languages[0])}.json`,
+          `/locales/${unicodeBCP47toCLDR(languages[0])}.json`,
       },
       interpolation: {
         escapeValue: false,
@@ -104,7 +99,7 @@ export const initI18n = (defaultLanguage = "en_US") => {
       },
       lng,
       fallbackLng: lng,
-      supportedLngs: languages.map(underscoreToDash),
+      supportedLngs: languages.map(unicodeCLDRtoBCP47),
       // Uncomment when debugging translation framework, otherwise it's noisy
       keySeparator: false,
     });

shared/utils/date.ts

@@ -20,13 +20,33 @@ export function subtractDate(date: Date, period: DateFilter) {
   }
 }
 
+/**
+ * Converts a locale string from Unicode CLDR format to BCP47 format.
+ *
+ * @param locale The locale string to convert
+ * @returns The converted locale string
+ */
+export function unicodeCLDRtoBCP47(locale: string) {
+  return locale.replace("_", "-").replace("root", "und");
+}
+
+/**
+ * Converts a locale string from BCP47 format to Unicode CLDR format.
+ *
+ * @param locale The locale string to convert
+ * @returns The converted locale string
+ */
+export function unicodeBCP47toCLDR(locale: string) {
+  return locale.replace("-", "_").replace("und", "root");
+}
+
 /**
  * Returns the current date as a string formatted depending on current locale.
  *
  * @returns The current date
  */
-export function getCurrentDateAsString() {
-  return new Date().toLocaleDateString(undefined, {
+export function getCurrentDateAsString(locales?: Intl.LocalesArgument) {
+  return new Date().toLocaleDateString(locales, {
     year: "numeric",
     month: "long",
     day: "numeric",
@@ -38,8 +58,8 @@ export function getCurrentDateAsString() {
  *
  * @returns The current time
  */
-export function getCurrentTimeAsString() {
-  return new Date().toLocaleTimeString(undefined, {
+export function getCurrentTimeAsString(locales?: Intl.LocalesArgument) {
+  return new Date().toLocaleTimeString(locales, {
     hour: "numeric",
     minute: "numeric",
   });
@@ -51,8 +71,8 @@ export function getCurrentTimeAsString() {
  *
  * @returns The current date and time
  */
-export function getCurrentDateTimeAsString() {
-  return new Date().toLocaleString(undefined, {
+export function getCurrentDateTimeAsString(locales?: Intl.LocalesArgument) {
+  return new Date().toLocaleString(locales, {
     year: "numeric",
     month: "long",
     day: "numeric",