pedwfrontend/components/breadcrumbs.js

import Link from "next/link";
import jsonpath from "jsonpath";
import _ from "lodash";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

const Breadcrumbs = (props) => {
    const { courseContent, slug, currentView } = props;
    const router = useRouter();
    const { appealType, section } = router.query;

    let { t } = useTranslation();

    function Breadcrumb() {
        if (slug) {
            var coursePageURL = appealType + "/" + slug;
            if (_.isEmpty(courseContent)) {
                return null;
            } else {
                var sectionObj = jsonpath.query(
                    courseContent,
                    '$..sections[?(@.path=="/' + coursePageURL + '")]'
                );
                var breadcrumb = sectionObj[0].chapter.title; //sectionObj[0].chapter
                return (
                    <li
                        className="govuk-breadcrumbs__list-item"
                        aria-current="page"
                    >
                        {breadcrumb}
                    </li>
                );
            }
        } else {
            return null;
        }
    }

    return (
        <nav
            aria-label={"Breadcrumb for " + _.startCase(_.toLower(appealType))}
            role="navigation"
            data-module="track-click"
        >
            <div className="govuk-breadcrumbs ">
                <ol className="govuk-breadcrumbs__list">
                    <li className="govuk-breadcrumbs__list-item">
                        <Link href="http://www.gov.wales">
                            <a className="govuk-breadcrumbs__link">GOV.WALES</a>
                        </Link>
                    </li>
                    <li className="govuk-breadcrumbs__list-item">
                        <Link
                            href={
                                router.pathname.includes("dns") ? "/dns" : "/"
                            }
                        >
                            <a className="govuk-breadcrumbs__link">
                                {router.pathname.includes("dns")
                                    ? "Developments of National Significance"
                                    : t("common:service-name")}
                            </a>
                        </Link>
                    </li>
                    {router.pathname == "/myportal" ? (
                        <li className="govuk-breadcrumbs__list-item">
                            {t("myportal:page-title")}
                        </li>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/searchresults" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Search results
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/newappeal" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        {t("newappeal:parent-page-title")}
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                {t("newappeal:page-title")}
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/newappeal/selectappeal" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        {t("newappeal:parent-page-title")}
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        {t("newappeal:page-title")}
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Select Appeal
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/viewall" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Your cases
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/myportal/viewall" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                {currentView.viewName}
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/case" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/viewall">
                                    <a className="govuk-breadcrumbs__link">
                                        Your cases{" "}
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Case Reference:{" "}
                                {
                                    props.props.currentView.caseReference
                                        .currentReference
                                }
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/representation" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Make representation for:{" "}
                                {
                                    props.props.currentView.caseReference
                                        .currentReference
                                }
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/account/personaldetails" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Your account
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/account/register" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                Register your account
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/account/changepassword" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                Update your password
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/dns">
                                    <a className="govuk-breadcrumbs__link">
                                        Developments of National Significance
                                    </a>
                                </Link>
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns/application-process" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                Guidance
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns/help" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                Help
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns/contact-us" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                Contact us
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns/applications" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                Applications
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {router.pathname == "/dns/application-view" ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/dns/applications">
                                    <a className="govuk-breadcrumbs__link">
                                        Applications{" "}
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                TWA - Morlais Demonstration Zone
                            </li>
                        </>
                    ) : (
                        ""
                    )}
                    {!_.isEmpty(slug) ? (
                        <>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/myportal">
                                    <a className="govuk-breadcrumbs__link">
                                        My Portal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                <Link href="/newappeal">
                                    <a className="govuk-breadcrumbs__link">
                                        New Appeal
                                    </a>
                                </Link>
                            </li>
                            <li className="govuk-breadcrumbs__list-item">
                                {props.formTitle}
                            </li>
                        </>
                    ) : (
                        ""
                    )}

                    <Breadcrumb />
                </ol>
            </div>
        </nav>
    );
};
export default Breadcrumbs;