added redux store for form elements

components/newappeal/buildsection.js

@@ -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);