translate fields in products addition info (#1070)

* translate fields in products addition info * creat links to catergories and labels
openfoodfacts · Nov 1, 2024 · 4db4d5b · 4db4d5b
1 parent 440754f
commit 4db4d5b
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 44 deletions.
diff --git a/src/off.ts b/src/off.ts
@@ -66,8 +66,23 @@ const offService = {
   },
 
   getProduct(barcode) {
+    const lang = getLang();
+
     return axios.get(
-      `${OFF_API_URL}/product/${barcode}.json?fields=product_name,brands,ingredients_text,countries_tags,images,categories,labels_tags,quantity`,
+      `${OFF_API_URL}/product/${barcode}.json?fields=${[
+        "product_name",
+        "brands",
+        "ingredients_text",
+        "countries_tags",
+        "countries_tags" + `_${lang}`,
+        "images",
+        "categories",
+        "categories_tags",
+        "categories_tags" + `_${lang}`,
+        "labels_tags",
+        "labels_tags" + `_${lang}`,
+        "quantity",
+      ].join(",")}`,
     );
   },
 

diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
@@ -43,7 +43,6 @@ import {
   useOtherQuestions,
   useFlagImage,
 } from "./utils";
-import { capitaliseName } from "../../utils";
 
 const ProductInformation = (props) => {
   const { question, productData } = props;
@@ -72,19 +71,6 @@ const ProductInformation = (props) => {
     return null;
   }
 
-  const splitCountries = (string) => {
-    if (!string) return;
-    let countries = string.split(", ");
-    let allCountries = "";
-    for (let i = 0; i < countries.length; i++) {
-      allCountries += capitaliseName(countries[i]);
-      if (i !== countries.length - 1) {
-        allCountries += ", ";
-      }
-    }
-    return allCountries;
-  };
-
   return (
     <Box>
       {/* Main information about the product */}
@@ -280,18 +266,44 @@ const ProductInformation = (props) => {
             th: { verticalAlign: "top", pr: 0 },
           }}
         >
-          {Object.keys(ADDITIONAL_INFO_TRANSLATION).map((infoKey) => (
-            <TableRow key={infoKey}>
-              <TableCell component="th" scope="row">
-                {t(`questions.${ADDITIONAL_INFO_TRANSLATION[infoKey]}`)}
-              </TableCell>
-              {infoKey !== "countriesTags" ? (
-                <TableCell>{productData?.[infoKey]}</TableCell>
-              ) : (
-                <TableCell>{splitCountries(productData?.[infoKey])}</TableCell>
-              )}
-            </TableRow>
-          ))}
+          {Object.keys(ADDITIONAL_INFO_TRANSLATION).map((infoKey) => {
+            console.log(ADDITIONAL_INFO_TRANSLATION[infoKey]);
+            const { i18nKey, translatedKey, getLink } =
+              ADDITIONAL_INFO_TRANSLATION[infoKey];
+
+            const value =
+              (translatedKey && productData?.[translatedKey]) ??
+              productData?.[infoKey] ??
+              "?";
+
+            return (
+              <TableRow key={infoKey}>
+                <TableCell component="th" scope="row">
+                  {t(`questions.${i18nKey}`)}
+                </TableCell>
+                {Array.isArray(value) ? (
+                  <TableCell>
+                    {getLink
+                      ? value.map((name, index) => (
+                          <React.Fragment key={name}>
+                            <a
+                              href={getLink(name)}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              {name}
+                            </a>
+                            {index < value.length - 1 ? ", " : ""}
+                          </React.Fragment>
+                        ))
+                      : value.join(", ")}
+                  </TableCell>
+                ) : (
+                  <TableCell>{value}</TableCell>
+                )}
+              </TableRow>
+            );
+          })}
         </TableBody>
       </Table>
       {isDevMode && devCustomization.showDebug && (

diff --git a/src/pages/questions/utils.ts b/src/pages/questions/utils.ts
@@ -6,14 +6,32 @@ import externalApi from "../../externalApi";
 import offService from "../../off";
 import robotoff from "../../robotoff";
 import { reformatValueTag } from "../../utils";
+import { getLang } from "../../localeStorageManager";
 
 export const ADDITIONAL_INFO_TRANSLATION = {
-  brands: "brands",
-  ingredientsText: "ingredients",
-  countriesTags: "countries",
-  categories: "categories",
-  labels_tags: "labels",
-  quantity: "quantity",
+  brands: { i18nKey: "brands" },
+  ingredientsText: { i18nKey: "ingredients" },
+  countriesTags: {
+    i18nKey: "countries",
+    translatedKey: "translatedCountriesTags",
+  },
+  categories: {
+    i18nKey: "categories",
+    translatedKey: "translatedCategories",
+    getLink: (name: string) =>
+      `https://world.openfoodfacts.org/category/${name
+        .toLowerCase()
+        .replaceAll(" ", "-")}`,
+  },
+  labels_tags: {
+    i18nKey: "labels",
+    translatedKey: "translatedLabels_tags",
+    getLink: (name: string) =>
+      `https://world.openfoodfacts.org/label/${name
+        .toLowerCase()
+        .replaceAll(" ", "-")}}`,
+  },
+  quantity: { i18nKey: "quantity" },
 };
 
 // src looks like: "https://static.openfoodfacts.org/images/products/004/900/053/2258/1.jpg"
@@ -106,7 +124,21 @@ export const useFlagImage = (barcode) => {
 };
 
 export const useProductData = (barcode) => {
-  const [productData, setProductData] = React.useState({});
+  const [productData, setProductData] = React.useState<{
+    code?: number;
+    isLoading?: boolean;
+    productName?: string;
+    brands?: string;
+    ingredientsText?: string;
+    countriesTags?: string[];
+    translatedCountriesTags?: string[];
+    images?: Record<string, any>;
+    categories?: string[];
+    translatedCategories?: string[];
+    labels_tags?: string[];
+    translatedLabels_tags?: string[];
+    quantity?: string;
+  }>({});
 
   // product data fetching
   React.useEffect(() => {
@@ -125,20 +157,31 @@ export const useProductData = (barcode) => {
         if (!isValid) {
           return;
         }
+
+        const lang = getLang();
         const product = result.data.product;
+
+        if (!product) {
+          setProductData({
+            code: barcode,
+            isLoading: false,
+          });
+          return;
+        }
         setProductData({
           code: barcode,
-          productName: product?.product_name || "",
-          brands: product?.brands || "?",
-          ingredientsText: product?.ingredients_text || "?",
-          countriesTags: product?.countries_tags
-            ? `${product?.countries_tags?.join?.(", ")}.`
-            : "?",
-          images: product?.images || {},
-          categories: product?.categories || "?",
-          labels_tags: product?.labels_tags?.join?.(", ") || "?",
-          quantity: product?.quantity || "?",
           isLoading: false,
+          productName: product.product_name,
+          brands: product.brands,
+          ingredientsText: product.ingredients_text,
+          countriesTags: product.countries_tags,
+          translatedCountriesTags: product[`countries_tags_${lang}`],
+          images: product.images,
+          categories: product.categories,
+          translatedCategories: product[`categories_tags_${lang}`],
+          labels_tags: product.labels_tags,
+          translatedLabels_tags: product[`labels_tags_${lang}`],
+          quantity: product.quantity,
         });
       })
       .catch(() => {});