Merge pull request #369 from KTH/issues/KUI-1275

feat(KUI-1275): replace client side breadcrumbs with handlebar helper

package.json

@@ -114,8 +114,7 @@
   },
   "lint-staged": {
     "**/*.{js,jsx}": [
-      "npx prettier --write",
-      "npx eslint --fix"
+      "npx prettier --write"
     ]
   },
   "engines": {

public/js/app/pages/AboutCourseMemo.jsx

@@ -20,7 +20,6 @@ import AboutAlert from '../components/AboutAlert'
 import AboutCourseContacts from '../components/AboutCourseContacts'
 import AboutHeader from '../components/AboutHeader'
 import SideMenu from '../components/SideMenu'
-import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 function removeKeysAndFlattenToArray(memosWithRoundKeys) {
   return Object.keys(memosWithRoundKeys).map(roundid => memosWithRoundKeys[roundid])
@@ -270,11 +269,6 @@ function AboutCourseMemo({ mockKursPmDataApi = false, mockMixKoppsApi = false })
 
   useEffect(() => {
     setAllRounds(allRoundsMockOrReal)
-    let isMounted = true
-    if (isMounted) {
-      renderBreadcrumbsIntoKthHeader(courseCode, userLangAbbr)
-    }
-    return () => (isMounted = false)
   }, [])
 
   return (

public/js/app/pages/AboutCourseMemos.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 
 import { Container, Row, Col } from 'reactstrap'
 
@@ -7,21 +7,12 @@ import { sideMenuBackLink } from '../util/links'
 import { useWebContext } from '../context/WebContext'
 
 import SideMenu from '../components/SideMenu'
-import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 function AboutCourseMemos() {
   const [webContext] = useWebContext()
   const translate = i18n.messages[webContext.userLanguageIndex]
   const { courseCode, language } = webContext
 
-  useEffect(() => {
-    let isMounted = true
-    if (isMounted) {
-      renderBreadcrumbsIntoKthHeader(courseCode, language)
-    }
-    return () => (isMounted = false)
-  }, [])
-
   return (
     <Container fluid>
       <Row>

public/js/app/pages/CourseMemo.jsx

@@ -21,7 +21,6 @@ import CourseMemoLinks from '../components/CourseMemoLinks'
 import CoverPage from '../components/print/CoverPage'
 import Contacts from '../components/print/Contacts'
 import AllSections from '../components/AllSections'
-import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 const determineContentFlexibility = () => {
   const lastColLastElem = document.getElementById('last-element-which-determines-styles')
@@ -110,7 +109,6 @@ function CourseMemo() {
         const stateForRedirect = redirectToAbout(courseCode, location)
         navigate(`/${courseCode}/om-kurs-pm`, { state: stateForRedirect })
       }
-      renderBreadcrumbsIntoKthHeader(courseCode, language)
       // Decide which content can have wider content (exempel tables, to make them more readable)
       determineContentFlexibility()
 

server/controllers/memoCtrl.js

@@ -12,6 +12,7 @@ const { browser, server: serverConfig } = require('../configuration')
 const { getMemoDataById, getMemoVersion, getMiniMemosPdfAndWeb } = require('../kursPmDataApi')
 const { getCourseInfo } = require('../kursInfoApi')
 const { getDetailedInformation, getCourseRoundTerms } = require('../koppsApi')
+const { createBreadcrumbs } = require('../utils/breadcrumbUtil')
 const { getServerSideFunctions } = require('../utils/serverSideRendering')
 const { createServerSideContext } = require('../ssr-context/createServerSideContext')
 const {
@@ -267,6 +268,8 @@ async function getContent(req, res, next) {
       context: webContext,
     })
 
+    const breadcrumbsList = createBreadcrumbs(responseLanguage, courseCode)
+
     res.render('memo/index', {
       aboutCourse: {
         siteName: shortDescription,
@@ -278,6 +281,7 @@ async function getContent(req, res, next) {
       html: view,
       lang: responseLanguage,
       proxyPrefix,
+      breadcrumbsList,
     })
   } catch (err) {
     log.error('Error in getContent', { error: err })
@@ -374,6 +378,8 @@ async function getOldContent(req, res, next) {
       context: webContext,
     })
 
+    const breadcrumbsList = createBreadcrumbs(responseLanguage, courseCode)
+
     res.render('memo/index', {
       aboutCourse: {
         siteName: shortDescription,
@@ -384,6 +390,7 @@ async function getOldContent(req, res, next) {
       html: view,
       instrumentationKey: serverConfig.appInsights.instrumentationKey,
       lang: responseLanguage,
+      breadcrumbsList,
     })
   } catch (err) {
     log.error('Error in getContent', { error: err })
@@ -453,6 +460,8 @@ async function getAboutContent(req, res, next) {
       context: webContext,
     })
 
+    const breadcrumbsList = createBreadcrumbs(responseLanguage, courseCode)
+
     res.render('memo/index', {
       aboutCourse: {
         siteName: shortDescription,
@@ -464,6 +473,7 @@ async function getAboutContent(req, res, next) {
       instrumentationKey: serverConfig.appInsights.instrumentationKey,
       lang: responseLanguage,
       klaroAnalyticsConsentCookie,
+      breadcrumbsList,
     })
   } catch (err) {
     log.error('Error', { error: err })
@@ -497,6 +507,8 @@ async function getNoContent(req, res, next) {
       context: webContext,
     })
 
+    const breadcrumbsList = createBreadcrumbs(responseLanguage, undefined)
+
     res.render('memo/index', {
       aboutCourse: {
         siteName: shortDescription,
@@ -506,6 +518,7 @@ async function getNoContent(req, res, next) {
       description: shortDescription,
       html: view,
       lang: responseLanguage,
+      breadcrumbsList,
     })
   } catch (err) {
     log.error('Error in getNoContent', { error: err })

server/utils/breadcrumbUtil.js

@@ -0,0 +1,37 @@
+// Logic is based on old Breadcrumb component in kth-reactstrap: https://github.com/KTH/kth-reactstrap/blob/master/src/components/utbildningsinfo/Breadcrumbs.js
+// Be aware that this entire file is replicated in multiple apps, so changes here should probably be synced to the other apps.
+// See https://confluence.sys.kth.se/confluence/x/6wYJDQ for more information.
+const baseItems = {
+  university: {
+    en: { url: '/en', label: 'KTH' },
+    sv: { url: '/', label: 'KTH' },
+  },
+  student: {
+    en: { url: '/en/student', label: 'Student at KTH' },
+    sv: { url: '/student', label: 'Student på KTH' },
+  },
+  directory: {
+    en: { url: '/student/kurser/kurser-inom-program?l=en', label: 'Course and programme directory' },
+    sv: { url: '/student/kurser/kurser-inom-program', label: 'Kurs- och programkatalogen' },
+  },
+}
+
+function createAboutCourseItem(language, courseCode) {
+  const label = language === 'en' ? 'About course' : 'Om kursen'
+  return {
+    label: `${label} ${courseCode}`,
+    url: `/student/kurser/kurs/${courseCode.toUpperCase()}?l=${language}`,
+  }
+}
+
+function createBreadcrumbs(language, courseCode) {
+  const items = [baseItems.university[language], baseItems.student[language], baseItems.directory[language]]
+  if (courseCode) {
+    items.push(createAboutCourseItem(language, courseCode))
+  }
+  return items
+}
+
+module.exports = {
+  createBreadcrumbs,
+}

server/views/helpers/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const registerHeaderContentHelper = require('@kth/kth-node-web-common/lib/handlebars/helpers/headerContent')
+const { registerBreadcrumbHelper } = require('@kth/kth-node-web-common/lib/handlebars/helpers/breadcrumbs')
 const log = require('@kth/log')
 const config = require('../../configuration').server
 const packageFile = require('../../../package.json')
@@ -34,6 +35,7 @@ registerHeaderContentHelper({
  * packaged helpers in https://github.com/KTH/kth-node-web-common/tree/master/lib/handlebars/helpers
  * Those only need to be required. Docs embedded in source.
  */
+registerBreadcrumbHelper()
 require('@kth/kth-node-web-common/lib/handlebars/helpers/contentedit')
 
 const i18n = require('../../../i18n')

server/views/partials/kthHeader.handlebars

@@ -33,7 +33,7 @@
 
   <div class="container articleNavigation d-print-none">
     <div id="breadcrumbs-header" class="row justify-content-between d-print-none">
-      {{!-- HERE WILL BE RENDERED REACT COMPONENT Breadcrumbs --}}
+      {{breadcrumbs breadcrumbsList lang}}
     </div>
   </div>
 </header>