Fix console warnings

- remove unused project specifics step
- add dependents to habitat selector useEffect
- change == to === in zone selector

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'
 

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>)
     }
 

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>
                 )}