From 4db4d5bf744399e00d2db17a3a7b816ebdce3be6 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 1 Nov 2024 18:01:09 +0100 Subject: [PATCH] translate fields in products addition info (#1070) * translate fields in products addition info * creat links to catergories and labels --- src/off.ts | 17 ++++- src/pages/questions/ProductInformation.jsx | 64 ++++++++++-------- src/pages/questions/utils.ts | 77 +++++++++++++++++----- 3 files changed, 114 insertions(+), 44 deletions(-) diff --git a/src/off.ts b/src/off.ts index 554905805..f22abd8a0 100644 --- 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 index 79c89efb9..6d0a92525 100644 --- 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 ( {/* Main information about the product */} @@ -280,18 +266,44 @@ const ProductInformation = (props) => { th: { verticalAlign: "top", pr: 0 }, }} > - {Object.keys(ADDITIONAL_INFO_TRANSLATION).map((infoKey) => ( - - - {t(`questions.${ADDITIONAL_INFO_TRANSLATION[infoKey]}`)} - - {infoKey !== "countriesTags" ? ( - {productData?.[infoKey]} - ) : ( - {splitCountries(productData?.[infoKey])} - )} - - ))} + {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 ( + + + {t(`questions.${i18nKey}`)} + + {Array.isArray(value) ? ( + + {getLink + ? value.map((name, index) => ( + + + {name} + + {index < value.length - 1 ? ", " : ""} + + )) + : value.join(", ")} + + ) : ( + {value} + )} + + ); + })} {isDevMode && devCustomization.showDebug && ( diff --git a/src/pages/questions/utils.ts b/src/pages/questions/utils.ts index 49751bf02..025748ea1 100644 --- 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; + 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(() => {});