pagination between sections

components/newappeal/buildsection.js

@@ -1,52 +1,86 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
 import xpath from "xpath";
 import BuildRow from "./buildrow";
 
-export default function BuildSection(props) {
+const BuildSection = (props) => {
+    useEffect(() => {
+        document.title = `You clicked ${currentSection} times`;
+        window.scrollTo(0, 0);
+    });
+
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const { formXML, whichSection, sectionCount } = props;
+    const { formXML, sectionCount } = props;
+    const [currentSection, setCurrentSection] = useState(1);
 
     const parser = new DOMParser();
     var doc = parser.parseFromString(props.formXML, "text/xml");
     var titles = xpath.select(
-        "//form/tabs/tab[" +
-            (parseInt(whichSection) + 1) +
-            " ]/labels/label/@description",
+        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
         doc
     );
     var rowXML = xpath.select(
         "/form/tabs/tab[" +
-            (parseInt(whichSection) + 1) +
+            currentSection +
             "]/columns//sections/section/rows/row",
         doc
     );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+        console.log(query);
+        // /searchresults
+    };
+
     return (
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-full">
-                <h2>
-                    {props.whichSection} - {titles[0].value}{" "}
-                </h2>
+                <h2>{titles[0].value} </h2>
                 <BuildRow
                     rowXML={rowXML}
                     whichSection={props.whichSection}
                     sectionCount={props.sectionCount}
                 />
-                <button
-                    type="submit"
-                    role="button"
-                    draggable="false"
-                    class="govuk-button"
-                    data-module="govuk-button"
-                >
-                    Continue
-                </button>
+                {}
+                <div class="govuk-button-group">
+                    {props.sectionCount != currentSection ? (
+                        <button
+                            class="govuk-button"
+                            data-module="govuk-button"
+                            onClick={() =>
+                                setCurrentSection(currentSection + 1)
+                            }
+                        >
+                            Continue
+                        </button>
+                    ) : (
+                        ""
+                    )}
+                    {currentSection > 1 ? (
+                        <a
+                            class="govuk-link"
+                            href="#"
+                            onClick={() =>
+                                setCurrentSection(currentSection - 1)
+                            }
+                        >
+                            Back
+                        </a>
+                    ) : (
+                        ""
+                    )}
+                </div>
             </div>
         </div>
     );
-}
+};
+
+export default BuildSection;

pages/newappeal/[appealtypes].js

@@ -80,7 +80,11 @@ const Home = (props) => {
                 <div className="govuk-width-container">
                     <Banner />
                     <Breadcrumbs slug={appealtypes} />
-                    {Sections}
+
+                    <BuildSection
+                        formXML={formXML}
+                        sectionCount={sectionCount}
+                    />
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>