From 06e33d7ac642030997dc88d72f733abd712590ac Mon Sep 17 00:00:00 2001 From: Dana Lambert Date: Wed, 20 Oct 2021 16:15:15 +1300 Subject: [PATCH] Some refactoring of existing information panels - extracting out static strings where possible - create StepInformation component - rename step components to end in 'Step' --- frontend/src/assets/data/staticText.json | 30 +++++++++++++++++++ frontend/src/components/Stepper.js | 4 +-- .../src/components/steps/StepInformation.js | 9 ++++++ .../components/steps/locationstep/Location.js | 22 -------------- .../steps/locationstep/LocationStep.js | 22 ++++++++++++++ .../components/steps/soilvariantstep/Soil.js | 26 ---------------- .../steps/soilvariantstep/SoilSelector.js | 5 ++-- .../steps/soilvariantstep/SoilStep.js | 29 ++++++++++++++++++ 8 files changed, 95 insertions(+), 52 deletions(-) create mode 100644 frontend/src/assets/data/staticText.json create mode 100644 frontend/src/components/steps/StepInformation.js delete mode 100644 frontend/src/components/steps/locationstep/Location.js create mode 100644 frontend/src/components/steps/locationstep/LocationStep.js delete mode 100644 frontend/src/components/steps/soilvariantstep/Soil.js create mode 100644 frontend/src/components/steps/soilvariantstep/SoilStep.js diff --git a/frontend/src/assets/data/staticText.json b/frontend/src/assets/data/staticText.json new file mode 100644 index 0000000..3f382dd --- /dev/null +++ b/frontend/src/assets/data/staticText.json @@ -0,0 +1,30 @@ +{ + "steps": { + "location": { + "title": "Right Plant Right Place Plant Selector Tool for New Zealand.", + "description": "Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations." + }, + "soil": { + "title": "Soil Variant Selection", + "description": "", + "optionsLabel": "Soil Variant Options", + "optionsHelperText": "Please select your soil variant from the options above." + }, + "habitat": { + "title": "", + "description": "" + }, + "zone": { + "title": "", + "description": "" + }, + "projectSpecifics": { + "title": "", + "description": "" + }, + "summary": { + "title": "", + "description": "" + } + } +} \ No newline at end of file diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js index f294ddb..2b19abe 100644 --- a/frontend/src/components/Stepper.js +++ b/frontend/src/components/Stepper.js @@ -5,8 +5,8 @@ import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import Button from '@mui/material/Button'; -import LocationStep from './steps/locationstep/Location' -import SoilStep from './steps/soilvariantstep/Soil' +import LocationStep from './steps/locationstep/LocationStep' +import SoilStep from './steps/soilvariantstep/SoilStep' import ResultsStep from './steps/Results' const steps = [ diff --git a/frontend/src/components/steps/StepInformation.js b/frontend/src/components/steps/StepInformation.js new file mode 100644 index 0000000..48e5909 --- /dev/null +++ b/frontend/src/components/steps/StepInformation.js @@ -0,0 +1,9 @@ +export default function StepInformation(props) { + return ( +
+

{props.title}

+
+ {props.description} +
+ ) +} diff --git a/frontend/src/components/steps/locationstep/Location.js b/frontend/src/components/steps/locationstep/Location.js deleted file mode 100644 index 72a512b..0000000 --- a/frontend/src/components/steps/locationstep/Location.js +++ /dev/null @@ -1,22 +0,0 @@ -import Step from '../Step'; -import LocationSelectorMap from './Map' - -export default function LocationStep(props) { - const locationInfoPanel = ( -
-

Right Plant Right Place Plant Selector Tool for New Zealand.

-
-

- Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations. -

-
- ) - - const locationSelectionPanel = ( - - ) - - return ( - - ) -} diff --git a/frontend/src/components/steps/locationstep/LocationStep.js b/frontend/src/components/steps/locationstep/LocationStep.js new file mode 100644 index 0000000..12126c0 --- /dev/null +++ b/frontend/src/components/steps/locationstep/LocationStep.js @@ -0,0 +1,22 @@ +import Step from '../Step'; +import LocationSelectorMap from './Map' +import StepInformation from '../StepInformation'; +import staticText from '../../../assets/data/staticText.json' + +export default function LocationStep(props) { + + const locationInfoPanel = ( + {staticText.steps.location.description}

} + /> + ) + + const locationSelectionPanel = ( + + ) + + return ( + + ) +} diff --git a/frontend/src/components/steps/soilvariantstep/Soil.js b/frontend/src/components/steps/soilvariantstep/Soil.js deleted file mode 100644 index 34667bd..0000000 --- a/frontend/src/components/steps/soilvariantstep/Soil.js +++ /dev/null @@ -1,26 +0,0 @@ -import Step from '../Step'; -import SoilSelector from './SoilSelector'; - -export default function SoilVariantStep(props) { - const soilVarientInfoPanel = ( -
-

Soil Variant Selection

-
-

- From your site location, we use New Zealand Soil Classification data and additional Manaaki Whenua Landcare Research 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. -

- Please select an option from the choices listed to the right: -

-
- ) - - const soilVarientSelectionPanel = ( -
- -
- ) - - return ( - - ) -} diff --git a/frontend/src/components/steps/soilvariantstep/SoilSelector.js b/frontend/src/components/steps/soilvariantstep/SoilSelector.js index bd2ed80..8f5aea9 100644 --- a/frontend/src/components/steps/soilvariantstep/SoilSelector.js +++ b/frontend/src/components/steps/soilvariantstep/SoilSelector.js @@ -6,6 +6,7 @@ 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 = (

Is your ground/soil VERY WET? 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 subsoil is either very dark brown and peat-like, or grey rather than a red, brown, or yellow rusty colour? @@ -21,7 +22,7 @@ const MESIC_SOIL_DESCRIPTION = (

export default function SoilSelector(props) { const [value, setValue] = React.useState(props.filters.soilVariant); - const [helperText, setHelperText] = React.useState('Please select your soil variant from the options above.'); + const [helperText, setHelperText] = React.useState(staticText.steps.soil.optionsHelperText); React.useEffect(() => { if (props.filters.soilVariant) { @@ -44,7 +45,7 @@ export default function SoilSelector(props) { component="fieldset" variant="standard" > - Soil Variant Options + {staticText.steps.soil.optionsLabel} + From your site location, we use New Zealand Soil Classification data and additional Manaaki Whenua Landcare Research 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. +

+ Please select an option from the choices listed to the right: +

) + + const soilVarientInfoPanel = ( + + ) + + const soilVarientSelectionPanel = ( +
+ +
+ ) + + return ( + + ) +}