TCA-1278, TCA-1279 - Cert page fixes -> rc-3.1

src-ts/lib/loading-spinner/LoadingSpinner.tsx

@@ -3,7 +3,7 @@
  *
  * Centered Loading Spinner with back overlay
  */
-import { FC } from 'react'
+import { FC, forwardRef, RefAttributes } from 'react'
 import { PuffLoader } from 'react-spinners'
 import classNames from 'classnames'
 
@@ -19,21 +19,23 @@ export interface LoadingSpinnerProps {
     type?: LoadingSpinnerType
 }
 
-const LoadingSpinner: FC<LoadingSpinnerProps> = (props: LoadingSpinnerProps) => {
+const LoadingSpinner: FC<LoadingSpinnerProps & RefAttributes<HTMLDivElement>>
+= forwardRef<HTMLDivElement, LoadingSpinnerProps>((props, ref) => {
     if (!!props.hide) {
         return <></>
     }
 
     const isOverlay: boolean = props.type === 'Overlay'
     return (
         <div
+            ref={ref}
             className={
                 classNames(styles['loading-spinner'], styles.show, { [styles.overlay]: isOverlay }, props.className)
             }
         >
             <PuffLoader color='#2196f3' loading size={100} />
         </div>
     )
-}
+})
 
 export default LoadingSpinner

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

@@ -118,7 +118,7 @@ const CertificationDetailsPage: FC<{}> = () => {
                     />
                 </>
             )
-        ) : <></>
+        ) : undefined
     }
 
     function renderSidebar(): ReactNode {

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

@@ -1,7 +1,9 @@
 import {
     FC,
+    forwardRef,
     MutableRefObject,
     ReactNode,
+    RefAttributes,
     useMemo,
     useRef,
 } from 'react'
@@ -33,7 +35,8 @@ interface CertificateViewProps {
     provider: string
 }
 
-const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
+const CertificateView: FC<CertificateViewProps & RefAttributes<HTMLDivElement>>
+= forwardRef<HTMLDivElement, CertificateViewProps>((props, ref) => {
     const coursePath: string = getCoursePath(props.provider, props.certification)
     const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
@@ -110,6 +113,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
             </PageTitle>
 
             <CertificatePageLayout
+                ref={ref}
                 certificateElRef={certificateElRef}
                 fallbackBackUrl={coursePath}
                 fullScreenCertLayout={!certificateNotFoundError && props.fullScreenCertLayout}
@@ -127,6 +131,6 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
             </CertificatePageLayout>
         </>
     )
-}
+})
 
 export default CertificateView

src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx

