From 38b73dbb9da36af8e120ad858d7fe3e1575fd65f Mon Sep 17 00:00:00 2001
From: sumana2001 <sumana.basu2001@gmail.com>
Date: Sun, 14 Aug 2022 14:46:20 +0530
Subject: [PATCH 1/4] feat: flag images added

---
 src/components/ResponsiveAppBar.jsx        |  2 +-
 src/pages/questions/ProductInformation.jsx | 39 ++++++++++++++++++++--
 src/utils.js                               | 25 ++++++++++++++
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index e7ae75bf8e..348c956a2f 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -207,7 +207,7 @@ const ResponsiveAppBar = () => {
               <Button
                 color="inherit"
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, display: "block" }}
+                sx={{ my: 2 }}
                 component={Link}
                 to={`/settings`}
                 data-welcome-tour="settings"
diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
index 069fdc8866..080e163fd0 100644
--- a/src/pages/questions/ProductInformation.jsx
+++ b/src/pages/questions/ProductInformation.jsx
@@ -13,13 +13,14 @@ import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
-
+import OutlinedFlagIcon from "@mui/icons-material/OutlinedFlag";
+import FlagIcon from "@mui/icons-material/Flag";
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
-
 import { useTranslation } from "react-i18next";
 import { NO_QUESTION_LEFT } from "../../const";
 import offService from "../../off";
