pedwfrontend/components/newappeal/buildsection.js

import Link from "next/link";
import _, { has } from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState, useEffect } from "react";
import xpath from "xpath";
import BuildRow from "./buildrow";
import { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import {
    setCaseReference,
    setCurrentSection,
    setDocumentsList,
} from "../../store/appealType/action";

import { FieldsTranslations } from "../elements";

import { query } from "jsonpath";

let BuildSection = (props) => {
    // useEffect(() => {
    //     window.scrollTo(0, 0);
    // });

    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    const {
        formXML,
        sectionCount,
        onSubmit,
        handleSubmit,
        formTitle,
        setCurrentSection,
        refno,
        gotoSection,
        mandatoryFieldsData,
    } = props;

    const documentListObj = props.appealType.documentList;
    const currentSection = props.appealType.currentSection;
    const parser = new DOMParser();
    var doc = parser.parseFromString(props.formXML, "text/xml");
    var titles = xpath.select(
        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
        doc
    );
    var rowXML = xpath.select(
        "/form/tabs/tab[" +
            currentSection +
            "]/columns//sections/section/rows/row",
        //"/form/tabs/tab/columns//sections/section/rows/row",
        doc
    );

    var titleList = xpath.select(
        "//form/tabs/tab[*]/labels/label/@description",
        doc
    );

    const handleParam = (setValue) => (e) => setValue(e.target.value);

    const onHandleSubmit = (values) => {
        setCurrentSection(currentSection + 1);
    };

    const [hasErrors, setHasErrors] = useState("");

    const getErrors = () => {
        let errorsobj = props.props.form["appealForm"];
        //setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
        window.scrollTo(0, 0);
    };

    let errorsobj = {};
    const ShowErrorHeader = (props) => {
        errorsobj = props.props.appealForm.syncErrors;
        errorsobj = _.keys(errorsobj);

        const getErrorLabel = (whichField) => {
            var doc = parser.parseFromString(props.formXML, "text/xml");
            var errorFieldLabel = xpath.select(
                "//*[control/@id='" + whichField + "']//@description",
                doc
            );

            return errorFieldLabel[0].value;
        };

        const ShowErrors = () => {
            let errorList = [];
            for (let i = 0; i < errorsobj.length; ++i) {
                //get label from error key - search rowxml for id = errorobj

                errorList.push(
                    <li key={i}>
                        <a href={"#" + errorsobj[i] + "_label"}>
                            {" "}
                            {getErrorLabel(errorsobj[i])}
                        </a>
                    </li>
                );
            }

            return errorList;
        };

        return !_.isEmpty(errorsobj) ? (
            <div
                className="govuk-error-summary"
                aria-labelledby="error-summary-title"
                role="alert"
                tabIndex="-1"
                data-module="govuk-error-summary"
            >
                <h2
                    className="govuk-error-summary__title"
                    id="error-summary-title"
                >
                    The following fields have a problem :
                </h2>
                <div className="govuk-error-summary__body">
                    <ul className="govuk-list govuk-error-summary__list">
                        <ShowErrors />
                    </ul>
                </div>
            </div>
        ) : (
            ""
        );
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
                <h1 className="govuk-heading-m  govuk-!-margin-top-5">
                    {titles[0].value}
                </h1>
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    {hasErrors == true ? (
                        <ShowErrorHeader
                            hasErrors={hasErrors}
                            props={props.props.form}
                            formXML={formXML}
                        />
                    ) : (
                        ""
                    )}
                    <BuildRow
                        rowXML={rowXML}
                        whichSection={props.whichSection}
                        sectionCount={props.sectionCount}
                        onSubmit={onSubmit}
                        mandatoryFieldsData={mandatoryFieldsData}
                        props={props}
                    />

                    <div className="govuk-button-group">
                        {props.sectionCount != currentSection ? (
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                                onClick={() => getErrors()}
                            >
                                Continue
                            </button>
                        ) : (
                            ""
                        )}
                        {props.sectionCount == currentSection ? (
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                Submit
                            </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
                    role="navigation"
                    aria-labelledby="progress-list"
                    className="at-nav"
                >
                    <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
                        {t("newappeal:new-appeal-progress-nav-label")}:
                    </h3>
                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />

                    <ol className="govuk-list">
                        <ul className="govuk-list ">
                            <li className="at-nav__page">
                                <ol className="govuk-list">
                                    {Object.keys(titleList).map((key) =>
                                        parseInt(key) + 1 == currentSection ? (
                                            <li key={key}>
                                                <b>
                                                    {FieldsTranslations(
                                                        titleList[key].value
                                                    )}{" "}
                                                </b>
                                            </li>
                                        ) : (
                                            <li key={key}>
                                                {props.appealType
                                                    .formComplete == "true" ||
                                                parseInt(key) + 1 <
                                                    currentSection ? (
                                                    <a
                                                        className="govuk-link"
                                                        href="#"
                                                        onClick={() => {
                                                            gotoSection(
                                                                parseInt(key) +
                                                                    1
                                                            );
                                                        }}
                                                    >
                                                        {FieldsTranslations(
                                                            titleList[key].value
                                                        )}
                                                    </a>
                                                ) : (
                                                    FieldsTranslations(
                                                        titleList[key].value
                                                    )
                                                )}
                                            </li>
                                        )
                                    )}
                                </ol>
                            </li>
                        </ul>
                    </ol>
                </nav>

                {Object.keys(documentListObj).length > 0 && (
                    <div>
                        <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
                            {t("newappeal:new-appeal-documentlist-nav")}:
                        </h3>
                        <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
                        <ol className="govuk-list document-list">
                            <ul className="govuk-list ">
                                <li className="at-nav__page">
                                    <ol className="govuk-list govuk-list--bullet">
                                        {Object.entries(documentListObj).map(
                                            ([key, value]) => {
                                                return <li>{value}</li>;
                                            }
                                        )}
                                    </ol>
                                </li>
                            </ul>
                        </ol>
                    </div>
                )}
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
        gotoSection: (thisSection) => {
            dispatch(setCurrentSection(thisSection));
        },
        setDocumentsList: (documentList) => {
            dispatch(setDocumentsList(documentList));
        },
    };
};

const selector = formValueSelector("appealForm"); // <-- same as form name

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "appealForm",
        destroyOnUnmount: false,
    })(BuildSection)
);