pedwfrontend/components/myportal/searchcases.js

import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { Field, reduxForm, SubmissionError } from "redux-form";
import { sendGAEvent } from "@next/third-parties/google";

const required = (errorMsg) => (value) =>
    value || typeof value === "number" ? undefined : errorMsg;

export const minLength = (errorMsg) => (value) =>
    value && value.length < 4
        ? errorMsg //`Must be ${min} characters or more`
        : undefined;

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    hint1,
    hint2,
    hint3,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div className="govuk-form-group">
                <div id="basicSearch-hint" className="govuk-hint ">
                    <label
                        className="govuk-label "
                        htmlFor={id}
                        id={id + "_label"}
                    >
                        <p className="govuk-body-s">{hint1}</p>
                    </label>
                    <ul className="govuk-body-s govuk-!-margin-top-3">
                        <li>{hint2} </li>
                        <li>{hint3}</li>
                    </ul>
                </div>

                <div>
                    <input
                        {...input}
                        className={className}
                        name={name}
                        id={id}
                    />
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message govuk-form-group--error"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {error}
                        </span>
                    )}
                </div>
            </div>
        </>
    );
};

let CaseSearch = (props) => {
    let { t } = useTranslation();
    const { handleSubmit, pristine, reset, submitting } = props;

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

    //const [showSpinnerState, setShowSpinnerState] = useState(false);

    // let spinnerState = () => {
    //     showSpinnerState == true
    //         ? setShowSpinnerState(false)
    //         : setShowSpinnerState(true);
    // };

    const onHandleSubmit = (values) => {
        if (Object.keys(values).length === 0) {
            console.log(props.error);

            throw new SubmissionError({
                basicSearch: t("myportal:searchcases-validation-required"),
                _error: "required"
            });
        } else {
            router.push({
                pathname:
                    router.locale == "cy"
                        ? "/fymhorth/canlyniadauchwilio"
                        : "/myportal/searchresults",
                query: { q: values.basicSearch }
            });
        }
    };

    return (
        <>
            <div className="card" id="casesearch-card">
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <div className="card-body">
                        <h3 className="heading-small card-heading">
                            {t("myportal:searchcases-card-title")}
                        </h3>

                        <p className="govuk-body-s">
                            {t("myportal:searchcases-card-paragraph")}
                        </p>

                        <Field
                            validate={[
                                minLength(
                                    t(
                                        "myportal:searchcases-validation-minlength"
                                    )
                                )
                            ]}
                            className="govuk-input"
                            component={RenderTextfield}
                            id="basicSearch"
                            name="basicSearch"
                            type="text"
                            aria-describedby="basicSearch-hint"
                            hint1={t("myportal:searchcases-card-search-hint")}
                            hint2={t(
                                "myportal:searchcases-card-search-example-label-1"
                            )}
                            hint3={t(
                                "myportal:searchcases-card-search-example-label-2"
                            )}
                        />

                        <div className="govuk-form-group">
                            <button
                                type="submit"
                                className="govuk-button"
                                onClick={() => {
                                    sendGAEvent(
                                        "event",
                                        "MyPortalSearchButtonClicked",
                                        {
                                            searchTerm: basicSearch.value
                                        }
                                    );
                                }}
                            >
                                {t("myportal:searchcases-card-button")}
                            </button>
                        </div>
                        <Link
                            href={
                                router.locale == "cy"
                                    ? "/myportal/addresssearch"
                                    : "/myportal/addresssearch"
                            }
                            className="govuk-link--no-underline"
                        >
                            {t("common:breadcrumb-address-search")}
                        </Link>
                        {router.locale == "cy" ? " neu " : " or "}
                        <Link
                            href={
                                router.locale == "cy"
                                    ? "/fymhorth/chwiliouwch"
                                    : "/myportal/advancedsearch"
                            }
                        >
                            {t("myportal:searchcases-card-advanced-link")}
                        </Link>
                        <div className="govuk-form-group govuk-!-margin-top-5">
                            <Link
                                href={
                                    router.locale == "cy"
                                        ? "/fymhorth/cyswllt"
                                        : "/myportal/contactus"
                                }
                                className="govuk-button withChevron govuk-button-cta"
                            >
                                {t("common:footer-contact-us-link-label")}
                            </Link>
                        </div>
                    </div>
                </form>
            </div>
        </>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {};
};

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