From 7d53a968df01d43f0185a8a8ddb6aceb6ebe2bfc Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Wed, 21 Feb 2024 23:45:55 +0100
Subject: [PATCH] Improve ingredients (#894)

fixes
---
 package.json                                 |  1 +
 src/off.ts                                   | 20 ++---
 src/pages/ingredients/IngeredientDisplay.tsx |  4 +-
 src/pages/ingredients/index.tsx              | 86 +++++++++++++++-----
 src/pages/ingredients/useData.tsx            |  6 +-
 yarn.lock                                    | 11 +++
 6 files changed, 88 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 21d3be19c..e4397251c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.3.1",
+    "react-map-interaction": "^2.1.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
     "react-zoom-pan-pinch": "^2.5.0",
diff --git a/src/off.ts b/src/off.ts
index ba254d53d..019eef215 100644
--- a/src/off.ts
+++ b/src/off.ts
@@ -4,7 +4,6 @@ import {
   OFF_API_URL_V2,
   OFF_IMAGE_URL,
   OFF_SEARCH,
-  OFF_URL,
 } from "./const";
 import axios from "axios";
 import combineURLs from "axios/lib/helpers/combineURLs";
@@ -164,11 +163,12 @@ const offService = {
       console.error("setIngedrient: Missing text");
     }
 
-    const urlParams = new URLSearchParams({
-      code,
-      [`ingredients_text${lang ? `_${lang}` : ""}`]: text,
-    });
-    return `${OFF_URL}/cgi/product_jqm2.pl?${urlParams.toString()}`;
+    return axios.patch(
+      `https://world.openfoodfacts.org/api/v3/product/${code}`,
+      {
+        product: { [`ingredients_text${lang ? `_${lang}` : ""}`]: text },
+      },
+    );
   },
 
   async getIngedrientParsing(editionParams: { text: string; lang: string }) {
@@ -190,11 +190,3 @@ const offService = {
 };
 
 export default offService;
-
-// Fetching products to annotate:
-
-// https://world.openfoodfacts.org/cgi/search.pl?page=0&page_size=25&json=true&action=process&fields=code,lang,image_ingredients_url,product_name,ingredient,images&tagtype_0=states&tag_contains_0=contains&tag_0=en%3Aingredients-to-be-completed&tagtype_1=states&tag_contains_1=contains&tag_1=en%3Aingredients-photo-selected
-
-// Getting prediction:
-// https://robotoff.openfoodfacts.org/api/v1/predict/ingredient_list?ocr_url=https://images.openfoodfacts.org/images/products/505/382/713/9229/41.json
-// https://images.openfoodfacts.org/images/products/505/382/713/9229/41.json
diff --git a/src/pages/ingredients/IngeredientDisplay.tsx b/src/pages/ingredients/IngeredientDisplay.tsx
index e2eabb013..b3b3d2cc2 100644
--- a/src/pages/ingredients/IngeredientDisplay.tsx
+++ b/src/pages/ingredients/IngeredientDisplay.tsx
@@ -271,9 +271,7 @@ export function IngredientAnotation(props) {
           {t("ingredients.parsing")}
         </LoadingButton>
         <Button
-          component="a"
-          target="_blank"
-          href={text && off.setIngedrient({ code, lang, text })}
+          onClick={() => off.setIngedrient({ code, lang, text })}
           variant="contained"
           disabled={!text}
           color="success"
diff --git a/src/pages/ingredients/index.tsx b/src/pages/ingredients/index.tsx
index c16d64fd9..8c82f08ed 100644
--- a/src/pages/ingredients/index.tsx
+++ b/src/pages/ingredients/index.tsx
@@ -8,6 +8,9 @@ import Tab from "@mui/material/Tab";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import TabPanel from "@mui/lab/TabPanel";
+import Link from "@mui/material/Link";
+
+import { MapInteractionCSS } from "react-map-interaction";
 
 import Loader from "../loader";
 import off from "../../off";
@@ -55,28 +58,67 @@ function ProductInterface(props) {
                 })}
               </TabList>
             </Box>
