[#40] Review changes
- add comment about Suspense - add missing key attributes - remove redundant fragments - prettier formatting - rename React component files with .jsx extension
This commit is contained in:
Matthew Northcott
parent
ff197cc1a8
commit
0f36c79dbf
42 changed files with 1020 additions and 785 deletions
|
|
@ -1,63 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import Radio from '@mui/material/Radio';
|
||||
import RadioGroup from '@mui/material/RadioGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import FormLabel from '@mui/material/FormLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import staticText from '../../../assets/data/staticText.json'
|
||||
|
||||
const WET_SOIL_DESCRIPTION = (<p>
|
||||
Is your ground/soil <strong>VERY WET</strong>? i.e. is it soft and squishy under foot with ground water at or near surface for three months of year or more? Your soil is considered wet if the <Tooltip arrow title="Topsoil is the uppermost layer of soil – usually 5-20cm of dark soil with high concentrations of organic matter. Subsoil is the layer under the topsoil and generally contains less organic matter and more of the small particles such as sand, silt and clay that characterize the mineral and geology of the location."><strong>subsoil</strong></Tooltip> is either very dark brown and <Tooltip arrow title="Peat is an accumulation of partially decayed vegetation or organic matter, usually brown and often formed in waterlogged areas."><strong>peat</strong></Tooltip>-like, or grey rather than a red, brown, or yellow rusty colour?
|
||||
</p>);
|
||||
|
||||
const DRY_SOIL_DESCRIPTION = (<p>
|
||||
Is your ground/soil <strong>VERY DRY</strong>? i.e. If your soil is very well drained, stony, sandy or shallow (less than one metre depth to bed rock, stones or other hard/artificial surface), or is it completely dry for three months of year or more, and not irrigated then we consider it dry.
|
||||
</p>);
|
||||
|
||||
const MESIC_SOIL_DESCRIPTION = (<p>
|
||||
If your ground/soil does not meet either of the two previous definitions, we’d likely classify it as <strong>MOIST, or somewhere in between very wet and very dry</strong>. Your ground is considered moist if it has compacted soil that is fine or has a soft/crumbly texture. The sand, silt and clay mixture known as loam is considered moist in this context. Moist soils are more than one metre above an impervious layer, and are never water-logged nor are they completely dry for more than three months. If you are unsure, or if you plan to irrigate your site, then select this option.
|
||||
</p>);
|
||||
|
||||
export default function SoilSelector(props) {
|
||||
const [value, setValue] = React.useState(props.filters.soilVariant);
|
||||
const [helperText, setHelperText] = React.useState(staticText.steps.soil.optionsHelperText);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (props.filters.soilVariant) {
|
||||
props.setNextDisabled(false);
|
||||
}
|
||||
});
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
const soilVariantSelection = event.target.value;
|
||||
setValue(soilVariantSelection);
|
||||
setHelperText(' ');
|
||||
props.updateFilterState({ "soilVariant": soilVariantSelection });
|
||||
props.setNextDisabled(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<form >
|
||||
<FormControl
|
||||
sx={{ m: 3 }}
|
||||
component="fieldset"
|
||||
variant="standard"
|
||||
>
|
||||
<FormLabel component="legend">{staticText.steps.soil.optionsLabel}</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="soil-varient-selection"
|
||||
name="soil varient selection"
|
||||
value={value ?? ""}
|
||||
onChange={handleRadioChange}
|
||||
>
|
||||
<FormControlLabel value="D" control={<Radio />} label={DRY_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }}/>
|
||||
<FormControlLabel value="W" control={<Radio />} label={WET_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }} />
|
||||
<FormControlLabel value="M" control={<Radio />} label={MESIC_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }} />
|
||||
</RadioGroup>
|
||||
<FormHelperText>{helperText}</FormHelperText>
|
||||
</FormControl>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
111
frontend/src/components/steps/soilvariant/SoilSelector.jsx
Normal file
111
frontend/src/components/steps/soilvariant/SoilSelector.jsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import * as React from "react";
|
||||
import Radio from "@mui/material/Radio";
|
||||
import RadioGroup from "@mui/material/RadioGroup";
|
||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||
import FormLabel from "@mui/material/FormLabel";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import FormHelperText from "@mui/material/FormHelperText";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import staticText from "../../../assets/data/staticText.json";
|
||||
|
||||
const WET_SOIL_DESCRIPTION = (
|
||||
<p>
|
||||
Is your ground/soil <strong>VERY WET</strong>? i.e. is it soft and squishy
|
||||
under foot with ground water at or near surface for three months of year or
|
||||
more? Your soil is considered wet if the{" "}
|
||||
<Tooltip
|
||||
arrow
|
||||
title="Topsoil is the uppermost layer of soil – usually 5-20cm of dark soil with high concentrations of organic matter. Subsoil is the layer under the topsoil and generally contains less organic matter and more of the small particles such as sand, silt and clay that characterize the mineral and geology of the location."
|
||||
>
|
||||
<strong>subsoil</strong>
|
||||
</Tooltip>{" "}
|
||||
is either very dark brown and{" "}
|
||||
<Tooltip
|
||||
arrow
|
||||
title="Peat is an accumulation of partially decayed vegetation or organic matter, usually brown and often formed in waterlogged areas."
|
||||
>
|
||||
<strong>peat</strong>
|
||||
</Tooltip>
|
||||
-like, or grey rather than a red, brown, or yellow rusty colour?
|
||||
</p>
|
||||
);
|
||||
|
||||
const DRY_SOIL_DESCRIPTION = (
|
||||
<p>
|
||||
Is your ground/soil <strong>VERY DRY</strong>? i.e. If your soil is very
|
||||
well drained, stony, sandy or shallow (less than one metre depth to bed
|
||||
rock, stones or other hard/artificial surface), or is it completely dry for
|
||||
three months of year or more, and not irrigated then we consider it dry.
|
||||
</p>
|
||||
);
|
||||
|
||||
const MESIC_SOIL_DESCRIPTION = (
|
||||
<p>
|
||||
If your ground/soil does not meet either of the two previous definitions,
|
||||
we’d likely classify it as{" "}
|
||||
<strong>MOIST, or somewhere in between very wet and very dry</strong>. Your
|
||||
ground is considered moist if it has compacted soil that is fine or has a
|
||||
soft/crumbly texture. The sand, silt and clay mixture known as loam is
|
||||
considered moist in this context. Moist soils are more than one metre above
|
||||
an impervious layer, and are never water-logged nor are they completely dry
|
||||
for more than three months. If you are unsure, or if you plan to irrigate
|
||||
your site, then select this option.
|
||||
</p>
|
||||
);
|
||||
|
||||
export default function SoilSelector(props) {
|
||||
const [value, setValue] = React.useState(props.filters.soilVariant);
|
||||
const [helperText, setHelperText] = React.useState(
|
||||
staticText.steps.soil.optionsHelperText
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (props.filters.soilVariant) {
|
||||
props.setNextDisabled(false);
|
||||
}
|
||||
});
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
const soilVariantSelection = event.target.value;
|
||||
setValue(soilVariantSelection);
|
||||
setHelperText(" ");
|
||||
props.updateFilterState({ soilVariant: soilVariantSelection });
|
||||
props.setNextDisabled(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<form>
|
||||
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
|
||||
<FormLabel component="legend">
|
||||
{staticText.steps.soil.optionsLabel}
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="soil-varient-selection"
|
||||
name="soil varient selection"
|
||||
value={value ?? ""}
|
||||
onChange={handleRadioChange}
|
||||
>
|
||||
<FormControlLabel
|
||||
value="D"
|
||||
control={<Radio />}
|
||||
label={DRY_SOIL_DESCRIPTION}
|
||||
sx={{ paddingTop: "15px", paddingBottom: "15px" }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="W"
|
||||
control={<Radio />}
|
||||
label={WET_SOIL_DESCRIPTION}
|
||||
sx={{ paddingTop: "15px", paddingBottom: "15px" }}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value="M"
|
||||
control={<Radio />}
|
||||
label={MESIC_SOIL_DESCRIPTION}
|
||||
sx={{ paddingTop: "15px", paddingBottom: "15px" }}
|
||||
/>
|
||||
</RadioGroup>
|
||||
<FormHelperText>{helperText}</FormHelperText>
|
||||
</FormControl>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import Step from '../Step';
|
||||
import SoilSelector from './SoilSelector';
|
||||
import StepInformation from '../StepInformation';
|
||||
import staticText from '../../../assets/data/staticText.json'
|
||||
import soilBackgroundImage from '../../../assets/img/stepBackgrounds/step2.jpg';
|
||||
|
||||
export default function SoilVariantStep(props) {
|
||||
const SOIL_DESCRIPTION = (<p>
|
||||
From your site location, we use <a href="https://soils.landcareresearch.co.nz/describing-soils/nzsc/" target="blank">New Zealand Soil Classification</a> data and additional <a href="https://www.landcareresearch.co.nz" target="blank">Manaaki Whenua Landcare Research</a> data to determine overall soil type. However we also need to know as much as possible about the moisture content of the soil at your planting site location.
|
||||
<br /><br />
|
||||
Please select an option from the choices listed to the right:
|
||||
</p>)
|
||||
|
||||
const soilVarientInfoPanel = (
|
||||
<StepInformation
|
||||
title={staticText.steps.soil.title}
|
||||
description={SOIL_DESCRIPTION}
|
||||
/>
|
||||
)
|
||||
|
||||
const soilVarientSelectionPanel = (
|
||||
<div className='p-5'>
|
||||
<SoilSelector {...props} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} backgroundImage={soilBackgroundImage} />
|
||||
)
|
||||
}
|
||||
50
frontend/src/components/steps/soilvariant/SoilStep.jsx
Normal file
50
frontend/src/components/steps/soilvariant/SoilStep.jsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import Step from "../Step";
|
||||
import SoilSelector from "./SoilSelector";
|
||||
import StepInformation from "../StepInformation";
|
||||
import staticText from "../../../assets/data/staticText.json";
|
||||
import soilBackgroundImage from "../../../assets/img/stepBackgrounds/step2.jpg";
|
||||
|
||||
export default function SoilVariantStep(props) {
|
||||
const SOIL_DESCRIPTION = (
|
||||
<p>
|
||||
From your site location, we use{" "}
|
||||
<a
|
||||
href="https://soils.landcareresearch.co.nz/describing-soils/nzsc/"
|
||||
target="blank"
|
||||
>
|
||||
New Zealand Soil Classification
|
||||
</a>{" "}
|
||||
data and additional{" "}
|
||||
<a href="https://www.landcareresearch.co.nz" target="blank">
|
||||
Manaaki Whenua Landcare Research
|
||||
</a>{" "}
|
||||
data to determine overall soil type. However we also need to know as much
|
||||
as possible about the moisture content of the soil at your planting site
|
||||
location.
|
||||
<br />
|
||||
<br />
|
||||
Please select an option from the choices listed to the right:
|
||||
</p>
|
||||
);
|
||||
|
||||
const soilVarientInfoPanel = (
|
||||
<StepInformation
|
||||
title={staticText.steps.soil.title}
|
||||
description={SOIL_DESCRIPTION}
|
||||
/>
|
||||
);
|
||||
|
||||
const soilVarientSelectionPanel = (
|
||||
<div className="p-5">
|
||||
<SoilSelector {...props} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Step
|
||||
informationComponent={soilVarientInfoPanel}
|
||||
selectionComponent={soilVarientSelectionPanel}
|
||||
backgroundImage={soilBackgroundImage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue