diff --git a/package-lock.json b/package-lock.json index 76159a55..45e7899e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15729,6 +15729,22 @@ "integrity": "sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A==", "dev": true }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, + "react-helmet": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.0.0.tgz", + "integrity": "sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^2.0.4", + "react-side-effect": "^2.1.0" + } + }, "react-intl": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz", @@ -15806,6 +15822,11 @@ "tiny-warning": "^1.0.0" } }, + "react-side-effect": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz", + "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==" + }, "react-transition-group": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", diff --git a/package.json b/package.json index cef7c10d..91564217 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-helmet": "6.0.0", "react-redux": "^7.1.3", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index ffc7a8b7..194ce905 100644 --- a/src/courseware/course/Course.jsx +++ b/src/courseware/course/Course.jsx @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Helmet } from 'react-helmet'; +import { getConfig } from '@edx/frontend-platform'; import { AlertList } from '../../user-messages'; import { useAccessExpirationAlert } from '../../alerts/access-expiration-alert'; @@ -34,6 +36,12 @@ function Course({ const sequence = useModel('sequences', sequenceId); const section = useModel('sections', sequence ? sequence.sectionId : null); + const pageTitleBreadCrumbs = [ + section, + sequence, + course, + ].filter(element => element != null).map(element => element.title); + useOfferAlert(courseId); useAccessExpirationAlert(courseId); @@ -44,6 +52,9 @@ function Course({ return ( <> + + {`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`} +