robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added redux store for form elements

Browse Source
This commit is contained in:
robbond
2021-07-12 14:44:08 +01:00
parent c0fb7263d5
commit a555276c86
8 changed files with 162 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+72 -71
View File
@@ -1,4 +1,5 @@
import useSWR from "swr";
import { Field, reduxForm } from "redux-form";
export function Textfield(props) {
const { name, label } = props;
@@ -8,12 +9,12 @@ export function Textfield(props) {
<label className="govuk-label govuk-label--m " htmlFor="event-name">
{props.label}
</label>
<input
className="govuk-input govuk-input--width-20"
id="event-name"
<Field
name={props.name}
id={props.name}
component="input"
type="text"
className="govuk-input govuk-input--width-20"
/>
</div>
);
@@ -36,13 +37,15 @@ export function MultiLinefield(props) {
Do not include personal or financial information, like your
National Insurance number or credit card details.
</div>
<textarea
className="govuk-textarea"
id="more-detail"
name="more-detail"
<Field
name={props.name}
id={props.name}
component="input"
type="text"
rows="5"
className="govuk-textarea govuk-input--width-20"
aria-describedby="more-detail-hint"
></textarea>
/>
</div>
);
}
@@ -70,18 +73,18 @@ export function DateField(props) {
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
htmlFor="dob-day"
htmlFor={props.name + "-day"}
>
Day
</label>
<input
className="govuk-input govuk-date-input__input govuk-input--width-2"
id="dob-day"
name="dob-day"
<Field
name={props.name + "-day"}
id={props.name + "-day"}
component="input"
type="text"
autoComplete="bday-day"
pattern="[0-9]*"
inputMode="numeric"
className="govuk-input govuk-date-input__input govuk-input--width-2"
/>
</div>
</div>
@@ -89,18 +92,18 @@ export function DateField(props) {
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
htmlFor="dob-month"
htmlFor={props.name + "-month"}
>
Month
</label>
<input
className="govuk-input govuk-date-input__input govuk-input--width-2"
id="dob-month"
name="dob-month"
<Field
name={props.name + "-month"}
id={props.name + "-month"}
component="input"
type="text"
autoComplete="bday-month"
pattern="[0-9]*"
inputMode="numeric"
className="govuk-input govuk-date-input__input govuk-input--width-2"
/>
</div>
</div>
@@ -108,18 +111,18 @@ export function DateField(props) {
<div className="govuk-form-group">
<label
className="govuk-label govuk-date-input__label"
htmlFor="dob-year"
htmlFor={props.name + "-year"}
>
Year
</label>
<input
className="govuk-input govuk-date-input__input govuk-input--width-4"
id="dob-year"
name="dob-year"
<Field
name={props.name + "-year"}
id={props.name + "-year"}
component="input"
type="text"
autoComplete="bday-year"
pattern="[0-9]*"
inputMode="numeric"
className="govuk-input govuk-date-input__input govuk-input--width-4"
/>
</div>
</div>
@@ -131,7 +134,7 @@ export function DateField(props) {
export function YesNofield(props) {
const { name, label } = props;
const yesNo = ["Yes", "No"];
return (
<div className="govuk-form-group">
<fieldset
@@ -145,36 +148,28 @@ export function YesNofield(props) {
</legend>
<div className="govuk-radios govuk-radios--inline">
<div className="govuk-radios__item">
<input
className="govuk-radios__input"
id="changed-name"
name="changed-name"
type="radio"
value="yes"
/>
<label
className="govuk-label govuk-radios__label"
htmlFor="changed-name"
{Object.keys(yesNo).map((key, index) => (
<div
className="govuk-radios__item"
data-children-count={key}
key={key}
>
Yes
</label>
</div>
<div className="govuk-radios__item">
<input
className="govuk-radios__input"
id="changed-name-2"
name="changed-name"
type="radio"
value="no"
/>
<label
className="govuk-label govuk-radios__label"
htmlFor="changed-name-2"
>
No
</label>
</div>
<Field
id={props.name + "_" + index}
name={props.name}
component="input"
type="radio"
className="govuk-radios__input"
value={yesNo[key]}
/>
<label
className="govuk-label govuk-radios__label"
htmlFor={props.name + "_" + index}
>
{yesNo[key]}
</label>
</div>
))}
</div>
</fieldset>
</div>
@@ -193,7 +188,11 @@ export function PickList(props) {
<label className="govuk-label govuk-body-m" htmlFor="sort">
{props.label}
</label>
<select className="govuk-select" id="sort" name="sort">
<select
className="govuk-select"
id={props.name}
name={props.name}
>
<option value="">empty</option>
</select>
</div>
@@ -213,7 +212,7 @@ export function PickList(props) {
<label className="govuk-label govuk-body-m" htmlFor="sort">
{props.label}
</label>
<select className="govuk-select" id="sort" name="sort">
<select className="govuk-select" id={props.name} name={props.name}>
{Object.keys(dropdownObj).map((key, index) => {
return (
<option
@@ -247,11 +246,12 @@ export function NumericField(props) {
<div id="account-number-hint" className="govuk-hint">
Must be between 6 and 8 digits long
</div>
<input
className="govuk-input govuk-input--width-10"
id="account-number"
name="account-number"
<Field
name={props.name}
id={props.name}
component="input"
type="text"
className="govuk-input govuk-input--width-20"
spellCheck="false"
aria-describedby="account-number-hint"
pattern="[0-9]*"
@@ -276,11 +276,12 @@ export function DecimalField(props) {
<div id="account-number-hint" className="govuk-hint">
Must be between 6 and 8 digits long
</div>
<input
className="govuk-input govuk-input--width-10"
id="account-number"
name="account-number"
<Field
name={props.name}
id={props.name}
component="input"
type="text"
className="govuk-input govuk-input--width-10"
spellCheck="false"
aria-describedby="account-number-hint"
pattern="[0-9]*"
@@ -298,12 +299,12 @@ export function ReadOnlyfield(props) {
<label className="govuk-label govuk-label--m " htmlFor="event-name">
{props.label}
</label>
<input
className="govuk-input govuk-input--width-20"
id="event-name"
<Field
name={props.name}
id={props.name}
component="input"
type="text"
className="govuk-input govuk-input--width-20"
disabled
/>
</div>
components/newappeal/buildrow.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default function BuildRow(props) {
const router = useRouter();
const { locale } = router;
const { rowXML, whichSection, sectionCount } = props;
const { rowXML, whichSection, sectionCount, onSubmit } = props;
const parser = new DOMParser();
components/newappeal/buildsection.js
+61 -42
View File
@@ -4,18 +4,20 @@ import useTranslation from "next-translate/useTranslation";
import { useState, useEffect } from "react";
import xpath from "xpath";
import BuildRow from "./buildrow";
import { reduxForm, formValueSelector } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
const BuildSection = (props) => {
useEffect(() => {
window.scrollTo(0, 0);
});
let BuildSection = (props) => {
// useEffect(() => {
// window.scrollTo(0, 0);
// });
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { formXML, sectionCount } = props;
const { formXML, sectionCount, onSubmit, handleSubmit } = props;
const [currentSection, setCurrentSection] = useState(1);
const parser = new DOMParser();
@@ -36,8 +38,6 @@ const BuildSection = (props) => {
doc
);
console.log(titleList);
const handleParam = (setValue) => (e) => setValue(e.target.value);
const basicSearch = (event) => {
@@ -46,44 +46,49 @@ const BuildSection = (props) => {
// /searchresults
};
const onHandleSubmit = (values) => {
setCurrentSection(currentSection + 1);
};
return (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<h2>{titles[0].value} </h2>
<BuildRow
rowXML={rowXML}
whichSection={props.whichSection}
sectionCount={props.sectionCount}
/>
{}
<div className="govuk-button-group">
{props.sectionCount != currentSection ? (
<button
className="govuk-button"
data-module="govuk-button"
onClick={() =>
setCurrentSection(currentSection + 1)
}
>
Continue
</button>
) : (
""
)}
{currentSection > 1 ? (
<a
className="govuk-link"
href="#"
onClick={() =>
setCurrentSection(currentSection - 1)
}
>
Back
</a>
) : (
""
)}
</div>
<form onSubmit={handleSubmit(onHandleSubmit)}>
<BuildRow
rowXML={rowXML}
whichSection={props.whichSection}
sectionCount={props.sectionCount}
onSubmit={onSubmit}
/>
{}
<div className="govuk-button-group">
{props.sectionCount != currentSection ? (
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
) : (
""
)}
{currentSection > 1 ? (
<a
className="govuk-link"
href="#"
onClick={() =>
setCurrentSection(currentSection - 1)
}
>
Back
</a>
) : (
""
)}
</div>
</form>
</div>
<div className="govuk-grid-column-one-third">
<nav
@@ -118,4 +123,18 @@ const BuildSection = (props) => {
);
};
export default BuildSection;
const mapStateToProps = (state) => {
return {
form: state.form,
};
};
BuildSection = reduxForm({
// a unique name for the form
form: "sssappealForm",
destroyOnUnmount: false,
})(BuildSection);
const selector = formValueSelector("appealForm"); // <-- same as form name
export default connect(mapStateToProps)(BuildSection);