- Added translations

- Added pluralization example
  - Added formatter example (with Luxon)
  - Used HTTP loader
- Added a suspense fallback page for app loading
- Added cypress eslint rules

src/app/tests/mocks/i18n/WithTestTranslations.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent, ReactNode } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import i18n from "./i18n";
+
+type Props = { children?: ReactNode; keysOnly?: boolean };
+
+const ProvidedComponent: FunctionComponent<Props> = ({ children, keysOnly }) => {
+  const [_translate, i18nSettings] = useTranslation();
+  if (keysOnly) {
+    i18nSettings.changeLanguage("noLang");
+  }
+
+  return <>{children}</>;
+};
+
+export const WithTestTranslations: FunctionComponent<Props> = ({ children, keysOnly = false }) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <ProvidedComponent keysOnly={keysOnly}>{children}</ProvidedComponent>
+    </I18nextProvider>
+  );
+};

src/app/tests/mocks/i18n/i18n.ts

@@ -0,0 +1,33 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import { i18nSettings } from "../../../../infrastructure/i18n/init";
+
+import en from "app/../../public/i18n/en.json";
+import nl from "app/../../public/i18n/nl.json";
+
+i18n
+  // detect user language
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    ...i18nSettings,
+    ...{
+      backend: undefined,
+      fallbackLng: "noLang",
+      debug: false,
+      resources: {
+        en: {
+          translation: en,
+        },
+        nl: {
+          translation: nl,
+        },
+        noLang: {
+          translation: {},
+        },
+      },
+    },
+  });
+
+export default i18n;