Fix initial zone selection

- Also fixes useEffect console errors

frontend/src/components/steps/zone/ZoneSelector.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import SiteRepository from '../../../repository/SiteRepository';
 import { HabitatSVG } from '../HabitatSVG'
 
@@ -8,27 +8,6 @@ export default function ZoneSelector(props) {
     const [segmentMapping, setSegmentMapping] = useState({});
     const [selectedZoneSegment, setZoneSegment] = useState(null);
 
-    const getHabitatImage = () => {
-        SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => {
-            if (response.status === 200) {
-                const imageData = response.data
-                setHabitatImageObject(imageData)
-            }
-        })
-    }
-
-    const getZones = () => {
-        SiteRepository.getZones().then(response => {
-            if (response.status === 200) {
-                const zoneData = response.data
-                let newSegmentMapping = {}
-                zoneData.forEach(zone => {
-                    newSegmentMapping[zone.related_svg_segment] = zone
-                });
-                setSegmentMapping(newSegmentMapping);
-            }
-        })
-    }
 
     const setZoneOrRedirect = (zone) => {
         const redirectHabitat = zone && zone.redirect_habitat;
@@ -42,15 +21,53 @@ export default function ZoneSelector(props) {
         props.setNextDisabled(false);
     }
 
+
     useEffect(() => {
+        const getHabitatImage = () => {
+            SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => {
+                if (response.status === 200) {
+                    const imageData = response.data
+                    setHabitatImageObject(imageData)
+                }
+            })
+        }    
+
+        const setInitialZone = () => {
+            if (props.filters.zone) {
+                const zone = props.filters.zone
+                const zoneSegment = document.querySelectorAll(`.zone-selector-svg svg path[inkscapelabel="${zone.related_svg_segment}"]`)[0];
+                
+                // If the previously selected zone segment is located in the diagram then highlight it
+                if (zoneSegment) {
+                    setZoneSegment(zoneSegment)
+                    zoneSegment.style.fill = "#eeeeee"
+                    zoneSegment.style['fill-opacity'] = 0.5;
+                    props.setNextDisabled(false);
+                }
+            }
+        }
+
+        const getZones = () => {
+            SiteRepository.getZones().then(response => {
+                if (response.status === 200) {
+                    const zoneData = response.data
+                    let newSegmentMapping = {}
+                    zoneData.forEach(zone => {
+                        newSegmentMapping[zone.related_svg_segment] = zone
+                    });
+                    setSegmentMapping(newSegmentMapping);
+                    setInitialZone()
+                }
+            })
+        }
+
         // Retrieves the habitat image from the api if it's not loaded already
         Object.keys(habitatImageObject).length === 0 && getHabitatImage()
 
         // Retrieves the habitat image from the api if it's not loaded already
         Object.keys(segmentMapping).length === 0 && getZones()
 
-
+    }, [ habitatImageObject, segmentMapping, props, props.filters.zone]);
-    }, [props.filters.zone]);
 
     const selectZone = (element) => {
         if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) {
@@ -63,6 +80,7 @@ export default function ZoneSelector(props) {
             element.style['fill-opacity'] = 0.5;
 
             const zone = segmentMapping[element.attributes.inkscapelabel.nodeValue]
+
             setZoneOrRedirect(zone)
         }
     }