feat: reporting images added (#147)

openfoodfacts · Aug 21, 2022 · a25c1ef · a25c1ef
1 parent 75f4199
commit a25c1ef
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 5 deletions.
diff --git 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
@@ -13,20 +13,29 @@ 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 IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import axios from "axios";
 import {
   localSettings,
   localSettingsKeys,
   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 [];
@@ -42,11 +51,53 @@ 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) => {
+    const imgid = getImageId(src);
+    axios
+      .put(
+        `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+        {
+          mode: "no-cors",
+          imgid: imgid,
+          url: src,
+        }
+      )
+      .catch(() => {
+        console.log("Image flagged");
+      });
+    const newFlagged = [...flagged];
+    newFlagged.push(imgid);
+    setFlagged(newFlagged);
+  };
+
+  const deleteFlagImage = (src, barcode) => {
+    const imgid = getImageId(src);
+    axios
+      .delete(
+        `https://amathjourney.com/api/off-annotation/flag-image/${barcode}`,
+        {
+          mode: "no-cors",
+          data: {
+            imgid: imgid,
+          },
+        }
+      )
+      .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,
@@ -121,7 +172,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 +185,21 @@ const ProductInformation = ({ question }) => {
                   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>