- 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/infrastructure/navbar/Navbar.spec.tsx

@@ -1,13 +1,16 @@
 import { render, screen } from "@testing-library/react";
+import { WithTestTranslations } from "../../app/tests/mocks/i18n/WithTestTranslations";
 import { WithRouter } from "../wrappers/WithRouter";
 import { Navbar } from "./Navbar";
 
 describe("Navbar container", () => {
-  it("renders a navigation section identified by the nav test-id", () => {
+  it.only("renders a navigation section identified by the nav test-id", () => {
     render(
-      <WithRouter>
-        <Navbar />
-      </WithRouter>,
+      <WithTestTranslations>
+        <WithRouter>
+          <Navbar />
+        </WithRouter>
+      </WithTestTranslations>,
     );
 
     expect(screen.getAllByTestId("nav")?.length).toBeGreaterThan(0);

src/infrastructure/navbar/Navbar.tsx

@@ -1,24 +1,36 @@
+import { DateTime } from "luxon";
 import { FunctionComponent } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Config } from "../config";
 import "./Navbar.css";
 type Props = {};
 
 export const Navbar: FunctionComponent<Props> = () => {
+  const [translate, i18n] = useTranslation();
   return (
     <>
-      <h1>Our fancy header with navigation.</h1>
-      <p>App version: {JSON.stringify(Config.version)}</p>
+      <h1>{translate("navBar.intro")}</h1>
+      <p>
+        {/* trans can also be used to translate */}
+        <Trans i18nKey="navBar.version">App version:</Trans>
+        {JSON.stringify(Config.version)}
+      </p>
+
+      {/* This translation uses a formatter in the translation files  */}
+      <p>{translate("navBar.currentDate", { date: DateTime.now().toJSDate() })}</p>
       <nav data-testid="nav">
         <Link to="/" data-testid="nav.home">
-          Home
+          {translate("nav.home")}
         </Link>
         <Link to="/about" data-testid="nav.about">
-          About
+          {translate("nav.about")}
         </Link>
         <Link to="/counter" data-testid="nav.counter">
-          Counter
+          {translate("nav.counter")}
         </Link>
+        <button onClick={() => i18n.changeLanguage("en")}>en</button>
+        <button onClick={() => i18n.changeLanguage("nl")}>nl</button>
         <hr />
       </nav>
     </>