@@ -1,4 +1,13 @@
-import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import {
+    Dispatch,
+    FC,
+    MutableRefObject,
+    SetStateAction,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from 'react'
 import { Params, useParams } from 'react-router-dom'
 
 import {
@@ -7,8 +16,10 @@ import {
     UserProfile,
 } from '../../../../lib'
 import { CertificateView } from '../certificate-view'
+import { hideSiblings } from '../../learn-lib'
 
 const UserCertificate: FC<{}> = () => {
+    const elRef: MutableRefObject<HTMLElement | any> = useRef()
 
     const routeParams: Params<string> = useParams()
 
@@ -31,16 +42,27 @@ const UserCertificate: FC<{}> = () => {
         }
     }, [routeParams.memberHandle, setProfileReady])
 
+    useLayoutEffect(() => {
+        const el: HTMLElement = elRef.current
+        if (!el) {
+            return
+        }
+
+        hideSiblings(el)
+        hideSiblings(el.parentElement as HTMLElement)
+    }, [])
+
     return (
         <>
-            <LoadingSpinner hide={profileReady} />
+            <LoadingSpinner hide={profileReady} ref={elRef} />
 
             {profileReady && profile && (
                 <CertificateView
                     certification={certificationParam}
                     profile={profile}
                     provider={providerParam}
                     fullScreenCertLayout
+                    ref={elRef}
                 />
             )}
         </>

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx

@@ -1,7 +1,9 @@
 import {
     FC,
+    forwardRef,
     MutableRefObject,
     ReactNode,
+    RefAttributes,
     useCallback,
     useLayoutEffect,
     useRef,
@@ -42,7 +44,8 @@ interface CertificatePageLayoutProps {
     title?: string
 }
 
-const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: CertificatePageLayoutProps) => {
+const CertificatePageLayout: FC<CertificatePageLayoutProps & RefAttributes<HTMLDivElement>>
+= forwardRef<HTMLDivElement, CertificatePageLayoutProps>((props, ref) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const viewStyle: CertificatePageLayoutStyle = queryParams.get(getViewStyleParamKey()) as CertificatePageLayoutStyle
 
@@ -78,6 +81,12 @@ const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: Certificat
     const handlePrint: () => Promise<void>
         = useCertificatePrint(props.certificateElRef, props.title ?? '')
 
+    if (typeof ref === 'function') {
+        ref(wrapElRef.current)
+    } else if (ref && Object.prototype.hasOwnProperty.call(ref, 'current')) {
+        ref.current = wrapElRef.current
+    }
+
     useLayoutEffect(() => {
         const el: HTMLElement = wrapElRef.current
         if (props.fullScreenCertLayout !== true || !el) {
@@ -93,57 +102,59 @@ const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: Certificat
         <>
             <LoadingSpinner hide={props.isReady} />
 
-            {props.isReady && (
-                <div className={classNames(styles.wrap, props.className)} ref={wrapElRef}>
-                    <div className={styles['content-wrap']}>
-                        {!props.fullScreenCertLayout && (
-                            <div className={styles['btns-wrap']}>
-                                <ActionButton
-                                    icon={<IconOutline.ChevronLeftIcon />}
-                                    onClick={handleBackBtnClick}
-                                />
-                            </div>
-                        )}
-                        <div
-                            className={classNames(styles['certificate-wrap'], viewStyle)}
-                            ref={certificateWrapRef}
-                        >
-                            <div className={styles.certifInnerWrap}>
-                                {props.children}
-                            </div>
-                        </div>
-                        {!props.fullScreenCertLayout && (
+            <div className={classNames(styles.wrap, props.className)} ref={wrapElRef}>
+                {props.isReady && (
+                    <>
+                        <div className={styles['content-wrap']}>
+                            {!props.fullScreenCertLayout && (
+                                <div className={styles['btns-wrap']}>
+                                    <ActionButton
+                                        icon={<IconOutline.ChevronLeftIcon />}
+                                        onClick={handleBackBtnClick}
+                                    />
+                                </div>
+                            )}
                             <div
-                                className={
-                                    classNames(
-                                        styles['btns-wrap'],
-                                        (!props.isCertificateCompleted || props.disableActions) && styles.disabled,
-                                    )
-                                }
+                                className={classNames(styles['certificate-wrap'], viewStyle)}
+                                ref={certificateWrapRef}
                             >
-                                <ActionButton
-                                    icon={<IconOutline.PrinterIcon />}
-                                    onClick={handlePrint}
-                                />
-                                <ActionButton
-                                    icon={<IconOutline.DownloadIcon />}
-                                    onClick={handleDownload}
-                                />
-                                <ActionButton
-                                    icon={<IconOutline.ShareIcon />}
-                                    onClick={shareModal.show}
-                                >
-                                    Share certificate
-                                </ActionButton>
+                                <div className={styles.certifInnerWrap}>
+                                    {props.children}
+                                </div>
                             </div>
-                        )}
-                    </div>
-                    {props.afterContent}
-                    {shareModal.modal}
-                </div>
-            )}
+                            {!props.fullScreenCertLayout && (
+                                <div
+                                    className={
+                                        classNames(
+                                            styles['btns-wrap'],
+                                            (!props.isCertificateCompleted || props.disableActions) && styles.disabled,
+                                        )
+                                    }
+                                >
+                                    <ActionButton
+                                        icon={<IconOutline.PrinterIcon />}
+                                        onClick={handlePrint}
+                                    />
+                                    <ActionButton
+                                        icon={<IconOutline.DownloadIcon />}
+                                        onClick={handleDownload}
+                                    />
+                                    <ActionButton
+                                        icon={<IconOutline.ShareIcon />}
+                                        onClick={shareModal.show}
+                                    >
+                                        Share certificate
+                                    </ActionButton>
+                                </div>
+                            )}
+                        </div>
+                        {props.afterContent}
+                        {shareModal.modal}
+                    </>
+                )}
+            </div>
         </>
     )
-}
+})
 
 export default CertificatePageLayout