Error message display (#46)

* Error message display

When an error occurs, the error message is displayed in the left-hand sidebar. When the user creates a new AOI the erorr message is replaced by the progress bar

* refactored code

changing code to use one state variable to check for an error and display the error message

* revert change to package-lock

Co-authored-by: Gavin Rehkemper <[email protected]>

field-sustainability-helper/src/components/SustainabilityPanel.js

@@ -40,12 +40,14 @@ function LeftSidebar({ sketchLabel, view, drawnGeometry }) {
   const [showSustainabilityScore, setShowSustainabilityScore] = useState(false);
   const [formData, setFormData] = useState(null);
   const [busy, setBusy] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
 
   /**
    * onSketchResultGraphic - handle the drawn graphic
    * @param {Graphic} graphic the drawn Graphic
    */
   const onSketchResultGraphic = (graphic) => {
+    setErrorMessage("");
     runAnalysis(graphic);
   };
 
@@ -102,7 +104,11 @@ function LeftSidebar({ sketchLabel, view, drawnGeometry }) {
       getCrops(graphic.geometry, view, 2020, apiKey),
       getAvgNdvi(graphic.geometry, view, 2019, apiKey),
       fetchNdviYearImages(2015, 2019, graphic.geometry, apiKey),
-    ]);
+    ]).catch((err) => { 
+        console.log(err);
+        setErrorMessage(err.message);
+        setBusy(false); 
+      });
 
     _resultGraphicsLayer.addMany(soilInfo.allResults);
     setTopSoils(soilInfo.topSoils);
@@ -204,6 +210,16 @@ function LeftSidebar({ sketchLabel, view, drawnGeometry }) {
           >
             {strings.sustainabilityButton}
           </CalciteButton>
+
+          <p style={{
+            display: errorMessage !== "" ? "block" : "none",
+            fontWeight: 600,
+            paddingTop: "250px",
+            paddingLeft: "210px",
+            fontSize: "25px"
+          }}>
+          {errorMessage}
+        </p>
         </>
       );
     } else return "";