Extract complex strings

trishrempel · Jun 12, 2023 · 23cd564 · 23cd564
1 parent 33c0e77
commit 23cd564
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 15 deletions.
diff --git a/public/locales/ar/translation.json b/public/locales/ar/translation.json
@@ -10,5 +10,18 @@
   "label-quantity": "أدخل كمية:",
   "label-formatted-file-type": "نوع الملف المنسق:",
   "label-file-type": "حدد نوع الملف:",
-  "heading": "التدويل للجميع"
+  "heading": "التدويل للجميع",
+  "formatted-quantity_zero": "يوجد {{count}} عناصر",
+  "formatted-quantity_one": "هناك عنصر {{count}}",
+  "formatted-quantity_two": "يوجد {{count}} عناصر",
+  "formatted-quantity_few": "يوجد {{count}} عنصر",
+  "formatted-quantity_many": "يوجد {{count}} مادة",
+  "formatted-quantity_other": "يوجد {{count}} عنصر",
+  "slide-deck": "مجموعة الشرائح المتاحة <a> هنا </a>.",
+  "file-type-file": "ملف",
+  "file-type-image": "صورة",
+  "file-type-video": "فيديو",
+  "formatted-file-type-file": "الملف جاهز.",
+  "formatted-file-type-image": "الصورة جاهزة.",
+  "formatted-file-type-video": "الفيديو جاهز."
 }
diff --git a/public/locales/en-GB/translation.json b/public/locales/en-GB/translation.json
@@ -0,0 +1,3 @@
+{
+  "heading": "Internationalisation is for Everyone"
+}
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -10,5 +10,14 @@
   "label-formatted-amount": "Formatted amount:",
   "label-formatted-currency": "Formatted currency:",
   "label-file-type": "Select a file type:",
-  "label-formatted-file-type": "Formatted file type:"
+  "label-formatted-file-type": "Formatted file type:",
+  "formatted-quantity_one": "There is {{count}} item",
+  "formatted-quantity_other": "There are {{count}} items",
+  "slide-deck": "Slide deck available <a>here</a>.",
+  "file-type-file": "file",
+  "file-type-image": "image",
+  "file-type-video": "video",
+  "formatted-file-type-file": "The file is ready.",
+  "formatted-file-type-image": "The image is ready.",
+  "formatted-file-type-video": "The video is ready."
 }
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -10,5 +10,14 @@
   "label-quantity": "Saisissez une quantité :",
   "label-formatted-file-type": "Type de fichier formaté :",
   "label-file-type": "Sélectionnez un type de fichier :",
-  "heading": "L'internationalisation est pour tout le monde"
+  "heading": "L'internationalisation est pour tout le monde",
+  "formatted-quantity_one": "Il y a {{count}} élément",
+  "formatted-quantity_other": "Il y a {{count}} éléments",
+  "slide-deck": "Diaporama disponible <a>ici</a>.",
+  "file-type-file": "fichier",
+  "file-type-image": "image",
+  "file-type-video": "vidéo",
+  "formatted-file-type-file": "Le fichier est prêt.",
+  "formatted-file-type-image": "L'image est prête.",
+  "formatted-file-type-video": "La vidéo est prête."
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
 import "./App.css";
 import React, {
   useEffect,
@@ -6,7 +7,7 @@ import React, {
   useMemo,
   Suspense,
 } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, Trans } from "react-i18next";
 import LoadingSpinner from "./components/LoadingSpinner";
 
 const FILE_TYPES = ["file", "image", "video"];
@@ -24,10 +25,10 @@ function App() {
   const FileTypeOptions = useMemo(() => {
     return FILE_TYPES.map((fileType) => (
       <option key={fileType} value={fileType}>
-        {fileType}
+        {t(`file-type-${fileType}`)}
       </option>
     ));
-  }, []);
+  }, [t]);
 
   const updateFormattedAmount = useCallback(() => {
     if (isNaN(amount) || amount === "") {
@@ -54,7 +55,7 @@ function App() {
 
   const handleFileTypeChange = (e) => {
     const fileType = e.target.value;
-    setFormattedFileType(`The ${fileType} is ready.`);
+    setFormattedFileType(t(`formatted-file-type-${fileType}`));
   };
 
   const handleDateChange = (e) => {
@@ -75,9 +76,7 @@ function App() {
     if (isNaN(quantity)) {
       setFormattedQuantity("");
     } else {
-      setFormattedQuantity(
-        `There ${quantity === 1 ? "is 1 item" : `are ${quantity} items`}`
-      );
+      setFormattedQuantity(t("formatted-quantity", { count: quantity }));
     }
   };
 
@@ -152,11 +151,17 @@ function App() {
             <div id="formatted-currency">{formattedCurrency}</div>
           </div>
           <p>
-            Slide deck available{" "}
-            <a className="App-link" href="https://bit.ly/prdc-i18n">
-              here
-            </a>
-            .
+            <Trans
+              i18nKey="slide-deck"
+              components={{
+                a: (
+                  <a
+                    className="App-link"
+                    href="https://www.prairiedevcon.com/winnipeg.html"
+                  />
+                ),
+              }}
+            />
           </p>
         </header>
       </div>