From 1df5071ef9768918c55cc17539da995bdd50d585 Mon Sep 17 00:00:00 2001
From: jyassien <jihadumuhammed@gmail.com>
Date: Fri, 22 Nov 2024 22:47:40 -0700
Subject: [PATCH] Gives error when the model determines if the submitted image
 is invalid.

---
 src/common/ActionErrorPopup.jsx          |  8 +++++---
 src/common/UserErrorPopup.jsx            |  8 --------
 src/homePage/uploadImage/UploadImage.jsx | 21 ++++++++++++++-------
 3 files changed, 19 insertions(+), 18 deletions(-)
 delete mode 100644 src/common/UserErrorPopup.jsx

diff --git a/src/common/ActionErrorPopup.jsx b/src/common/ActionErrorPopup.jsx
index 2af2df7..e465449 100644
--- a/src/common/ActionErrorPopup.jsx
+++ b/src/common/ActionErrorPopup.jsx
@@ -20,9 +20,11 @@ const ActionErrorPopup = ({ errorTitle, errorMessage }) => {
             {modalErrorMessage.errorTitle || "Error"}
           </Modal.Title>
         </Modal.Header>
-        <Modal.Body className="text-primary fs-2">
-          <i className="fa-sharp fa-solid fa-circle-info me-2" />
-          {modalErrorMessage.errorMessage || "Something wrong happened."}
+        <Modal.Body className="d-flex text-primary gap-2 fs-2">
+          <i className="fa-sharp fa-solid fa-circle-info pt-2" />
+          <div>
+            {modalErrorMessage.errorMessage || "Something wrong happened."}
+          </div>
         </Modal.Body>
         <Modal.Footer>
           <Button
diff --git a/src/common/UserErrorPopup.jsx b/src/common/UserErrorPopup.jsx
deleted file mode 100644
index 2c10a25..0000000
--- a/src/common/UserErrorPopup.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-
-const UserErrorPopup = () => {
-  console.log("UserErrorPopup: ");
-  return <div>UserErrorPopup</div>;
-};
-
-export default UserErrorPopup;
diff --git a/src/homePage/uploadImage/UploadImage.jsx b/src/homePage/uploadImage/UploadImage.jsx
index 213a07e..ecc5f01 100644
--- a/src/homePage/uploadImage/UploadImage.jsx
+++ b/src/homePage/uploadImage/UploadImage.jsx
@@ -39,6 +39,7 @@ export default function UploadImage() {
   const [evaluations, setEvaluations] = useState([]);
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState(null);
+  const [isImageValid, setIsImageValid] = useState("");
   const [error, setError] = useState(false);
 
   const { userID, userLastScanSummary } = useAccountContext();
@@ -61,7 +62,16 @@ export default function UploadImage() {
     },
   };
 
-  useEffect(() => {}, [status]);
+  useEffect(() => {
+    if (isImageValid === false) {
+      handleShowErrorModal({
+        errorTitle: "Invalid Image",
+        errorMessage:
+          "The uploaded image doesn't appear to be of a plant. Please upload a clear and valid plant image to proceed with the analysis.",
+      });
+      return;
+    }
+  }, [status, isImageValid]);
 
   const handleImageChange = (event) => {
     const file = event?.target?.files[0];
@@ -88,10 +98,11 @@ export default function UploadImage() {
       const response = await axios.post(url, data, headers);
 
       setStatus(() => response?.status);
+      setIsImageValid(() => response?.data?.isImageValid);
       updateUserLastScanId(() => response?.data?.scanId);
       setAnalysisResults(() => response?.data?.results);
       setEvaluations(() => response?.data?.results);
-      // console.log(">>> 3. analysisResult:", analysisResult);
+      console.log(">>> 3. response?.data: ", response?.data);
     } catch (err) {
       console.error("fetchData() Error:", err);
       setError(err.message);
@@ -108,10 +119,6 @@ export default function UploadImage() {
       });
       return;
     }
-    // if (selectedInsightIds.length === 0) {
-    //   console.log("Please select at least one insight.");
-    //   return;
-    // }
 
     updateSelectedEvaluationDetail(null);
     updateLastConversation([]);
@@ -128,7 +135,7 @@ export default function UploadImage() {
   const evaluationCardsRef = useRef(null);
   const dataTableRef = useRef(null);
   useEffect(() => {
-    if (status === 200 && evaluationCardsRef.current) {
+    if (status === 200 && isImageValid && evaluationCardsRef.current) {
       evaluationCardsRef?.current?.scrollIntoView({
         behavior: "smooth",
         block: "center",