Add redirect demo

backend/right_tree/api/data/fixtures/006_zones.json

@@ -690,7 +690,7 @@
             "name": "SPRAY ZONE",
             "variant": "Coastal",
             "refined_variant": "Bush Edge",
-            "redirect_habitat": null,
+            "redirect_habitat": 2,
             "ignore_soil_order_filter": false,
             "ignore_location_filter": false
         }

backend/right_tree/api/data/fixtures/007_sample_habitat_images.json

@@ -16,5 +16,14 @@
             "name": "Salt Marsh",
             "image_filename": "03-coastal-grass-reeds-scrub.png"
         }
+    },
+    {
+        "model": "api.habitatimage",
+        "pk": 3,
+        "fields": {
+            "habitat": 2,
+            "name": "Bush Hillsides",
+            "image_filename": "07-riparian-bush-hillsides.png"
+        }
     }
 ]

backend/right_tree/api/migrations/0008_alter_zone_redirect_habitat.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.2.8 on 2021-11-10 22:02
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0007_alter_zoneimagesegment_segment_percentage_width'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='zone',
+            name='redirect_habitat',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='zone_redirects', to='api.habitat'),
+        ),
+    ]

backend/right_tree/api/models.py

@@ -75,7 +75,7 @@ class Zone(models.Model):
     variant = models.CharField(null=True, blank=True, max_length=50)
     refined_variant = models.CharField(null=True, blank=True, max_length=100)
     redirect_habitat = models.ForeignKey(
-        HabitatImage, blank=True, null=True, on_delete=models.CASCADE,  related_name='zone_redirects')
+        Habitat, blank=True, null=True, on_delete=models.CASCADE,  related_name='zone_redirects')
     ignore_soil_order_filter = models.BooleanField(default=False)
     ignore_location_filter = models.BooleanField(default=False)
 

backend/right_tree/api/serializers.py

@@ -39,18 +39,25 @@ class SoilVariantSerializer(serializers.HyperlinkedModelSerializer):
         model = SoilVariant
         fields = ['name']
 
-
 class SimpleHabitatImageSerializer(serializers.HyperlinkedModelSerializer):
     id = serializers.ReadOnlyField()
 
     class Meta:
         model = HabitatImage
-        fields = ['id', 'name', 'image_filename']
+        fields = ['id']
+
+class SimpleHabitatSerializer(serializers.HyperlinkedModelSerializer):
+    id = serializers.ReadOnlyField()
+    images = SimpleHabitatImageSerializer(many=True)
+
+    class Meta:
+        model = Habitat
+        fields = ['id', 'name', 'images']
 
 
 class ZoneSerializer(serializers.HyperlinkedModelSerializer):
     id = serializers.ReadOnlyField()
-    redirect_habitat = SimpleHabitatImageSerializer()
+    redirect_habitat = SimpleHabitatSerializer()
 
     class Meta:
         model = Zone

frontend/src/components/Stepper.js

@@ -24,20 +24,30 @@ const steps = [
 export default function StepperWizard(props) {
   const [activeStep, setActiveStep] = React.useState(0);
   const [nextDisabled, setNextDisabled] = React.useState(true);
+  const [redirectBack, setRedirectBack] = React.useState(false);
+
+  const resetStepState = () => {
+    setNextDisabled(true);
+    setRedirectBack(false);
+  }
 
   const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    if (redirectBack) {
-    setNextDisabled(true);
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    } else {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    }
+    resetStepState();
   };
 
   const handleBack = () => {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    setNextDisabled(true);
+    resetStepState();
   };
 
   const handleReset = () => {
     setActiveStep(0);
-    setNextDisabled(true);
+    resetStepState();
     props.resetFilterState()
   };
 
@@ -55,7 +65,7 @@ export default function StepperWizard(props) {
         })}
       </Stepper>
       <React.Fragment>
-        <CurrentStep {...props} setNextDisabled={setNextDisabled} />
+        <CurrentStep {...props} setNextDisabled={setNextDisabled} setRedirectBack={setRedirectBack} />
         <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
           <Button
             color="inherit"

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

@@ -25,8 +25,17 @@ export default function ZoneSelector(props) {
         })
     }
 
-    const setZone = (zoneSegment) => {
+    const setZoneOrRedirect = (zoneSegment) => {
-        setZoneSegment(zoneSegment)
+        const redirectHabitat = zoneSegment && zoneSegment.zone && zoneSegment.zone.redirect_habitat;
+        setZoneSegment(zoneSegment);
+
+        if (redirectHabitat) {
+            props.updateFilterState({ "habitat": { "id": redirectHabitat.id, "name": redirectHabitat.name } });
+            props.setRedirectBack(true)
+        } else {
+            props.updateFilterState({ "zone": zoneSegment.zone });
+        }
+
         props.setNextDisabled(false);
     }
 
@@ -39,15 +48,15 @@ export default function ZoneSelector(props) {
             setImageHeight(newHeight);
         }
 
-        // Retrieves the habitat image from the api if they are not loaded already
+        // Retrieves the habitat image from the api if it's not loaded already
         Object.keys(habitatImageObject).length === 0 && getHabitatImage(findAndSetImageHeight)
 
         // Sets the image height such that the full image always displays on page resize
         window.addEventListener("resize", () => findAndSetImageHeight(habitatImageFile), false);
 
         // Temporarily bypass if there is no image available
-        if (props.filters.zone || !props.filters.habitatImage) {
+        if (props.filters.zone || !props.filters.habitatImage || (habitatImageObject && habitatImageObject.image_segments)) {
-            setZone(props.filters.zone)
+            props.setNextDisabled(false);
         }
     });
 
@@ -61,12 +70,6 @@ export default function ZoneSelector(props) {
         display: 'flex'
     }
 
-    const selectZone = (zoneSegment) => {
-        // Update the filters for the selected zone and enable the next button
-        setZone(zoneSegment)
-        props.updateFilterState({ "zone": zoneSegment.zone });
-    };
-
     return (
         <div ref={imageContainer} style={{ width: '100%' }}>
             <p>{habitatImageObject && habitatImageObject.name}</p>
@@ -80,7 +83,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 key={segment.id} onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
+                        <div key={segment.id} onClick={() => { setZoneOrRedirect(segment) }} className={`selectable-section ${selectedZoneSegment === segment ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
                     )}
                 </div>
                 )}