use 'i18n.resolvedLanguage', not 'language'

This was added in a relatively recent version of i18next; some online resources haven't updated to reflect it https://www.i18next.com/overview/api#resolvedlanguage `language` is what i18next detected or we have set it to. It could be either a locale code like 'en-US' or a plain language like 'en'. `resolvedLanguage` is what language is actually being used for translation, after considering what is detected, what langauges we provided, and what fallbacks we specified. In our case this should always be either 'en', 'es', or 'lo' - the 3 languages we support at this time. So `resolvedLanguage` is the safe property to use and we should avoid `language`.
e-mission · Feb 12, 2024 · 633db15 · 633db15
1 parent 069a72e
commit 633db15
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 10 deletions.
diff --git a/www/js/config/useImperialConfig.ts b/www/js/config/useImperialConfig.ts
@@ -25,7 +25,7 @@ export function formatForDisplay(value: number): string {
   if (value >= 100) opts.maximumFractionDigits = 0;
   else if (value >= 1) opts.maximumSignificantDigits = 3;
   else opts.maximumFractionDigits = 2;
-  return Intl.NumberFormat(i18next.language, opts).format(value);
+  return Intl.NumberFormat(i18next.resolvedLanguage, opts).format(value);
 }
 
 export function convertDistance(distMeters: number, imperial: boolean): number {

diff --git a/www/js/control/DataDatePicker.tsx b/www/js/control/DataDatePicker.tsx
@@ -26,7 +26,7 @@ const DataDatePicker = ({ date, setDate, open, setOpen, minDate }) => {
   return (
     <>
       <DatePickerModal
-        locale={i18n.language}
+        locale={i18n.resolvedLanguage || 'en'}
         mode="single"
         visible={open}
         onDismiss={onDismiss}

diff --git a/www/js/diary/diaryHelper.ts b/www/js/diary/diaryHelper.ts
@@ -156,7 +156,7 @@ export function getFormattedTimeRange(beginFmtTime: string, endFmtTime: string)
   const endTime = DateTime.fromISO(endFmtTime, { setZone: true });
   const range = endTime.diff(beginTime, ['hours', 'minutes']);
   return humanizeDuration(range.as('milliseconds'), {
-    language: i18next.language,
+    language: i18next.resolvedLanguage,
     largest: 1,
     round: true,
   });

diff --git a/www/js/onboarding/PrivacyPolicy.tsx b/www/js/onboarding/PrivacyPolicy.tsx
@@ -36,7 +36,10 @@ const PrivacyPolicy = () => {
     );
   }
 
-  const templateText = useMemo(() => getTemplateText(appConfig, i18n.language), [appConfig]);
+  const templateText = useMemo(
+    () => getTemplateText(appConfig, i18n.resolvedLanguage),
+    [appConfig],
+  );
 
   return (
     <>

diff --git a/www/js/onboarding/StudySummary.tsx b/www/js/onboarding/StudySummary.tsx
@@ -14,7 +14,10 @@ const StudySummary = () => {
   const { i18n } = useTranslation();
   const appConfig = useAppConfig();
 
-  const templateText = useMemo(() => getTemplateText(appConfig, i18n.language), [appConfig]);
+  const templateText = useMemo(
+    () => getTemplateText(appConfig, i18n.resolvedLanguage),
+    [appConfig],
+  );
 
   return (
     <>

diff --git a/www/js/splash/notifScheduler.ts b/www/js/splash/notifScheduler.ts
@@ -125,7 +125,7 @@ function getNotifs() {
 function scheduleNotifs(scheme, notifTimes: DateTime[], setIsScheduling: Function) {
   return new Promise<void>((rs) => {
     setIsScheduling(true);
-    const localeCode = i18next.language;
+    const localeCode = i18next.resolvedLanguage || 'en';
     const nots = notifTimes.map((n) => {
       const nDate = n.toJSDate();
       const seconds = nDate.getTime() / 1000; // the id must be in seconds, otherwise the sorting won't work

diff --git a/www/js/splash/storeDeviceSettings.ts b/www/js/splash/storeDeviceSettings.ts
@@ -14,7 +14,7 @@ function storeDeviceSettings() {
     .getVersionNumber()
     .then((appver) => {
       const updateJSON = {
-        phone_lang: i18next.language,
+        phone_lang: i18next.resolvedLanguage,
         curr_platform: window['cordova'].platformId,
         manufacturer: window['device'].manufacturer,
         client_os_version: window['device'].version,

diff --git a/www/js/survey/enketo/AddNoteButton.tsx b/www/js/survey/enketo/AddNoteButton.tsx
@@ -28,7 +28,7 @@ const AddNoteButton = ({ timelineEntry, notesConfig, storeKey }: Props) => {
 
   useEffect(() => {
     let newLabel: string;
-    const localeCode = i18n.language;
+    const localeCode = i18n.resolvedLanguage || 'en';
     if (notesConfig?.['filled-in-label'] && notesFor(timelineEntry)?.length) {
       newLabel = notesConfig?.['filled-in-label']?.[localeCode];
       setDisplayLabel(newLabel);

diff --git a/www/js/survey/enketo/enketoHelper.ts b/www/js/survey/enketo/enketoHelper.ts
@@ -61,7 +61,7 @@ const LABEL_FUNCTIONS = {
     const configSurveys = appConfig.survey_info.surveys;
 
     const config = configSurveys[name]; // config for this survey
-    const lang = i18next.language;
+    const lang = i18next.resolvedLanguage || 'en';
     const labelTemplate = config.labelTemplate?.[lang];
 
     if (!labelTemplate) return 'Answered'; // no template given in config

diff --git a/www/js/survey/multilabel/confirmHelper.ts b/www/js/survey/multilabel/confirmHelper.ts
@@ -31,7 +31,7 @@ export async function getLabelOptions(appConfigParam?) {
   }
   /* fill in the translations to the 'text' fields of the labelOptions,
     according to the current language */
-  const lang = i18next.language;
+  const lang = i18next.resolvedLanguage || 'en';
   for (const opt in labelOptions) {
     labelOptions[opt]?.forEach?.((o, i) => {
       const translationKey = o.value;