TCA-1144 update titles -> dev

package.json

@@ -52,6 +52,7 @@
         "react-dom": "^18.2.0",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
+        "react-helmet": "^6.1.0",
         "react-redux": "^8.0.4",
         "react-redux-toastr": "^7.6.10",
         "react-responsive-modal": "^6.2.0",
@@ -99,6 +100,7 @@
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
         "@types/react-gtm-module": "^2.0.1",
+        "@types/react-helmet": "^6.1.6",
         "@types/react-redux-toastr": "^7.6.2",
         "@types/react-router-dom": "^5.3.3",
         "@types/sanitize-html": "^2.6.2",

src-ts/lib/index.ts

@@ -39,6 +39,7 @@ export * from './loading-spinner'
 export * from './modals'
 export * from './page-divider'
 export * from './page-footer'
+export * from './page-title'
 export * from './pagination'
 export * from './portal'
 export * from './profile-provider'

src-ts/lib/page-title/PageTitle.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import { Helmet } from 'react-helmet'
+
+interface PageTitleProps {
+    children: string
+}
+
+const PageTitle: FC<PageTitleProps> = (props: PageTitleProps) => (
+    <Helmet>
+        <title>{props.children}</title>
+    </Helmet>
+)
+
+export default PageTitle

src-ts/lib/page-title/index.ts

@@ -0,0 +1 @@
+export { default as PageTitle } from './PageTitle'

src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx

@@ -3,6 +3,7 @@ import { Params, useParams } from 'react-router-dom'
 import classNames from 'classnames'
 
 import {
+    PageTitle,
     TCACertificationProgressProviderData,
     TCACertificationProgressStatus,
     TCACertificationProviderData,
@@ -123,7 +124,9 @@ const CertificationDetailsPage: FC<{}> = () => {
             heroCTA={!isEnrolled && (
                 <EnrollCtaBtn certification={certification?.dashedName} />
             )}
-        />
+        >
+            <PageTitle>{certification?.title ?? 'Certification Details'}</PageTitle>
+        </PageLayout>
     )
 }
 

src-ts/tools/learn/certification-details/page-layout/PageLayout.tsx

@@ -25,6 +25,7 @@ interface PageLayoutProps {
     mainContent: ReactNode
     heroCTA?: ReactNode
     sidebarContents: ReactNode
+    children?: ReactNode
 }
 
 const PageLayout: FC<PageLayoutProps> = (props: PageLayoutProps) => {
@@ -78,6 +79,7 @@ const PageLayout: FC<PageLayoutProps> = (props: PageLayoutProps) => {
                     <LoadingSpinner />
                 </div>
             )}
+            {props.children}
         </ContentLayout>
     )
 }

src-ts/tools/learn/course-certificate/certificate-not-found/CertificateNotFound.tsx

@@ -2,13 +2,15 @@ import { FC } from 'react'
 import classNames from 'classnames'
 
 import { TCAcademyLogoMixedSvg, TcLogoSvg } from '../../../../lib'
