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,
        formTitle,
        activitysub,
        activity,
        applicant_id,
        course_id,
        applicant_ref,
    } = 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="/">
                            <a className="govuk-breadcrumbs__link">
                                {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 == "/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: CAS-00010-J9W6L5
                            </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;