From 460fcb5c09adff7f491b17a9e59e4b95e9394725 Mon Sep 17 00:00:00 2001
From: Dana Lambert <danalambert@catalyst.net.nz>
Date: Mon, 8 Nov 2021 17:12:06 +1300
Subject: [PATCH] Fix console warnings - remove unused project specifics step -
 add dependents to habitat selector useEffect - change == to === in zone
 selector

---
 frontend/src/components/Stepper.js                       | 1 -
 frontend/src/components/steps/habitat/HabitatSelector.js | 6 +++---
 frontend/src/components/steps/zone/ZoneSelector.js       | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js
index 593fcc4..5830608 100644
--- a/frontend/src/components/Stepper.js
+++ b/frontend/src/components/Stepper.js
@@ -9,7 +9,6 @@ import LocationStep from './steps/location/LocationStep'
 import SoilStep from './steps/soilvariant/SoilStep'
 import HabitatStep from './steps/habitat/HabitatStep';
 import ZoneStep from './steps/zone/ZoneStep';
-import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep';
 import SummaryStep from './steps/summary/ZoneStep';
 import ResultsStep from './steps/results/ResultsStep'
 
diff --git a/frontend/src/components/steps/habitat/HabitatSelector.js b/frontend/src/components/steps/habitat/HabitatSelector.js
index eeae7c9..6137bb8 100644
--- a/frontend/src/components/steps/habitat/HabitatSelector.js
+++ b/frontend/src/components/steps/habitat/HabitatSelector.js
@@ -42,7 +42,7 @@ export default function HabitatSelector(props) {
         if (props.filters.habitat && props.filters.habitatImage) {
             props.setNextDisabled(false);
         }
-    });
+    }, [habitats.length, props, habitatsMap]);
 
     const setHabitatImage = (imageId) => {
         // Sets the selected image radio, updates filter state for image and enable the next button
@@ -67,7 +67,7 @@ export default function HabitatSelector(props) {
         }
 
         // Update the filters for the selected habitat
-        props.updateFilterState({ "habitat": habitatObject });
+        props.updateFilterState({ "habitat": {"id": habitatObject.id, "name": habitatObject.name} });
     };
 
     const handleImageRadioChange = (event) => {
@@ -79,7 +79,7 @@ export default function HabitatSelector(props) {
         return (
             <div>
                 <p>{image.name}</p>
-                <img src={require(`../../../assets/img/habitats/${image.image_filename}`).default} style={{ "width": "300px" }} />
+                <img src={require(`../../../assets/img/habitats/${image.image_filename}`).default} alt={image.name} style={{ "width": "300px" }} />
             </div>)
     }
 
diff --git a/frontend/src/components/steps/zone/ZoneSelector.js b/frontend/src/components/steps/zone/ZoneSelector.js
index 4899afe..1eef7c1 100644
--- a/frontend/src/components/steps/zone/ZoneSelector.js
+++ b/frontend/src/components/steps/zone/ZoneSelector.js
@@ -62,7 +62,7 @@ export default function ZoneSelector(props) {
                 // Actual zone selector
                 (<div style={stepBackground}>
                     {habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment =>
-                        <div onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment == segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
+                        <div onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
                     )}
                 </div>
                 )}