fix: handle translation with lingui

The previous method was not working so I tried a different approach.
Translation is loaded but I'm still getting warnings:
* Plurals for locale undefined aren't loaded
* Text content did not match
I can't figure how to fix them...

1 files changed, 72 insertions, 22 deletions

diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
index 18f966a..4439906 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/i18n.ts
@@ -1,36 +1,86 @@
-import { config } from '@config/website';
-import type { I18n } from '@lingui/core';
+import { messages as messagesEn } from '@i18n/en/messages.js';
+import { messages as messagesFr } from '@i18n/fr/messages.js';
+import { i18n, Messages } from '@lingui/core';
 import { en, fr } from 'make-plural/plurals';
 
-export interface LocaleData {
-  messages: object;
-  default: object;
-}
+type Catalog = {
+  messages: Messages;
+};
 
 export const locales = {
   en: 'English',
   fr: 'Français',
 };
 
-export const defaultLocale = config.locales.defaultLocale;
+export const defaultLocale = 'fr';
+
+/**
+ * Load the translation with the correct method depending on environment.
+ *
+ * @param {string} locale - The current locale.
+ * @returns {Promise<Messages>} The translated messages.
+ */
+export async function loadTranslation(locale: string): Promise<Messages> {
+  let catalog: Catalog;
 
-export function initTranslation(i18n: I18n): void {
-  i18n.loadLocaleData({
-    en: { plurals: en },
-    fr: { plurals: fr },
-  });
+  try {
+    if (process.env.NODE_ENV === 'production') {
+      catalog = await import(`src/i18n/${locale}/messages`);
+    } else {
+      catalog = await import(`@lingui/loader!src/i18n/${locale}/messages.po`);
+    }
+
+    return catalog.messages;
+  } catch (error) {
+    console.error('Error while loading translation.');
+    throw error;
+  }
 }
 
-export async function loadTranslation(
-  locale: string,
-  isProduction: boolean = true
-) {
-  let data: LocaleData;
-  if (isProduction) {
-    data = await import(`src/i18n/${locale}/messages`);
-  } else {
-    data = await import(`@lingui/loader!src/i18n/${locale}/messages.po`);
+/**
+ * Init lingui.
+ *
+ * @param {string} locale - The locale to activate.
+ * @param {Messages} [messages] - The compiled translation.
+ */
+export function initLingui(locale: string, messages?: Messages) {
+  try {
+    i18n.loadLocaleData({
+      en: { plurals: en },
+      fr: { plurals: fr },
+    });
+
+    if (messages) {
+      i18n.load(locale, messages);
+    } else {
+      i18n.load({
+        en: messagesEn,
+        fr: messagesFr,
+      });
+    }
+
+    i18n.activate(locale, Object.keys(locales));
+  } catch (error) {
+    console.error('Error while Lingui init.');
+    throw error;
   }
+}
 
-  return data.messages;
+/**
+ * Activate the given locale.
+ *
+ * @param {string} locale - The locale to activate.
+ * @param {Messages} messages - The compiled translation.
+ */
+export function activateLocale(currentLocale: string, messages: Messages) {
+  const locale: string = Object.keys(locales).includes(currentLocale)
+    ? currentLocale
+    : defaultLocale;
+
+  try {
+    initLingui(locale, messages);
+  } catch (error) {
+    console.error(`Error while activating ${currentLocale}`);
+    throw error;
+  }
 }