-            {selectedImages.map(({ countryCode, imageUrl, fetchDataUrl }) => {
-              return (
-                <TabPanel value={countryCode} key={`${code}-${countryCode}`}>
-                  <Stack direction="row">
-                    <img
-                      src={imageUrl}
-                      style={{
-                        width: "50%",
-                        objectFit: "contain",
-                        maxHeight: "60vh",
-                      }}
-                    />
-                    <ImageAnnotation
-                      fetchDataUrl={fetchDataUrl}
-                      code={code as string}
-                      imageLang={countryCode}
-                      offText={product[`ingredients_text_${countryCode}`] ?? ""}
-                    />
-                  </Stack>
-                </TabPanel>
-              );
-            })}
+            {selectedImages.map(
+              ({
+                countryCode,
+                imageUrl,
+                fetchDataUrl,
+                uploaded_t,
+                uploader,
+              }) => {
+                return (
+                  <TabPanel value={countryCode} key={`${code}-${countryCode}`}>
+                    <Stack direction="row">
+                      <Box sx={{ width: "50%", height: "60vh" }}>
+                        <MapInteractionCSS
+                          showControls
+                          minScale={0.5}
+                          translationBounds={{
+                            xMax: 100,
+                            yMax: 100,
+                          }}
+                        >
+                          <img
+                            src={imageUrl}
+                            style={{
+                              width: "50%",
+                              objectFit: "contain",
+                            }}
+                          />
+                        </MapInteractionCSS>
+
+                        <Typography sx={{ textAlign: "center" }}>
+                          <Link
+                            href={`https://world.openfoodfacts.org/contributor/${uploader}`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {uploader}
+                          </Link>{" "}
+                          {uploaded_t &&
+                            new Date(uploaded_t * 1000).toLocaleDateString(
+                              undefined,
+                              {
+                                year: "numeric",
+                                month: "short",
+                                day: "numeric",
+                              },
+                            )}
+                        </Typography>
+                      </Box>
+                      <ImageAnnotation
+                        fetchDataUrl={fetchDataUrl}
+                        code={code as string}
+                        imageLang={countryCode}
+                        offText={
+                          product[`ingredients_text_${countryCode}`] ?? ""
+                        }
+                      />
+                    </Stack>
+                  </TabPanel>
+                );
+              },
+            )}
           </TabContext>
         )}
       </Stack>
diff --git a/src/pages/ingredients/useData.tsx b/src/pages/ingredients/useData.tsx
index 58dd5f596..4ef9d1504 100644
--- a/src/pages/ingredients/useData.tsx
+++ b/src/pages/ingredients/useData.tsx
@@ -46,14 +46,17 @@ const formatData = (product) => {
         ? key.slice("ingredients_".length)
         : "";
 
+      const { uploaded_t, uploader } = images[imageData.imgid];
       return {
         imgId: imageData.imgid,
         countryCode,
-        imageUrl: getImageUrl(baseImageUrl, imageData.imgid, "400"),
+        imageUrl: getImageUrl(baseImageUrl, imageData.imgid, "full"),
         fetchDataUrl: getIngredientExtractionUrl(
           baseImageUrl.replace("images.", "static."),
           imageData.imgid,
         ),
+        uploaded_t,
+        uploader,
         x: Number.parseFloat(x),
         y: Number.parseFloat(y),
         w: Number.parseFloat(imageData.sizes.full.w),
@@ -107,6 +110,7 @@ export default function useData(): [any[], () => void, boolean] {
           pageSize: 25,
           filters: imagesToRead,
           fields: "all",
+          countryCode: "ch",
         });
         if (isValid) {
           const rep = products
diff --git a/yarn.lock b/yarn.lock
index 1c7eda7ec..1d010e15a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3033,6 +3033,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     react-i18next: ^12.3.1
+    react-map-interaction: ^2.1.0
     react-redux: ^8.1.3
     react-router-dom: ^6.18.0
     react-zoom-pan-pinch: ^2.5.0
@@ -4343,6 +4344,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-map-interaction@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "react-map-interaction@npm:2.1.0"
+  peerDependencies:
+    prop-types: ">=15.0.0"
+    react: ">=16.3.0"
+  checksum: 5bf77b57776a26b175dc7f21afe6b8e5a79b0979820bb9e671aa5fd4e65c9438f9fc77ceb9d58ff54812083f1b60230b957757af4674f2ac0e8ad865aeadf792
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^8.1.3":
   version: 8.1.3
   resolution: "react-redux@npm:8.1.3"