robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

22541 extract shared text and link breadcrumb render helpers

Browse Source
This commit is contained in:
robbond
2026-04-09 09:38:14 +01:00
parent d75675f059
commit d576987fcf
2 changed files with 144 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+116 -148
View File
@@ -106,6 +106,22 @@ const Breadcrumbs = (props) => {
</li> </li>
); );
const renderTextCrumb = (label) => (
<li className="govuk-breadcrumbs__list-item">{label}</li>
);
const renderLinkCrumb = (href, label, onClick) => (
<li className="govuk-breadcrumbs__list-item">
<Link
href={href}
onClick={onClick}
className="govuk-breadcrumbs__link"
>
{label}
</Link>
</li>
);
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } = const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
resolveCaseBreadcrumbState({ resolveCaseBreadcrumbState({
query: router.query, query: router.query,
@@ -157,147 +173,121 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/searchresults") && ( {isPath("/searchresults") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-search-results")} t("common:breadcrumb-search-results")
</li> )}
</> </>
)} )}
{isPath("/advancedsearch") && ( {isPath("/advancedsearch") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-advanced-search")} t("common:breadcrumb-advanced-search")
</li> )}
</> </>
)} )}
{isPath("/addresssearch") && ( {isPath("/addresssearch") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-address-search")} t("common:breadcrumb-address-search")
</li> )}
</> </>
)} )}
{isPath("/myportal/addresssearch") && ( {isPath("/myportal/addresssearch") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-address-search")} t("common:breadcrumb-address-search")
</li> )}
</> </>
)} )}
{isPath("/myportal/advancedsearch") && ( {isPath("/myportal/advancedsearch") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-advanced-search")} t("common:breadcrumb-advanced-search")
</li> )}
</> </>
)} )}
{isPath("/myportal/contactus") && ( {isPath("/myportal/contactus") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:footer-contact-us-link-label")} t("common:footer-contact-us-link-label")
</li> )}
</> </>
)} )}
{isPath("/contactus") && ( {isPath("/contactus") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:footer-contact-us-link-label")} t("common:footer-contact-us-link-label")
</li> )}
</> </>
)} )}
{isPath("/addresssearchresults") && ( {isPath("/addresssearchresults") && (
<> <>
{" "} {" "}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/chwiliadcyfeiriadau"
isWelsh : "/addresssearch",
? router.locale + t("common:breadcrumb-address-search")
"/chwiliadcyfeiriadau" )}
: "/addresssearch" {renderTextCrumb(
} t(
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-address-search")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{t(
"common:breadcrumb-address-search-results" "common:breadcrumb-address-search-results"
)} )
</li> )}
</> </>
)} )}
{isPath("/advancedsearchresults") && ( {isPath("/advancedsearchresults") && (
<> <>
{" "} {" "}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/advancedsearch"
isWelsh : "/advancedsearch",
? router.locale + t("common:breadcrumb-advanced-search")
"/advancedsearch" )}
: "/advancedsearch" {renderTextCrumb(
} t(
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-advanced-search")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{t(
"common:breadcrumb-advanced-search-results" "common:breadcrumb-advanced-search-results"
)} )
</li> )}
</> </>
)} )}
{isPath("/myportal/advancedsearchresults") && ( {isPath("/myportal/advancedsearchresults") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale +
isWelsh "/myportal/advancedsearch"
? router.locale + : "/myportal/advancedsearch",
"/myportal/advancedsearch" t("common:breadcrumb-advanced-search")
: "/myportal/advancedsearch" )}
} {renderTextCrumb(
className="govuk-breadcrumbs__link" t(
>
{t("common:breadcrumb-advanced-search")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{t(
"common:breadcrumb-advanced-search-results" "common:breadcrumb-advanced-search-results"
)} )
</li> )}
</> </>
)} )}
{isPath("/myportal/addresssearchresults") && ( {isPath("/myportal/addresssearchresults") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? "/" +
isWelsh router.locale +
? "/" + "/fymhorth/chwiliadcyfeiriadau"
router.locale + : "/myportal/addresssearch",
"/fymhorth/chwiliadcyfeiriadau" t("common:breadcrumb-address-search")
: "/myportal/addresssearch" )}
} {renderTextCrumb(
className="govuk-breadcrumbs__link" t(
>
{t("common:breadcrumb-address-search")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
{t(
"common:breadcrumb-address-search-results" "common:breadcrumb-address-search-results"
)} )
</li> )}
</> </>
)} )}
{isPath("/newappeal") && <></>} {isPath("/newappeal") && <></>}
@@ -393,9 +383,9 @@ const Breadcrumbs = (props) => {
{isPath("/viewall") && ( {isPath("/viewall") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(
{t("common:breadcrumb-your-cases")} t("common:breadcrumb-your-cases")
</li> )}
</> </>
)} )}
{isPath("/myportal/viewall") && ( {isPath("/myportal/viewall") && (
@@ -482,42 +472,30 @@ const Breadcrumbs = (props) => {
<> <>
{" "} {" "}
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? "/" +
isWelsh router.locale +
? "/" + "/fymhorth/chwiliadcyfeiriadau"
router.locale + : "/myportal/addresssearch",
"/fymhorth/chwiliadcyfeiriadau" t("common:breadcrumb-address-search")
: "/myportal/addresssearch" )}
} {renderLinkCrumb(
className="govuk-breadcrumbs__link" isWelsh
> ? "/" +
{t("common:breadcrumb-address-search")} router.locale +
</Link> "/fymhorth/canlyniadaucyfeiriadau?" +
</li> nestedSearchString
<li className="govuk-breadcrumbs__list-item"> : "/myportal/addresssearchresults?" +
<Link nestedSearchString,
href={ t(
isWelsh "common:breadcrumb-address-search-results"
? "/" + ),
router.locale + () => {
"/fymhorth/canlyniadaucyfeiriadau?" + // spinnerState();
nestedSearchString router.back();
: "/myportal/addresssearchresults?" + }
nestedSearchString )}
}
onClick={() => {
// spinnerState();
router.back();
}}
className="govuk-breadcrumbs__link"
>
{t(
"common:breadcrumb-address-search-results"
)}
</Link>
</li>
{renderCaseReferenceCrumb(currentReference)} {renderCaseReferenceCrumb(currentReference)}
</> </>
)} )}
@@ -539,22 +517,16 @@ const Breadcrumbs = (props) => {
<> <>
{" "} {" "}
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderTextCrumb(t("dnsCommon:service-name"))}
{t("dnsCommon:service-name")}
</li>
</> </>
)} )}
{isPath("/myportal/dnsdetails") && ( {isPath("/myportal/dnsdetails") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link "/myportal/dnsapplications",
href={"/myportal/dnsapplications"} t("dnsCommon:service-name")
className="govuk-breadcrumbs__link" )}
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderCaseReferenceCrumb(currentReference)} {renderCaseReferenceCrumb(currentReference)}
</> </>
)} )}
@@ -572,14 +544,10 @@ const Breadcrumbs = (props) => {
{t("common:breadcrumb-my-portal")} {t("common:breadcrumb-my-portal")}
</Link> </Link>
</li> </li>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link "/myportal/dnsapplications",
href={"/myportal/dnsapplications"} t("dnsCommon:service-name")
className="govuk-breadcrumbs__link" )}
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderCaseReferenceCrumb(caseReferenceDisplay)} {renderCaseReferenceCrumb(caseReferenceDisplay)}
</> </>
)} )}
memory-bank/change-log.md
+28
View File
@@ -162,6 +162,34 @@ Follow-ups:
- Next bounded slice can target remaining repeated linked breadcrumb list-item patterns (e.g., recurring address-search result link pairs) via small local render helpers. - Next bounded slice can target remaining repeated linked breadcrumb list-item patterns (e.g., recurring address-search result link pairs) via small local render helpers.
### CL-22541-F: breadcrumbs multi-pattern helper bundle (text + link crumbs)
date: 2026-04-09
author: Cline
scope: `components/breadcrumbs.js`
type: change
rationale: Deliver a slightly larger bounded slice by extracting and reusing multiple breadcrumb rendering patterns (plain text crumb and linked crumb) across several route branches.
impact: Refactor-only JSX deduplication and consistency improvement in breadcrumb rendering; no intended route/auth/session/API/EN-CY/a11y behavior change.
status: completed
Summary:
- Added reusable helpers in `components/breadcrumbs.js`:
- `renderTextCrumb(label)`
- `renderLinkCrumb(href, label, onClick)`
- Replaced multiple repeated inline breadcrumb blocks across search/address/myportal/dns branches with helper calls.
- Included onClick-capable link helper usage in the `/myportal/case/id/[incident]` address-results breadcrumb branch to preserve `router.back()` behavior.
- Combined with existing `renderMyPortalCrumb` and `renderCaseReferenceCrumb` helpers for more consistent branch composition.
Validation:
- `npx eslint components/breadcrumbs.js` -> pass.
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
Follow-ups:
- Next slice recommendation: extract remaining repeated inline link crumbs for case/DNS branches that still hardcode `<li><Link ...>` (e.g., `/myportal/case`, `/myportal/case/[ticketnumber]`, `/dnsdetails`, `/dns/[developmentName]`) to complete link-pattern consolidation.
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction ### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
date: 2026-04-07 date: 2026-04-07