Fix initial zone selection

- Also fixes useEffect console errors
This commit is contained in:
Dana Lambert 2021-12-06 11:05:43 +13:00
parent a61f782ac4
commit 1b09723463

View file

@ -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()
}, [props.filters.zone]);
}, [ habitatImageObject, segmentMapping, props, 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)
}
}