From 2fb4e16bbb6534618839327927c1b04c60cf0af5 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Tue, 6 Dec 2022 20:50:08 +0100
Subject: [PATCH] Fix: Show question without logo to avoid false annotation
 (#393)

---
 .../logosValidator/LogoQuestionValidator.jsx  | 29 +++++++------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/pages/logosValidator/LogoQuestionValidator.jsx b/src/pages/logosValidator/LogoQuestionValidator.jsx
index 5b54aab85b..3a89293977 100644
--- a/src/pages/logosValidator/LogoQuestionValidator.jsx
+++ b/src/pages/logosValidator/LogoQuestionValidator.jsx
@@ -50,6 +50,7 @@ const fetchData = async (insightId) => {
 };
 
 const LogoQuesitonCard = (props) => {
+  const { t } = useTranslation();
   const { question, toggleSelection, checked, imageSize, zoomOnLogo } = props;
 
   const [croppedImageUrl, setCroppedImageUrl] = React.useState("");
@@ -92,10 +93,6 @@ const LogoQuesitonCard = (props) => {
     };
   }, [question.insight_id, question.source_image_url, zoomOnLogo]);
 
-  if (!question.insight_id || !croppedImageUrl) {
-    return null;
-  }
-
   return (
     <Card
       sx={{ width: imageSize, height: imageSize }}
@@ -110,7 +107,16 @@ const LogoQuesitonCard = (props) => {
         onClick={toggleSelection(question.insight_id)}
         tabIndex={-1}
       >
-        <NutriscoreImage croppedImageUrl={croppedImageUrl} />
+        {croppedImageUrl ? (
+          <img
+            src={croppedImageUrl}
+            alt={t("nutriscore.image_alt")}
+            loading="lazy"
+            style={{ objectFit: "contain", width: "100%", height: "100%" }}
+          />
+        ) : (
+          <Typography>NOT A LOGO</Typography>
+        )}
         <Checkbox
           sx={{ position: "absolute", bottom: 10, right: 10 }}
           checked={checked}
@@ -122,19 +128,6 @@ const LogoQuesitonCard = (props) => {
   );
 };
 
-const NutriscoreImage = ({ croppedImageUrl }) => {
-  const { t } = useTranslation();
-
-  return (
-    <img
-      src={croppedImageUrl}
-      alt={t("nutriscore.image_alt")}
-      loading="lazy"
-      style={{ objectFit: "contain", width: "100%", height: "100%" }}
-    />
-  );
-};
-
 export default function LogoQuestionValidator({ options }) {
   const { t } = useTranslation();