- 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/features/about/About.spec.tsx

@@ -1,10 +1,27 @@
 import { render, screen } from "@testing-library/react";
+import { WithTestTranslations } from "../../app/tests/mocks/i18n/WithTestTranslations";
+
 import { AboutContainer } from "./About";
 
 describe("About container", () => {
   it("renders welcome to the about page", () => {
-    render(<AboutContainer />);
+    render(
+      <WithTestTranslations>
+        <AboutContainer />
+      </WithTestTranslations>,
+    );
 
-    expect(screen.getByText(/Welcome to the about page/i)).toBeInTheDocument();
+    expect(screen.getByText(/About/)).toBeInTheDocument();
+  });
+
+  it("uses the about.title key for translation rendering", () => {
+    // we can specify that we only want translations keys to be rendered so we can check for translation keys instead
+    render(
+      <WithTestTranslations keysOnly={true}>
+        <AboutContainer />
+      </WithTestTranslations>,
+    );
+
+    expect(screen.getByText(/about.title/)).toBeInTheDocument();
   });
 });

src/features/about/About.tsx

@@ -1,7 +1,9 @@
 import { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
 
 type Props = {};
 
 export const AboutContainer: FunctionComponent<Props> = () => {
-  return <h1>Welcome to the about page :)</h1>;
+  const [translate] = useTranslation();
+  return <h1>{translate("about.title")}</h1>;
 };