Fiksa breadcrumbs

Author: anostoga

client/src/App.tsx

@@ -15,15 +15,10 @@ import {Virksomheter} from './virksomhet/Virksomheter'
 import {Helmet} from "react-helmet";
 import {GodtaBruksvilkår} from "./avtale/GodtaBruksvilkår";
 import {BruksvilkårKvittering} from "./avtale/BruksvilkårKvittering";
+import Breadcrumbs from "./components/Breadcrumbs";
 
 export function App() {
     const {t} = useTranslation()
-    useEffect(() => {
-        setBreadcrumbs([
-            {url: 'https://www.nav.no/barnebriller', title: t('brødsmuler.1')},
-            {url: baseUrl('/'), title: t('brødsmuler.2')},
-        ])
-    }, [])
 
     return (
         <ErrorBoundary
@@ -35,6 +30,7 @@ export function App() {
                 }
             }}
         >
+            <Breadcrumbs/>
             <header>
                 <Banner>
                     <Heading level="1" size="large">
@@ -57,6 +53,7 @@ export function App() {
                 <Route path="*"
                        element={<SettTittel title="helmet.title.feilside"><Feilside status={404}/></SettTittel>}/>
             </Routes>
+            <Breadcrumbs/>
         </ErrorBoundary>
     )
 }

client/src/components/Breadcrumbs.tsx

@@ -0,0 +1,47 @@
+import {useEffect} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import {baseUrl} from '../http'
+import {useTranslation} from 'react-i18next'
+import {setBreadcrumbs, onBreadcrumbClick} from '@navikt/nav-dekoratoren-moduler'
+
+const Breadcrumbs = () => {
+    const {t} = useTranslation()
+    const location = useLocation()
+    useEffect(() => {
+        const {pathname} = location
+        let subBreadcrumbs = []
+        if (pathname.indexOf('/oppdater-avtale/') === 0) {
+            subBreadcrumbs.push({url: '/oppdater-avtale/', title: t('brødsmuler.oppdater.avtale'), handleInApp: true})
+        }
+        if (pathname.indexOf('/opprett-avtale/') === 0) {
+            subBreadcrumbs.push({url: '/opprett-avtale/', title: t('brødsmuler.opprett.avtale'), handleInApp: true})
+        }
+        if (pathname.indexOf('/godta-bruksvilkar/') === 0) {
+            subBreadcrumbs.push({url: '/godta-bruksvilkar/', title: t('brødsmuler.bruksvilkar'), handleInApp: true})
+        }
+        if (pathname.indexOf('/godta-bruksvilkarkvittering') === 0) {
+            subBreadcrumbs.push({
+                url: '/godta-bruksvilkarkvittering',
+                title: t('brødsmuler.bruksvilkar.kvittering'),
+                handleInApp: true,
+            })
+        }
+
+
+        setBreadcrumbs([
+            {url: 'https://www.nav.no/barnebriller', title: t('brødsmuler.optikers_rolle')},
+            {url: '/', title: t('brødsmuler.forside'), handleInApp: true},
+            ...subBreadcrumbs,
+        ])
+    }, [location])
+
+    // For breadcrumbs that have "handleInApp=true" specified we have to ourselves specify how to navigate inside our app.
+    const navigate = useNavigate()
+    onBreadcrumbClick((bc) => {
+        navigate(bc.url)
+    })
+
+    return null
+}
+
+export default Breadcrumbs

client/src/resources/nb_translation.json

@@ -6,6 +6,12 @@
   "bilag2_bekreftelse": "'Bilag 2: Teknisk grensesnitt og særskilte krav til sikkerhet'.",
   "bilag3_bekreftelse": "'Bilag 3: Varsling, feilretting og kontakt'.",
   "bilag4_bekreftelse": "'Bilag 4: Endringslogg for avtalen'.",
+  "brødsmuler.optikers_rolle": "Briller til barn – optikers rolle",
+  "brødsmuler.bruksvilkar": "Bruksvilkår",
+  "brødsmuler.forside": "Avtaler om direkte oppgjør av briller for barn",
+  "brødsmuler.oppdater.avtale": "Oppdater avtale",
+  "brødsmuler.opprett.avtale": "Opprett avtale",
+  "brødsmuler.bruksvilkar.kvittering": "Kvittering",
   "avtale.endre": "Endre avtale for {{navn}}",
   "last.ned": "Last ned",
   "avtale.endre_orgnr": "Orgnr. {{orgnr}}",

client/src/resources/nn_translation.json

@@ -27,8 +27,12 @@
   "avtale.utvidet_avtale_tittel": "Bruksvilkår for å sende brillekrav via eige system",
   "avtale.se_bruksvilkar": "Sjå bruksvilkår",
   "banner": "Avtalar om direkte oppgjer av briller for barn",
-  "brødsmuler.1": "Avtale om direkte oppgjer av briller for barn",
-  "brødsmuler.2": "Briller til barn – optikers rolle",
+  "brødsmuler.optikers_rolle": "Briller til born – optikars rolle",
+  "brødsmuler.bruksvilkar": "Bruksvilkår",
+  "brødsmuler.forside": "Avtalar om direkte oppgjer av briller for barn",
+  "brødsmuler.oppdater.avtale": "Oppdater avtale",
+  "brødsmuler.opprett.avtale": "Opprett avtale",
+  "brødsmuler.bruksvilkar.kvittering": "Kvittering",
   "feilside.feilkode": "Feilkode {{status}}",
   "feilside.gå_til_forsiden": "Gå til framsida",
   "feilside.gå_til_innloggingssiden": "Gå til innloggingssida",