Merge pull request #610 from topcoder-platform/TCA-1279_profile-page-ifr

TCA-1279 - hide header & footer for hiring manager view in modal mode -> dev

Author: vas3a

src-ts/tools/learn/learn-lib/hiring-manager-view/HiringManagerView.tsx

@@ -5,7 +5,6 @@ import {
     ReactNode,
     SetStateAction,
     useCallback,
-    useLayoutEffect,
     useMemo,
     useRef,
     useState,
@@ -36,7 +35,7 @@ import {
     useTCAShareCertificateModal,
 } from '..'
 import { getTCACertificationPath, getUserTCACertificateSsr } from '../../learn.routes'
-import { clearFCCCertificationTitle, hideSiblings } from '../functions'
+import { clearFCCCertificationTitle } from '../functions'
 import { EnvironmentConfig } from '../../../../config'
 
 import { CertificateModal } from './certificate-modal'
@@ -68,7 +67,6 @@ export interface HiringManagerViewProps {
 // eslint-disable-next-line complexity
 const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewProps) => {
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
-    const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const [certPreviewModalIsOpen, setCertPreviewModalIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -253,19 +251,8 @@ const HiringManagerView: FC<HiringManagerViewProps> = (props: HiringManagerViewP
         )
     }
 
-    useLayoutEffect(() => {
-        const el: HTMLElement = wrapElRef.current
-        if (!el || !props.isModalView) {
-            return
-        }
-
-        hideSiblings(el.parentElement as HTMLElement)
-        hideSiblings(el.parentElement?.parentElement as HTMLElement)
-
-    })
-
     return !!props.certification && !!props.userProfile ? (
-        <div className={props.isModalView ? styles.modalView : ''} ref={wrapElRef}>
+        <div className={props.isModalView ? styles.modalView : ''}>
             {renderHero()}
 
             <ContentLayout

src-ts/tools/learn/tca-certificate/user-certification-view/UserCertificationViewBase.tsx

@@ -4,6 +4,7 @@ import {
     MutableRefObject,
     SetStateAction,
     useEffect,
+    useLayoutEffect,
     useRef,
     useState,
 } from 'react'
@@ -16,6 +17,7 @@ import {
 } from '../../../../lib'
 import {
     CertificatePageLayout,
+    hideSiblings,
     HiringManagerView,
     PageTitle,
     TCACertification,
@@ -34,6 +36,7 @@ interface UserCertificationViewBaseProps {
 
 const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: UserCertificationViewBaseProps) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
+    const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const tcaCertificationPath: string = getTCACertificationPath(`${props.certification?.dashedName}`)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
@@ -55,6 +58,15 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
             .then(verified => setIsMemberVerified(verified))
     }, [props.enrollment])
 
+    useLayoutEffect(() => {
+        const el: HTMLElement = wrapElRef.current
+        if (!el || !isModalView) {
+            return
+        }
+
+        hideSiblings(el.parentElement as HTMLElement)
+    }, [isModalView])
+
     return (
         <>
             <PageTitle>
@@ -74,8 +86,8 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
                 </CertificatePageLayout>
             )}
 
-            {props.profile && props.certification && props.enrollment && (
-                <div className='full-height-frame'>
+            <div className='full-height-frame' ref={wrapElRef}>
+                {props.profile && props.certification && props.enrollment && (
                     <HiringManagerView
                         certification={props.certification}
                         completedAt={(props.enrollment.completedAt ?? undefined) as string}
@@ -88,8 +100,8 @@ const UserCertificationViewBase: FC<UserCertificationViewBaseProps> = (props: Us
                         isPreview={props.isPreview}
                         isModalView={isModalView}
                     />
-                </div>
-            )}
+                )}
+            </div>
         </>
     )
 }