Refactor breadcrumbs to use factory-based route renderers
This commit is contained in:
+106
-160
@@ -17,6 +17,12 @@ import {
|
||||
buildBreadcrumbRendererMaps,
|
||||
resolveMappedRouteRenderer as resolveMappedRouteRendererByMaps
|
||||
} from "../lib/routing/breadcrumbRouteMaps";
|
||||
import {
|
||||
createSimpleRouteRenderers,
|
||||
createSimpleLinkTextPairRenderers,
|
||||
createSimpleMyPortalRouteRenderers
|
||||
} from "../lib/routing/breadcrumbRendererFactories";
|
||||
|
||||
const Breadcrumbs = (props) => {
|
||||
const {
|
||||
currentView,
|
||||
@@ -98,133 +104,27 @@ const Breadcrumbs = (props) => {
|
||||
|
||||
const getStaticTextCrumbLabel = (path) => {
|
||||
const staticTextCrumbByPath = {
|
||||
"/account/register": t("account:register-new-account-heading"),
|
||||
"/dns": t("dnsCommon:service-name"),
|
||||
"/dnsapplications": t("dnsCommon:service-name"),
|
||||
"/dns/application-process": "Guidance",
|
||||
"/dns/help": "Help",
|
||||
"/dns/contact-us": t("common:footer-contact-us-link-label"),
|
||||
"/dns/applications": t("dnsApplications:page-title"),
|
||||
"/help/cookies": t("cookies:cookie-breadcrumb"),
|
||||
"/privacy": t("common:footer-privacy-link-label"),
|
||||
"/accessibility": t("common:footer-accessibility-link-label"),
|
||||
"/details-about-cookies": t("cookies:cookie-policy-title-heading"),
|
||||
"/auth/signin": t("auth:auth-page-title"),
|
||||
"/auth/verify-request": t("auth:auth-check-email-page-title"),
|
||||
"/auth/error": t("auth:auth-error-signin-error-title")
|
||||
"/account/register": () =>
|
||||
t("account:register-new-account-heading"),
|
||||
"/dns": () => t("dnsCommon:service-name"),
|
||||
"/dnsapplications": () => t("dnsCommon:service-name"),
|
||||
"/dns/application-process": () => "Guidance",
|
||||
"/dns/help": () => "Help",
|
||||
"/dns/contact-us": () => t("common:footer-contact-us-link-label"),
|
||||
"/dns/applications": () => t("dnsApplications:page-title"),
|
||||
"/help/cookies": () => t("cookies:cookie-breadcrumb"),
|
||||
"/privacy": () => t("common:footer-privacy-link-label"),
|
||||
"/accessibility": () => t("common:footer-accessibility-link-label"),
|
||||
"/details-about-cookies": () =>
|
||||
t("cookies:cookie-policy-title-heading"),
|
||||
"/auth/signin": () => t("auth:auth-page-title"),
|
||||
"/auth/verify-request": () => t("auth:auth-check-email-page-title"),
|
||||
"/auth/error": () => t("auth:auth-error-signin-error-title")
|
||||
};
|
||||
|
||||
return staticTextCrumbByPath[path] || null;
|
||||
};
|
||||
|
||||
const simpleRouteRenderersByPath = {
|
||||
"/myportal": () => renderTextCrumb(t("myportal:page-title")),
|
||||
"/searchresults": () =>
|
||||
renderTextCrumb(t("common:breadcrumb-search-results")),
|
||||
"/advancedsearch": () =>
|
||||
renderTextCrumb(t("common:breadcrumb-advanced-search")),
|
||||
"/addresssearch": () =>
|
||||
renderTextCrumb(t("common:breadcrumb-address-search")),
|
||||
"/contactus": () =>
|
||||
renderTextCrumb(t("common:footer-contact-us-link-label")),
|
||||
"/viewall": () =>
|
||||
renderMyPortalSectionCrumbs(t("common:breadcrumb-your-cases")),
|
||||
"/myportal/dnsapplications": () =>
|
||||
renderMyPortalSectionCrumbs(t("dnsCommon:service-name"))
|
||||
};
|
||||
|
||||
const simpleLinkTextPairRenderersByPath = {
|
||||
"/addresssearchresults": () => (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/chwiliadcyfeiriadau"
|
||||
: "/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderTextCrumb(t("common:breadcrumb-address-search-results"))}
|
||||
</>
|
||||
),
|
||||
"/advancedsearchresults": () => (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/advancedsearch"
|
||||
: "/advancedsearch",
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-advanced-search-results")
|
||||
)}
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
const simpleMyPortalRouteRenderersByPath = {
|
||||
"/myportal/searchresults": () => (
|
||||
<>
|
||||
{renderAnchorCrumb(
|
||||
myPortalHref,
|
||||
t("common:breadcrumb-my-portal")
|
||||
)}
|
||||
{renderTextCrumb(t("common:breadcrumb-search-results"))}
|
||||
</>
|
||||
),
|
||||
"/myportal/addresssearch": () =>
|
||||
renderMyPortalSectionCrumbs(t("common:breadcrumb-address-search")),
|
||||
"/myportal/advancedsearch": () =>
|
||||
renderMyPortalSectionCrumbs(t("common:breadcrumb-advanced-search")),
|
||||
"/myportal/contactus": () =>
|
||||
renderMyPortalSectionCrumbs(
|
||||
t("common:footer-contact-us-link-label")
|
||||
),
|
||||
"/myportal/viewall": () =>
|
||||
renderMyPortalSectionCrumbs(
|
||||
getViewAllLabel(currentViewState.viewKey || router.query.key)
|
||||
),
|
||||
"/myportal/advancedsearchresults": () => (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/myportal/advancedsearch"
|
||||
: "/myportal/advancedsearch",
|
||||
t("common:breadcrumb-advanced-search")
|
||||
)}
|
||||
{renderTextCrumb(
|
||||
t("common:breadcrumb-advanced-search-results")
|
||||
)}
|
||||
</>
|
||||
),
|
||||
"/myportal/addresssearchresults": () => (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" + router.locale + "/fymhorth/chwiliadcyfeiriadau"
|
||||
: "/myportal/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderTextCrumb(t("common:breadcrumb-address-search-results"))}
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
const mappedRouteRendererMaps = buildBreadcrumbRendererMaps({
|
||||
simpleRouteRenderersByPath,
|
||||
simpleLinkTextPairRenderersByPath,
|
||||
simpleMyPortalRouteRenderersByPath
|
||||
});
|
||||
|
||||
const resolveMappedRouteRenderer = (path) => {
|
||||
return resolveMappedRouteRendererByMaps(path, mappedRouteRendererMaps);
|
||||
};
|
||||
|
||||
const renderMappedRoute = (path, resolver = resolveMappedRouteRenderer) => {
|
||||
const routeRenderer = resolver(path);
|
||||
return routeRenderer ? routeRenderer() : null;
|
||||
};
|
||||
|
||||
const renderMyPortalCrumb = () => (
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link href={myPortalHref} className="govuk-breadcrumbs__link">
|
||||
@@ -288,7 +188,7 @@ const Breadcrumbs = (props) => {
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/dnsapplications"
|
||||
? `${router.locale}/dnsapplications`
|
||||
: "/dnsapplications",
|
||||
t("dnsCommon:service-name")
|
||||
)}
|
||||
@@ -296,6 +196,52 @@ const Breadcrumbs = (props) => {
|
||||
</>
|
||||
);
|
||||
|
||||
const simpleRouteRenderersByPath = createSimpleRouteRenderers({
|
||||
t,
|
||||
renderTextCrumb,
|
||||
renderMyPortalSectionCrumbs
|
||||
});
|
||||
|
||||
const simpleLinkTextPairRenderersByPath = createSimpleLinkTextPairRenderers(
|
||||
{
|
||||
t,
|
||||
router,
|
||||
isWelsh,
|
||||
renderLinkCrumb,
|
||||
renderTextCrumb
|
||||
}
|
||||
);
|
||||
|
||||
const simpleMyPortalRouteRenderersByPath =
|
||||
createSimpleMyPortalRouteRenderers({
|
||||
t,
|
||||
router,
|
||||
isWelsh,
|
||||
myPortalHref,
|
||||
currentViewState,
|
||||
getViewAllLabel,
|
||||
renderAnchorCrumb,
|
||||
renderLinkCrumb,
|
||||
renderTextCrumb,
|
||||
renderMyPortalCrumb,
|
||||
renderMyPortalSectionCrumbs
|
||||
});
|
||||
|
||||
const mappedRouteRendererMaps = buildBreadcrumbRendererMaps({
|
||||
simpleRouteRenderersByPath,
|
||||
simpleLinkTextPairRenderersByPath,
|
||||
simpleMyPortalRouteRenderersByPath
|
||||
});
|
||||
|
||||
const resolveMappedRouteRenderer = (path) => {
|
||||
return resolveMappedRouteRendererByMaps(path, mappedRouteRendererMaps);
|
||||
};
|
||||
|
||||
const renderMappedRoute = (path, resolver = resolveMappedRouteRenderer) => {
|
||||
const routeRenderer = resolver(path);
|
||||
return routeRenderer ? routeRenderer() : null;
|
||||
};
|
||||
|
||||
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
||||
resolveCaseBreadcrumbState({
|
||||
query: router.query,
|
||||
@@ -305,6 +251,9 @@ const Breadcrumbs = (props) => {
|
||||
addressLabel: t("common:breadcrumb-address-search-results"),
|
||||
defaultLabel: t("common:breadcrumb-search-results")
|
||||
});
|
||||
|
||||
const staticTextCrumbLabel = getStaticTextCrumbLabel(pathname);
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
@@ -321,7 +270,9 @@ const Breadcrumbs = (props) => {
|
||||
)}
|
||||
|
||||
{renderMappedRoute(pathname)}
|
||||
|
||||
{isPath("/newappeal") && <></>}
|
||||
|
||||
{isPath("/newappeal/[appealtypes]") && (
|
||||
<>
|
||||
{appealType.currentSection > 1 &&
|
||||
@@ -342,6 +293,7 @@ const Breadcrumbs = (props) => {
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/[appealtypes]") && (
|
||||
<>
|
||||
{appealType.currentSection > 1 &&
|
||||
@@ -359,6 +311,7 @@ const Breadcrumbs = (props) => {
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/newappeal/selectappeal") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
@@ -374,17 +327,19 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/case") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" + router.locale + "/fymhorth"
|
||||
? `/${router.locale}/fymhorth`
|
||||
: "/myportal",
|
||||
t("common:breadcrumb-my-portal")
|
||||
)}
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/case/[ticketnumber]") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
@@ -394,24 +349,19 @@ const Breadcrumbs = (props) => {
|
||||
{renderCaseReferenceCrumb(fallbackSearchTitle)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/case/id/[incident]") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/chwiliadcyfeiriadau"
|
||||
? `/${router.locale}/chwiliadcyfeiriadau`
|
||||
: "/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/canlyniadaucyfeiriadau?" +
|
||||
nestedSearchString
|
||||
: "/addresssearchresults?" +
|
||||
nestedSearchString,
|
||||
? `/${router.locale}/canlyniadaucyfeiriadau?${nestedSearchString}`
|
||||
: `/addresssearchresults?${nestedSearchString}`,
|
||||
t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
)
|
||||
@@ -419,37 +369,31 @@ const Breadcrumbs = (props) => {
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/case/id/[incident]") && (
|
||||
<>
|
||||
{" "}
|
||||
{renderMyPortalCrumb()}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/fymhorth/chwiliadcyfeiriadau"
|
||||
? `/${router.locale}/fymhorth/chwiliadcyfeiriadau`
|
||||
: "/myportal/addresssearch",
|
||||
t("common:breadcrumb-address-search")
|
||||
)}
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? "/" +
|
||||
router.locale +
|
||||
"/fymhorth/canlyniadaucyfeiriadau?" +
|
||||
nestedSearchString
|
||||
: "/myportal/addresssearchresults?" +
|
||||
nestedSearchString,
|
||||
? `/${router.locale}/fymhorth/canlyniadaucyfeiriadau?${nestedSearchString}`
|
||||
: `/myportal/addresssearchresults?${nestedSearchString}`,
|
||||
t(
|
||||
"common:breadcrumb-address-search-results"
|
||||
),
|
||||
() => {
|
||||
// spinnerState();
|
||||
router.back();
|
||||
}
|
||||
)}
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/case/[ticketnumber]") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
@@ -460,6 +404,7 @@ const Breadcrumbs = (props) => {
|
||||
{renderCaseReferenceCrumb(caseReferenceDisplay)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/dnsdetails") && (
|
||||
<>
|
||||
{renderMyPortalCrumb()}
|
||||
@@ -470,11 +415,12 @@ const Breadcrumbs = (props) => {
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/dns/[developmentName]") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/fymhorth"
|
||||
? `${router.locale}/fymhorth`
|
||||
: "/myportal",
|
||||
t("common:breadcrumb-my-portal")
|
||||
)}
|
||||
@@ -485,28 +431,22 @@ const Breadcrumbs = (props) => {
|
||||
{renderCaseReferenceCrumb(caseReferenceDisplay)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/case") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale +
|
||||
"/searchresults?q=" +
|
||||
router.query.q +
|
||||
"&page=" +
|
||||
router.query.page
|
||||
: "/searchresults?q=" +
|
||||
router.query.q +
|
||||
"&page=" +
|
||||
router.query.page,
|
||||
? `${router.locale}/searchresults?q=${router.query.q}&page=${router.query.page}`
|
||||
: `/searchresults?q=${router.query.q}&page=${router.query.page}`,
|
||||
t("common:breadcrumb-search-results"),
|
||||
() => {
|
||||
// spinnerState();
|
||||
router.back();
|
||||
}
|
||||
)}
|
||||
{renderCaseReferenceCrumb(currentReference)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/myportal/representation") && (
|
||||
<>
|
||||
{currentView.representationSubmit === true &&
|
||||
@@ -515,6 +455,7 @@ const Breadcrumbs = (props) => {
|
||||
renderBackCrumb(() => {
|
||||
setRepresentationSubmit(qcount);
|
||||
})}
|
||||
|
||||
{currentView.representationSubmit !== true &&
|
||||
hasRepDetails &&
|
||||
repDetails?.representationType !==
|
||||
@@ -522,6 +463,7 @@ const Breadcrumbs = (props) => {
|
||||
renderBackCrumb(() => {
|
||||
setRepresentationSubmit(false);
|
||||
})}
|
||||
|
||||
{currentView.representationSubmit !== true &&
|
||||
hasRepDetails &&
|
||||
repDetails?.representationType ===
|
||||
@@ -535,6 +477,7 @@ const Breadcrumbs = (props) => {
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/account/personaldetails") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
@@ -546,6 +489,7 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/account/changepassword") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
@@ -557,15 +501,18 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isPath("/dnsdetails") &&
|
||||
renderDnsCaseReferenceCrumbs(currentReference)}
|
||||
|
||||
{isPath("/dns/[developmentName]") &&
|
||||
renderDnsCaseReferenceCrumbs(caseReferenceDisplay)}
|
||||
|
||||
{isPath("/dns/application-view") && (
|
||||
<>
|
||||
{renderLinkCrumb(
|
||||
isWelsh
|
||||
? router.locale + "/dns/applications"
|
||||
? `${router.locale}/dns/applications`
|
||||
: "/dns/applications",
|
||||
t("dnsApplicationView:page-parent-title")
|
||||
)}
|
||||
@@ -574,8 +521,9 @@ const Breadcrumbs = (props) => {
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{getStaticTextCrumbLabel(pathname) &&
|
||||
renderTextCrumb(getStaticTextCrumbLabel(pathname))}
|
||||
|
||||
{staticTextCrumbLabel &&
|
||||
renderTextCrumb(staticTextCrumbLabel)}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -595,13 +543,11 @@ const mapDispatchToProps = (dispatch) => {
|
||||
updateField: (form, field, newValue) =>
|
||||
dispatch(change(form, field, newValue)),
|
||||
setRepresentationCapacity: (representationCapacity) => {
|
||||
//dispatch(reset("representationForm"));
|
||||
dispatch(setRepresentationCapacity(representationCapacity));
|
||||
},
|
||||
setRepresentationSubmit: (representationSubmit) => {
|
||||
dispatch(setRepresentationSubmit(representationSubmit));
|
||||
},
|
||||
|
||||
setCurrentView: (currentView) => {
|
||||
dispatch(setCurrentView(currentView));
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user