TCA-1070 - fixes navigate back from certificate view -> dev

src-ts/lib/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-on-hover-element.hook'
 export * from './use-storage.hook'
 export * from './use-viewport-units-fix.hook'
 export * from './use-window-size.hook'
+export * from './use-navigate-back.hook'

src-ts/lib/hooks/use-navigate-back.hook.ts

@@ -0,0 +1,20 @@
+import { NavigateFunction, useNavigate } from 'react-router-dom'
+
+export type NavigateBackFunction = (fallbackUrl: string) => void
+type useNavigateBackType = () => NavigateBackFunction
+
+export const useNavigateBack: useNavigateBackType = (): NavigateBackFunction => {
+    const navigate: NavigateFunction = useNavigate()
+    return (fallbackUrl: string) => {
+        const currentPageHref: string = window.location.href
+
+        window.history.go(-1)
+
+        setTimeout(() => {
+            // go back didn't work, navigate to desired fallback url
+            if (window.location.href === currentPageHref) {
+                navigate(fallbackUrl)
+            }
+        }, 30)
+    }
+}

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

@@ -1,5 +1,4 @@
 import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import {
@@ -8,7 +7,9 @@ import {
     IconOutline,
     LinkedinSocialShareBtn,
     LoadingSpinner,
+    NavigateBackFunction,
     TwitterSocialShareBtn,
+    useNavigateBack,
     UserProfile,
 } from '../../../../lib'
 import {
@@ -41,7 +42,7 @@ interface CertificateViewProps {
 
 const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
 
-    const navigate: NavigateFunction = useNavigate()
+    const navigateBack: NavigateBackFunction = useNavigateBack()
     const coursePath: string = getCoursePath(props.provider, props.certification)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
@@ -100,8 +101,8 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     useCertificateScaling(ready ? certificateWrapRef : undefined, 880, 880)
 
     const handleBackBtnClick: () => void = useCallback(() => {
-        navigate(coursePath)
-    }, [coursePath, navigate])
+        navigateBack(coursePath)
+    }, [coursePath, navigateBack])
 
     const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
 

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

@@ -1,5 +1,4 @@
 import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
-import { NavigateFunction, useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import {
@@ -8,7 +7,9 @@ import {
     IconOutline,
     LinkedinSocialShareBtn,
     LoadingSpinner,
+    NavigateBackFunction,
     TwitterSocialShareBtn,
+    useNavigateBack,
     UserProfile,
 } from '../../../../lib'
 import {
@@ -38,7 +39,7 @@ interface CertificateViewProps {
 
 const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
 
-    const navigate: NavigateFunction = useNavigate()
+    const navigateBack: NavigateBackFunction = useNavigateBack()
     const tcaCertificationPath: string = getTCACertificationPath(props.certification)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -80,8 +81,8 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
     ), [hasCompletedTheCertification, ready])
 
     const handleBackBtnClick: () => void = useCallback(() => {
-        navigate(tcaCertificationPath)
-    }, [tcaCertificationPath, navigate])
+        navigateBack(tcaCertificationPath)
+    }, [tcaCertificationPath, navigateBack])
 
     const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)