- 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>;
 };

src/features/counter/Counter.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import styles from "./Counter.module.css";
 import { incrementAsync } from "./state/actions/incrementAsync";
@@ -15,12 +16,13 @@ export function CounterContainer() {
   const { value, status } = useAppSelector(selectCountAndStatus);
   const dispatch = useAppDispatch();
   const [incrementAmount, setIncrementAmount] = useState("2");
+  const [translate] = useTranslation();
 
   const incrementValue = Number(incrementAmount) || 0;
 
   return (
     <div>
-      Status: {status}
+      {translate("counter.status", { status })}
       <div className={styles.row}>
         <button
           className={styles.button}
@@ -49,7 +51,10 @@ export function CounterContainer() {
           className={styles.button}
           onClick={() => dispatch(incrementByAmount(incrementValue))}
         >
-          Add Amount
+          {/* Setting count allows you to pluralize / display different text based on the count
+              See: https://www.i18next.com/translation-function/plurals
+          */}
+          {translate("counter.add", { count: incrementValue })}
         </button>
         <button
           className={styles.asyncButton}
@@ -57,10 +62,7 @@ export function CounterContainer() {
         >
           Add Async
         </button>
-        <button
-          className={styles.button}
-          onClick={() => dispatch(incrementIfOdd(incrementValue))}
-        >
+        <button className={styles.button} onClick={() => dispatch(incrementIfOdd(incrementValue))}>
           Add If Odd
         </button>
       </div>