-import { CertificateNotFoundContent } from '../../learn-lib'
+import { CertificateNotFoundContent, PageTitle } from '../../learn-lib'
 
 import { ReactComponent as BackgroundSvg } from './bg.svg'
 import styles from './CertificateNotFound.module.scss'
 
 const CertificateNotFound: FC<{}> = () => (
     <div className={styles.wrap}>
+        <PageTitle>Certificate Not Found</PageTitle>
+
         <BackgroundSvg />
         <div className={styles.details}>
             <div className={styles.detailsInner}>

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx

@@ -11,6 +11,7 @@ import {
     CertificateNotFoundContent,
     CertificatePageLayout,
     CoursesProviderData,
+    PageTitle,
     useGetCertification,
     useGetCourses,
     useGetUserCompletedCertifications,
@@ -103,22 +104,28 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     }
 
     return (
-        <CertificatePageLayout
-            certificateElRef={certificateElRef}
-            fallbackBackUrl={coursePath}
-            fullScreenCertLayout={!certificateNotFoundError && props.fullScreenCertLayout}
-            isCertificateCompleted={hasCompletedTheCertification}
-            isReady={ready}
-            ssrUrl={certUrl}
-            title={certificationTitle}
-            disableActions={ready && !hasCompletedTheCertification}
-            className={certificateNotFoundError ? 'cert-not-found-layout' : ''}
-            afterContent={certificateNotFoundError && (
-                <CertificateNotFoundContent className='desktop-hide' />
-            )}
-        >
-            {renderCertificate()}
-        </CertificatePageLayout>
+        <>
+            <PageTitle>
+                {`${props.profile.handle}'s ${course?.title} Certificate`}
+            </PageTitle>
+
+            <CertificatePageLayout
+                certificateElRef={certificateElRef}
+                fallbackBackUrl={coursePath}
+                fullScreenCertLayout={!certificateNotFoundError && props.fullScreenCertLayout}
+                isCertificateCompleted={hasCompletedTheCertification}
+                isReady={ready}
+                ssrUrl={certUrl}
+                title={certificationTitle}
+                disableActions={ready && !hasCompletedTheCertification}
+                className={certificateNotFoundError ? 'cert-not-found-layout' : ''}
+                afterContent={certificateNotFoundError && (
+                    <CertificateNotFoundContent className='desktop-hide' />
+                )}
+            >
+                {renderCertificate()}
+            </CertificatePageLayout>
+        </>
     )
 }
 

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -15,6 +15,7 @@ import {
     AllCertificationsProviderData,
     CoursesProviderData,
     CourseTitle,
+    PageTitle,
     TCACertificationCheckCompleted,
     useGetCertification,
     useGetCourses,
@@ -100,6 +101,10 @@ const CourseCompletedPage: FC<{}> = () => {
 
     return (
         <>
+            <PageTitle>
+                {`${certification?.title ?? 'Certification'} Completed`}
+            </PageTitle>
+
             <LoadingSpinner hide={ready} />
 
             {ready && courseData && (

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -16,6 +16,7 @@ import {
     AllCertificationsProviderData,
     CoursesProviderData,
     CourseTitle,
+    PageTitle,
     ResourceProviderData,
     TCACertificationProgressBox,
     useGetCertification,
@@ -177,6 +178,8 @@ const CourseDetailsPage: FC<{}> = () => {
 
     return (
         <ContentLayout>
+            <PageTitle>{course?.title ?? 'Course Details'}</PageTitle>
+
             {!ready && (
                 <div className={styles.wrap}>
                     <LoadingSpinner />

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -33,6 +33,7 @@ import {
     LearnModuleStatus,
     LearnUserCertificationProgress,
     LessonProviderData,
+    PageTitle,
     useGetCourses,
     useGetLesson,
     useGetUserCertificationProgress,
@@ -508,6 +509,10 @@ const FreeCodeCamp: FC<{}> = () => {
 
     return (
         <>
+            <PageTitle>
+                {`${module}: ${lesson?.title}`}
+            </PageTitle>
+
             <LoadingSpinner hide={ready} />
             <div className={styles.wrapBreadcrumb}>
                 <Breadcrumb items={breadcrumb} />

src-ts/tools/learn/learn-lib/index.ts

@@ -13,6 +13,7 @@ export * from './functions'
 export * from './learn-breadcrumb-provider'
 export * from './learn-swr'
 export * from './providers-logo-list'
+export * from './page-title'
 export * from './skill-tags'
 export * from './skill'
 export * from './sticky-sidebar'

src-ts/tools/learn/learn-lib/page-title/PageTitle.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+import { PageTitle as RootPageTitle } from '../../../../lib'
+
+interface PageTitleProps {
+    children: string
+}
+
+const PageTitle: FC<PageTitleProps> = (props: PageTitleProps) => (
+    <RootPageTitle>
+        {`${props.children} - Topcoder Academy`}
+    </RootPageTitle>
+)
+
+export default PageTitle

src-ts/tools/learn/learn-lib/page-title/index.ts

@@ -0,0 +1 @@
+export { default as PageTitle } from './PageTitle'

src-ts/tools/learn/my-learning/MyLearning.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 
 import { GenericPageMoved } from '../../../lib'
+import { PageTitle } from '../learn-lib'
 import { LEARN_PATHS } from '../learn.routes'
 
 /**
@@ -9,7 +10,10 @@ import { LEARN_PATHS } from '../learn.routes'
  */
 
 const MyLearning: FC<{}> = () => (
-    <GenericPageMoved pageTitle='Topcoder Academy' newPageUrl={LEARN_PATHS.root} />
+    <>
+        <PageTitle>Page Moved</PageTitle>
+        <GenericPageMoved pageTitle='Topcoder Academy' newPageUrl={LEARN_PATHS.root} />
+    </>
 )
 
 export default MyLearning

src-ts/tools/learn/tca-certificate/certificate-not-found/CertificateNotFound.tsx

@@ -2,14 +2,15 @@ import { FC } from 'react'
 import classNames from 'classnames'
 
 import { TCAcademyLogoWhiteSvg, TCLogoSvg } from '../../../../lib'
-import { CertificateNotFoundContent } from '../../learn-lib'
+import { CertificateNotFoundContent, PageTitle } from '../../learn-lib'
 
 import { ReactComponent as BackgroundSvg } from './bg.svg'
 import { ReactComponent as BadgeSvg } from './badge.svg'
 import styles from './CertificateNotFound.module.scss'
 
 const CertificateNotFound: FC<{}> = () => (
     <div className={styles.wrap}>
+        <PageTitle>Certificate Not Found</PageTitle>
         <BackgroundSvg />
         <div className={styles.details}>
             <div className={classNames(styles.headerWrap, 'mobile-hide')}>

src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx

@@ -9,6 +9,7 @@ import {
     ActionButton,
     CertificateNotFoundContent,
     CertificatePageLayout,
+    PageTitle,
     TCACertificatePreview,
     TCACertification,
     TCACertificationValidationData,
@@ -77,6 +78,10 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
 
     return (
         <>
+            <PageTitle>
+                {`${!!enrollment && `${enrollment.userName}'s `}${certification?.title} Certificate`}
+            </PageTitle>
+
             <LoadingSpinner hide={ready} />
 
             <CertificatePageLayout

src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../../../lib'
 import {
     CourseBadge,
+    PageTitle,
     TCACertificatePreview,
     TCACertificateType,
     TCACertification,
@@ -107,6 +108,9 @@ const ValidateTCACertificate: FC<{}> = () => {
 
     return (
         <>
+            <PageTitle>
+                {`${!!enrollment && `${enrollment.userName}'s `}${certification?.title} Certificate`}
+            </PageTitle>
             <LoadingSpinner hide={profileReady && certReady} />
 
             {profile && certification && (

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -15,6 +15,7 @@ import {
 import {
     AllCertificationsProviderData,
     LearnCertification,
+    PageTitle,
     TCACertificationsProgressProviderData,
     TCACertificationsProviderData,
     useGetAllCertifications,
@@ -84,6 +85,7 @@ const WelcomePage: FC = () => {
 
     return (
         <ContentLayout>
+            <PageTitle>Learn</PageTitle>
 
             <div className={classNames(styles.wrap, 'full-height-frame')}>
 

yarn.lock

@@ -2628,6 +2628,13 @@
   resolved "https://registry.yarnpkg.com/@types/react-gtm-module/-/react-gtm-module-2.0.1.tgz#b2c6cd14ec251d6ae7fa576edf1d43825908a378"
   integrity sha512-T/DN9gAbCYk5wJ1nxf4pSwmXz4d1iVjM++OoG+mwMfz9STMAotGjSb65gJHOS5bPvl6vLSsJnuC+y/43OQrltg==
 
+"@types/react-helmet@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.6.tgz#7d1afd8cbf099616894e8240e9ef70e3c6d7506d"
+  integrity sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux-toastr@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@types/react-redux-toastr/-/react-redux-toastr-7.6.2.tgz#e2860ee3712ef4bd0c3edc069bb6d37998700d58"
@@ -12080,11 +12087,26 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-gtm-module@^2.0.11:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
   integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
 
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12224,6 +12246,11 @@ react-select@^5.5.0:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 react-spinners@^0.13.6:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.7.tgz#0f423c415bfa56765ce9fb36ff604e52a92b37a9"