+import { updateFlagImage, removeFlagImage } from "../../utils";
 
 import {
   localSettings,
@@ -42,6 +43,21 @@ const ProductInformation = ({ question }) => {
   const { t } = useTranslation();
   const [productData, setProductData] = React.useState({});
   const [hideImages, setHideImages] = React.useState(getHideImages);
+  const [flagged, setFlagged] = React.useState([]);
+
+  const flagImage = (src, barcode, index) => {
+    const response = updateFlagImage(barcode, src);
+    const updatedImageArray = [...flagged];
+    updatedImageArray[index] = true;
+    setFlagged(updatedImageArray);
+  };
+
+  const deleteFlagImage = (src, barcode, index) => {
+    const response = removeFlagImage(barcode, src);
+    const updatedImageArray = [...flagged];
+    updatedImageArray[index] = false;
+    setFlagged(updatedImageArray);
+  };
 
   React.useEffect(() => {
     if (!question?.barcode) {
@@ -121,7 +137,11 @@ const ProductInformation = ({ question }) => {
       {!hideImages && productData?.images && (
         <Grid container rowSpacing={1.5} spacing={1}>
           {getImagesUrls(productData.images, question.barcode).map((src) => (
-            <Grid item key={src}>
+            <Grid
+              item
+              key={src}
+              style={{ display: "inline-flex", alignItems: "flex-start" }}
+            >
               <Zoom>
                 <img
                   src={src}
@@ -130,6 +150,19 @@ const ProductInformation = ({ question }) => {
                   style={{ maxWidth: 300, maxHeight: 300 }}
                 />
               </Zoom>
+              {flagged[src[src.length - 5]] ? (
+                <FlagIcon
+                  onClick={() =>
+                    deleteFlagImage(src, question.barcode, src[src.length - 5])
+                  }
+                />
+              ) : (
+                <OutlinedFlagIcon
+                  onClick={() =>
+                    flagImage(src, question.barcode, src[src.length - 5])
+                  }
+                />
+              )}
             </Grid>
           ))}
         </Grid>
diff --git a/src/utils.js b/src/utils.js
index 6f44785da1..846b9a141a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,3 +1,5 @@
+import axios from "axios";
+
 const reformatTagMapping = {
   " ": "-",
   "'": "-",
@@ -41,3 +43,26 @@ export const removeEmptyKeys = (obj) => {
 export function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+export const updateFlagImage = (barcode, src) => {
+  return axios.put(
+    `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+    {
+      mode: "no-cors",
+      imgid: Number(src[src.length - 5]),
+      url: src,
+    }
+  );
+};
+
+export const removeFlagImage = (barcode, src) => {
+  return axios.delete(
+    `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+    {
+      mode: "no-cors",
+      data: {
+        imgid: Number(src[src.length - 5]),
+      },
+    }
+  );
+};

From 808e8cadd4249a5627d961dba9ecb4f57c03707e Mon Sep 17 00:00:00 2001
From: sumana2001 <sumana.basu2001@gmail.com>
Date: Mon, 15 Aug 2022 14:08:41 +0530
Subject: [PATCH 2/4] enhancement: tooltip added

---
 src/pages/questions/ProductInformation.jsx | 34 +++++++++++++++-------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
index 080e163fd0..1b3b099f9c 100644
--- a/src/pages/questions/ProductInformation.jsx
+++ b/src/pages/questions/ProductInformation.jsx
@@ -21,6 +21,8 @@ import { useTranslation } from "react-i18next";
 import { NO_QUESTION_LEFT } from "../../const";
 import offService from "../../off";
 import { updateFlagImage, removeFlagImage } from "../../utils";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 
 import {
   localSettings,
@@ -151,17 +153,29 @@ const ProductInformation = ({ question }) => {
                 />
               </Zoom>
               {flagged[src[src.length - 5]] ? (
-                <FlagIcon
-                  onClick={() =>
-                    deleteFlagImage(src, question.barcode, src[src.length - 5])
-                  }
-                />
+                <Tooltip title="Unflag Image">
+                  <IconButton>
+                    <FlagIcon
+                      onClick={() =>
+                        deleteFlagImage(
+                          src,
+                          question.barcode,
+                          src[src.length - 5]
+                        )
+                      }
+                    />
+                  </IconButton>
+                </Tooltip>
               ) : (
-                <OutlinedFlagIcon
-                  onClick={() =>
-                    flagImage(src, question.barcode, src[src.length - 5])
-                  }
-                />
+                <Tooltip title="Flag Image">
+                  <IconButton>
+                    <OutlinedFlagIcon
+                      onClick={() =>
+                        flagImage(src, question.barcode, src[src.length - 5])
+                      }
+                    />
+                  </IconButton>
+                </Tooltip>
               )}
             </Grid>
           ))}

From 7920391b6f3e34f72990322ff5cd7273f821f85c Mon Sep 17 00:00:00 2001
From: sumana2001 <sumana.basu2001@gmail.com>
Date: Tue, 16 Aug 2022 14:53:12 +0530
Subject: [PATCH 3/4] fix: getting imageid and restructuring code

---
 src/pages/questions/ProductInformation.jsx | 132 ++++++++++++---------
 src/utils.js                               |  25 ----
 2 files changed, 79 insertions(+), 78 deletions(-)

diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
index 1b3b099f9c..d28e885b19 100644
--- a/src/pages/questions/ProductInformation.jsx
+++ b/src/pages/questions/ProductInformation.jsx
@@ -20,10 +20,9 @@ import "react-medium-image-zoom/dist/styles.css";
 import { useTranslation } from "react-i18next";
 import { NO_QUESTION_LEFT } from "../../const";
 import offService from "../../off";
-import { updateFlagImage, removeFlagImage } from "../../utils";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
-
+import axios from "axios";
 import {
   localSettings,
   localSettingsKeys,
@@ -41,24 +40,57 @@ const getImagesUrls = (images, barcode) => {
     .map((key) => `${rootImageUrl}/${key}.jpg`);
 };
 
+// src looks like: "https://static.openfoodfacts.org/images/products/004/900/053/2258/1.jpg"
+const getImageId = (src) => {
+  var sliced = src.split("/").at(-1);
+  sliced.replace(/\..+$/, "");
+  const imgid = sliced.slice(0, -4);
+  return Number(imgid);
+};
+
 const ProductInformation = ({ question }) => {
   const { t } = useTranslation();
   const [productData, setProductData] = React.useState({});
   const [hideImages, setHideImages] = React.useState(getHideImages);
   const [flagged, setFlagged] = React.useState([]);
 
-  const flagImage = (src, barcode, index) => {
-    const response = updateFlagImage(barcode, src);
-    const updatedImageArray = [...flagged];
-    updatedImageArray[index] = true;
-    setFlagged(updatedImageArray);
+  const flagImage = (src, barcode) => {
+    const imgid = getImageId(src);
+    try {
+      const response = axios.put(
+        `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+        {
+          mode: "no-cors",
+          imgid: imgid,
+          url: src,
+        }
+      );
+      const updatedImageArray = [...flagged];
+      updatedImageArray[imgid] = true;
+      setFlagged(updatedImageArray);
+    } catch (err) {
+      console.log(err);
+    }
   };
 
-  const deleteFlagImage = (src, barcode, index) => {
-    const response = removeFlagImage(barcode, src);
-    const updatedImageArray = [...flagged];
-    updatedImageArray[index] = false;
-    setFlagged(updatedImageArray);
+  const deleteFlagImage = (src, barcode) => {
+    const imgid = getImageId(src);
+    try {
+      const response = axios.delete(
+        `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+        {
+          mode: "no-cors",
+          data: {
+            imgid: imgid,
+          },
+        }
+      );
+      const updatedImageArray = [...flagged];
+      updatedImageArray[imgid] = false;
+      setFlagged(updatedImageArray);
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   React.useEffect(() => {
@@ -138,47 +170,41 @@ const ProductInformation = ({ question }) => {
       />
       {!hideImages && productData?.images && (
         <Grid container rowSpacing={1.5} spacing={1}>
-          {getImagesUrls(productData.images, question.barcode).map((src) => (
-            <Grid
-              item
-              key={src}
-              style={{ display: "inline-flex", alignItems: "flex-start" }}
-            >
-              <Zoom>
-                <img
-                  src={src}
-                  alt=""
-                  loading="lazy"
-                  style={{ maxWidth: 300, maxHeight: 300 }}
-                />
-              </Zoom>
-              {flagged[src[src.length - 5]] ? (
-                <Tooltip title="Unflag Image">
-                  <IconButton>
-                    <FlagIcon
-                      onClick={() =>
-                        deleteFlagImage(
-                          src,
-                          question.barcode,
-                          src[src.length - 5]
-                        )
-                      }
-                    />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                <Tooltip title="Flag Image">
-                  <IconButton>
-                    <OutlinedFlagIcon
-                      onClick={() =>
-                        flagImage(src, question.barcode, src[src.length - 5])
-                      }
-                    />
-                  </IconButton>
-                </Tooltip>
-              )}
-            </Grid>
-          ))}
+          {getImagesUrls(productData.images, question.barcode).map(
+            (src, imgid) => (
+              <Grid
+                item
+                key={src}
+                style={{ display: "inline-flex", alignItems: "flex-start" }}
+              >
+                <Zoom>
+                  <img
+                    src={src}
+                    alt=""
+                    loading="lazy"
+                    style={{ maxWidth: 300, maxHeight: 300 }}
+                  />
+                </Zoom>
+                {flagged[src[src.length - 5]] ? (
+                  <Tooltip title="Unflag the image">
+                    <IconButton
+                      onClick={() => deleteFlagImage(src, question.barcode)}
+                    >
+                      <FlagIcon />
+                    </IconButton>
+                  </Tooltip>
+                ) : (
+                  <Tooltip title="Something wrong? Report/flag the image!">
+                    <IconButton
+                      onClick={() => flagImage(src, question.barcode)}
+                    >
+                      <OutlinedFlagIcon />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Grid>
+            )
+          )}
         </Grid>
       )}
 
diff --git a/src/utils.js b/src/utils.js
index 846b9a141a..6f44785da1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,3 @@
-import axios from "axios";
-
 const reformatTagMapping = {
   " ": "-",
   "'": "-",
@@ -43,26 +41,3 @@ export const removeEmptyKeys = (obj) => {
 export function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
-
-export const updateFlagImage = (barcode, src) => {
-  return axios.put(
-    `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
-    {
-      mode: "no-cors",
-      imgid: Number(src[src.length - 5]),
-      url: src,
-    }
-  );
-};
-
-export const removeFlagImage = (barcode, src) => {
-  return axios.delete(
-    `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
-    {
-      mode: "no-cors",
-      data: {
-        imgid: Number(src[src.length - 5]),
-      },
-    }
-  );
-};

From 679ae2521962630280957c95675bac69d160f19f Mon Sep 17 00:00:00 2001
From: sumana2001 <sumana.basu2001@gmail.com>
Date: Fri, 19 Aug 2022 20:30:12 +0530
Subject: [PATCH 4/4] chore: restructuring code

---
 src/pages/questions/ProductInformation.jsx | 119 ++++++++++-----------
 1 file changed, 58 insertions(+), 61 deletions(-)

diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
index d28e885b19..bd4a615ccb 100644
--- a/src/pages/questions/ProductInformation.jsx
+++ b/src/pages/questions/ProductInformation.jsx
@@ -29,6 +29,13 @@ import {
   getHideImages,
 } from "../../localeStorageManager";
 
+// src looks like: "https://static.openfoodfacts.org/images/products/004/900/053/2258/1.jpg"
+const getImageId = (src) => {
+  const file = src.split("/").at(-1);
+  const imageId = file.replace(/\..+$/, "");
+  return Number(imageId);
+};
+
 const getImagesUrls = (images, barcode) => {
   if (!images || !barcode) {
     return [];
@@ -40,14 +47,6 @@ const getImagesUrls = (images, barcode) => {
     .map((key) => `${rootImageUrl}/${key}.jpg`);
 };
 
-// src looks like: "https://static.openfoodfacts.org/images/products/004/900/053/2258/1.jpg"
-const getImageId = (src) => {
-  var sliced = src.split("/").at(-1);
-  sliced.replace(/\..+$/, "");
-  const imgid = sliced.slice(0, -4);
-  return Number(imgid);
-};
-
 const ProductInformation = ({ question }) => {
   const { t } = useTranslation();
   const [productData, setProductData] = React.useState({});
@@ -56,27 +55,27 @@ const ProductInformation = ({ question }) => {
 
   const flagImage = (src, barcode) => {
     const imgid = getImageId(src);
-    try {
-      const response = axios.put(
+    axios
+      .put(
         `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
         {
           mode: "no-cors",
           imgid: imgid,
           url: src,
         }
-      );
-      const updatedImageArray = [...flagged];
-      updatedImageArray[imgid] = true;
-      setFlagged(updatedImageArray);
-    } catch (err) {
-      console.log(err);
-    }
+      )
+      .catch(() => {
+        console.log("Image flagged");
+      });
+    const newFlagged = [...flagged];
+    newFlagged.push(imgid);
+    setFlagged(newFlagged);
   };
 
   const deleteFlagImage = (src, barcode) => {
     const imgid = getImageId(src);
-    try {
-      const response = axios.delete(
+    axios
+      .delete(
         `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
         {
           mode: "no-cors",
@@ -84,19 +83,21 @@ const ProductInformation = ({ question }) => {
             imgid: imgid,
           },
         }
-      );
-      const updatedImageArray = [...flagged];
-      updatedImageArray[imgid] = false;
-      setFlagged(updatedImageArray);
-    } catch (err) {
-      console.log(err);
-    }
+      )
+      .catch(() => {
+        console.log("Something went wrong. Image could not be flagged");
+      });
+    const newFlagged = flagged.filter(
+      (flaggedImageId) => flaggedImageId !== imgid
+    );
+    setFlagged(newFlagged);
   };
 
   React.useEffect(() => {
     if (!question?.barcode) {
       return;
     }
+    setFlagged([]);
     let isStillValid = true;
     setProductData({
       code: question.barcode,
@@ -170,41 +171,37 @@ const ProductInformation = ({ question }) => {
       />
       {!hideImages && productData?.images && (
         <Grid container rowSpacing={1.5} spacing={1}>
-          {getImagesUrls(productData.images, question.barcode).map(
-            (src, imgid) => (
-              <Grid
-                item
-                key={src}
-                style={{ display: "inline-flex", alignItems: "flex-start" }}
-              >
-                <Zoom>
-                  <img
-                    src={src}
-                    alt=""
-                    loading="lazy"
-                    style={{ maxWidth: 300, maxHeight: 300 }}
-                  />
-                </Zoom>
-                {flagged[src[src.length - 5]] ? (
-                  <Tooltip title="Unflag the image">
-                    <IconButton
-                      onClick={() => deleteFlagImage(src, question.barcode)}
-                    >
-                      <FlagIcon />
-                    </IconButton>
-                  </Tooltip>
-                ) : (
-                  <Tooltip title="Something wrong? Report/flag the image!">
-                    <IconButton
-                      onClick={() => flagImage(src, question.barcode)}
-                    >
-                      <OutlinedFlagIcon />
-                    </IconButton>
-                  </Tooltip>
-                )}
-              </Grid>
-            )
-          )}
+          {getImagesUrls(productData.images, question.barcode).map((src) => (
+            <Grid
+              item
+              key={src}
+              style={{ display: "inline-flex", alignItems: "flex-start" }}
+            >
+              <Zoom>
+                <img
+                  src={src}
+                  alt=""
+                  loading="lazy"
+                  style={{ maxWidth: 300, maxHeight: 300 }}
+                />
+              </Zoom>
+              {flagged.includes(getImageId(src)) ? (
+                <Tooltip title="Unflag the image">
+                  <IconButton
+                    onClick={() => deleteFlagImage(src, question.barcode)}
+                  >
+                    <FlagIcon />
+                  </IconButton>
+                </Tooltip>
+              ) : (
+                <Tooltip title="Something wrong? Report/flag the image!">
+                  <IconButton onClick={() => flagImage(src, question.barcode)}>
+                    <OutlinedFlagIcon />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Grid>
+          ))}
         </Grid>
       )}