Merge pull request #510 from topcoder-platform/TCA-1018

TCA 1018

Author: kkartunov

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

@@ -8,6 +8,7 @@ import {
 } from '../../../../lib'
 import { getViewStyleParamKey } from '../../learn.routes'
 import { CertificateView, CertificateViewStyle } from '../certificate-view'
+import { hideSiblings } from '../../learn-lib/functions'
 
 import styles from './UserCertificate.module.scss'
 
@@ -26,14 +27,6 @@ const UserCertificate: FC<{}> = () => {
     const providerParam: string = routeParams.provider ?? ''
     const certificationParam: string = routeParams.certification ?? ''
 
-    function hideSiblings(el: HTMLElement): void {
-        [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => {
-            if (c !== el) {
-                Object.assign(c.style, { display: 'none' })
-            }
-        })
-    }
-
     useEffect(() => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx

@@ -2,7 +2,14 @@ import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
 import { learnUrlGet } from '../../../functions'
 import { useSwrCache } from '../../../learn-swr'
-import { TCACertificationEnrollmentProviderData } from '../tca-certification-progress'
+import { TCACertificationEnrollmentBase } from '../tca-certification-enrollment-base.model'
+
+export interface TCACertificationEnrollmentProviderData {
+    enrollment: TCACertificationEnrollmentBase
+    error: boolean
+    loading: boolean
+    ready: boolean
+}
 
 export function useTCACertificationEnrollment(
     id: string, // note id | completionUuid both are supported by the API

src-ts/tools/learn/learn-lib/functions/hide-siblings.ts

@@ -0,0 +1,7 @@
+export function hideSiblings(el: HTMLElement): void {
+    [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => {
+        if (c !== el) {
+            Object.assign(c.style, { display: 'none' })
+        }
+    })
+}

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

@@ -5,3 +5,4 @@ export {
     postAsync as learnXhrPostAsync,
     putAsync as learnXhrPutAsync,
 } from './learn-xhr.functions'
+export { hideSiblings } from './hide-siblings'

src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss

@@ -7,7 +7,7 @@
     padding-top: calc($space-mx * 2);
     color: $tc-white;
 
-    @include ltemd {
+    @include ltelg {
         padding-top: $space-mx;
     }
 
@@ -34,7 +34,7 @@
         overflow: hidden;
         justify-content: center;
 
-        @include ltemd {
+        @include ltelg {
             flex-direction: column;
         }
 
@@ -109,7 +109,7 @@
             flex: 1 1 auto;
             min-width: 360px;
             max-width: 480px;
-            @include ltemd {
+            @include ltelg {
                 max-width: none;
             }
         }
@@ -121,7 +121,7 @@
     flex-direction: column;
     margin-top: calc($space-mx + $space-mx);
 
-    @include ltemd {
+    @include ltelg {
         margin-top: $space-mx;
     }
 
@@ -148,7 +148,7 @@
             gap: $space-xl;
             margin-top: $space-xxl;
 
-            @include ltemd {
+            @include ltelg {
                 grid-template-columns: 1fr;
             }
 
@@ -167,4 +167,46 @@
             }
         }
     }
+}
+
+.modalView {
+    .hero {
+        padding-top: $space-lg;
+        max-height: 360px;
+
+        @include ltesm {
+            max-height: none;
+        }
+
+
+        .heroInner {
+            margin-bottom: 0;
+            flex-direction: row;
+
+            @include ltesm {
+                flex-direction: column;
+            }
+
+            .heroLeft {
+                transform: scale(0.67);
+                transform-origin: 0 0;
+
+                @include ltesm {
+                    transform: none;
+                }
+            }
+        }
+    }
+
+    .contentOuter {
+        max-width: none;
+
+        >div {
+            max-width: none !important;
+        }
+
+        .courses {
+            margin-bottom: 0;
+        }
+    }
 }

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

@@ -1,5 +1,15 @@
-import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { Params, useParams } from 'react-router-dom'
+import {
+    Dispatch,
+    FC,
+    MutableRefObject,
+    ReactNode,
+    SetStateAction,
+    useEffect,
+    useLayoutEffect,
+    useMemo, useRef,
+    useState,
+} from 'react'
+import { Params, useParams, useSearchParams } from 'react-router-dom'
 import classNames from 'classnames'
 
 import {
@@ -23,12 +33,18 @@ import {
 } from '../../learn-lib'
 import { EnvironmentConfig } from '../../../../config'
 import { getTCACertificationValidationUrl } from '../../learn.routes'
+import { hideSiblings } from '../../learn-lib/functions'
 
 import styles from './ValidateTCACertificate.module.scss'
 
 const ValidateTCACertificate: FC<{}> = () => {
 
+    const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
+
     const routeParams: Params<string> = useParams()
+    const [queryParams]: [URLSearchParams, any] = useSearchParams()
+
+    const isModalView: boolean = queryParams.get('view-style') === 'modal'
 
     const [profile, setProfile]: [
         UserProfile | undefined,
@@ -41,7 +57,7 @@ const ValidateTCACertificate: FC<{}> = () => {
         enrollment,
         ready: certReady,
     }: TCACertificationEnrollmentProviderData
-    = useTCACertificationEnrollment(routeParams.completionUuid as string)
+        = useTCACertificationEnrollment(routeParams.completionUuid as string)
 
     const certification: TCACertification | undefined = enrollment?.topcoderCertification
 
@@ -72,6 +88,17 @@ const ValidateTCACertificate: FC<{}> = () => {
         }
     }, [enrollment, setProfileReady])
 
+    useLayoutEffect(() => {
+        const el: HTMLElement = wrapElRef.current
+        if (!el || !isModalView) {
+            return
+        }
+
+        hideSiblings(el)
+        hideSiblings(el.parentElement as HTMLElement)
+
+    })
+
     function visitFullProfile(): void {
         window.open(`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${profile?.handle}`, '_blank')
     }
@@ -81,14 +108,14 @@ const ValidateTCACertificate: FC<{}> = () => {
             <LoadingSpinner hide={profileReady && certReady} />
 
             {profile && certification && (
-                <div className='full-height-frame'>
+                <div className={classNames('full-height-frame', isModalView ? styles.modalView : '')} ref={wrapElRef}>
                     <div
                         className={classNames(
                             styles.hero,
                             styles[`hero-${certification.certificationCategory?.track.toLowerCase() || 'dev'}`],
                         )}
                     >
-                        <ContentLayout>
+                        <ContentLayout outerClass={isModalView ? styles.contentOuter : ''}>
                             <div className={styles.heroInner}>
                                 <div className={styles.heroLeft}>
                                     <div className={styles.member}>
@@ -132,20 +159,12 @@ const ValidateTCACertificate: FC<{}> = () => {
                                         completionUuid={routeParams.completionUuid}
                                         validateLink={validateLink}
                                     />
-                                    {/* <Certificate
-                                        certification={certification}
-                                        completedDate={enrollment?.completedAt as unknown as string}
-                                        userName={enrollment?.userName}
-                                        completionUuid={routeParams.completionUuid}
-                                        validateLink={validateLink}
-                                        viewStyle='small-container'
-                                    /> */}
                                 </div>
                             </div>
                         </ContentLayout>
                     </div>
 
-                    <ContentLayout>
+                    <ContentLayout outerClass={isModalView ? styles.contentOuter : ''}>
                         <div className={styles.wrap}>
                             <h2>
                                 {'What '}
@@ -160,12 +179,15 @@ const ValidateTCACertificate: FC<{}> = () => {
                                     {coursesGridItems}
                                 </div>
                             </div>
-
-                            <Button
-                                buttonStyle='link'
-                                label='Visit Full Profile'
-                                onClick={visitFullProfile}
-                            />
+                            {
+                                !isModalView && (
+                                    <Button
+                                        buttonStyle='link'
+                                        label='Visit Full Profile'
+                                        onClick={visitFullProfile}
+                                    />
+                                )
+                            }
                         </div>
                     </ContentLayout>
                 </div>