initial dynamic forms

2021-07-08 16:22:12 +01:00
parent b335c11e6b
commit 878940a6d5
25 changed files with 709 additions and 60 deletions
@@ -0,0 +1,127 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+
+import { setAppealType, gtAppealTypeObj } from "../../store/appealType/action";
+import { getAppealsTypes } from "../../actions";
+import xpath from "xpath";
+
+const Home = (props) => {
+    const { footerLinks, pages, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const { appealType } = props;
+
+    const optionsObj = props.appealType.appealType.GlobalOptionSet.Options;
+
+    const appealOptions = Object.keys(optionsObj).map((key, index) => (
+        <option
+            value={optionsObj[key].Label.LocalizedLabels[0].Label.replace(
+                /[\s\-\+\(\)\,]/g,
+                ""
+            ).toLowerCase()}
+        >
+            {optionsObj[key].Label.LocalizedLabels[0].Label}
+        </option>
+    ));
+
+    const [appealTypeSelect, setAppealTypeSelect] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const selectAppealType = (event) => {
+        event.preventDefault();
+        console.log(appealTypeSelect);
+        // /searchresults
+
+        router.push({
+            pathname: "/newappeal/" + appealTypeSelect,
+        });
+    };
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-width-container">
+                            <Banner />
+                            <Breadcrumbs slug={appealtypes} />
+
+                            <h1>New Appeal</h1>
+
+                            <form onSubmit={selectAppealType}>
+                                <div class="govuk-form-group">
+                                    <label class="govuk-label" for="sort">
+                                        Select an appeal Type
+                                    </label>
+                                    <select
+                                        class="govuk-select"
+                                        id="appealTypes"
+                                        name="appealTypes"
+                                        onChange={handleParam(
+                                            setAppealTypeSelect
+                                        )}
+                                    >
+                                        {appealOptions}
+                                    </select>
+                                </div>
+                                <button
+                                    class="govuk-button"
+                                    data-module="govuk-button"
+                                >
+                                    Continue
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            const appealTypeData = (await getAppealsTypes()) || null;
+            console.log("appeal types", appealTypeData);
+            store.dispatch(setAppealType(appealTypeData));
+        }
+);
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+    };
+};
+
+export default connect(mapStateToProps)(Home);