From ac8296d214e56836685f512e8c6a9339576389f3 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Fri, 24 Feb 2023 23:17:13 +0200
Subject: [PATCH] TCA-1070 - fixes navigate back from certificate view

---
 src-ts/lib/hooks/index.ts                     |  1 +
 src-ts/lib/hooks/use-navigate-back.hook.ts    | 20 +++++++++++++++++++
 .../certificate-view/CertificateView.tsx      |  9 +++++----
 .../certificate-view/CertificateView.tsx      |  9 +++++----
 4 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src-ts/lib/hooks/use-navigate-back.hook.ts

diff --git a/src-ts/lib/hooks/index.ts b/src-ts/lib/hooks/index.ts
index 712ffcf02..2d616e17e 100644
--- a/src-ts/lib/hooks/index.ts
+++ b/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'
diff --git a/src-ts/lib/hooks/use-navigate-back.hook.ts b/src-ts/lib/hooks/use-navigate-back.hook.ts
new file mode 100644
index 000000000..f51536668
--- /dev/null
+++ b/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)
+    }
+}
diff --git a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
index 6bffe506b..eee4dc5f6 100644
--- a/src-ts/tools/learn/course-certificate/certificate-view/CertificateView.tsx
+++ b/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)
 
diff --git a/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx b/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx
index 753155f7b..e03b33068 100644
--- a/src-ts/tools/learn/tca-certificate/certificate-view/CertificateView.tsx
+++ b/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)