Skip to content

Commit 1697222

Browse files
vas3avas3a
committed
TCA-996 - refactor certificate page layout into it's own component
1 parent 2c469f0 commit 1697222

File tree

16 files changed

+242
-429
lines changed

16 files changed

+242
-429
lines changed

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

Lines changed: 37 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,39 @@
1-
import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
2-
import classNames from 'classnames'
3-
41
import {
5-
FacebookSocialShareBtn,
6-
fileDownloadCanvasAsImage,
7-
IconOutline,
8-
LinkedinSocialShareBtn,
9-
LoadingSpinner,
10-
NavigateBackFunction,
11-
TwitterSocialShareBtn,
12-
useNavigateBack,
13-
UserProfile,
14-
} from '../../../../lib'
2+
FC,
3+
MutableRefObject,
4+
useEffect,
5+
useMemo,
6+
useRef,
7+
} from 'react'
8+
159
import {
16-
ActionButton,
1710
AllCertificationsProviderData,
11+
CertificatePageLayout,
1812
CoursesProviderData,
19-
useCertificateCanvas,
20-
useCertificatePrint,
21-
useCertificateScaling,
2213
useGetCertification,
2314
useGetCourses,
2415
useGetUserCompletedCertifications,
2516
UserCompletedCertificationsProviderData,
2617
} from '../../learn-lib'
27-
import { getCoursePath, getUserCertificateSsr } from '../../learn.routes'
28-
29-
import { Certificate } from './certificate'
30-
import styles from './CertificateView.module.scss'
18+
import {
19+
getCoursePath,
20+
getUserCertificateSsr,
21+
} from '../../learn.routes'
22+
import { UserProfile } from '../../../../lib'
3123

32-
export type CertificateViewStyle = 'large-container'
24+
import Certificate from './certificate/Certificate'
3325

3426
interface CertificateViewProps {
35-
certification: string,
36-
hideActions?: boolean,
27+
certification: string
28+
fullScreenCertLayout?: boolean
3729
onCertificationNotCompleted: () => void
38-
profile: UserProfile,
39-
provider: string,
40-
viewStyle?: CertificateViewStyle
30+
profile: UserProfile
31+
provider: string
4132
}
4233

4334
const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps) => {
44-
45-
const navigateBack: NavigateBackFunction = useNavigateBack()
4635
const coursePath: string = getCoursePath(props.provider, props.certification)
4736
const certificateElRef: MutableRefObject<HTMLDivElement | any> = useRef()
48-
const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
4937

5038
const userName: string = useMemo(() => (
5139
[props.profile.firstName, props.profile.lastName].filter(Boolean)
@@ -94,95 +82,32 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
9482
completedCertificateReady && courseReady && certificateReady
9583
), [certificateReady, completedCertificateReady, courseReady])
9684

97-
const readyAndCompletedCertification: boolean = useMemo(() => (
98-
ready && hasCompletedTheCertification
99-
), [hasCompletedTheCertification, ready])
100-
101-
useCertificateScaling(ready ? certificateWrapRef : undefined, 880, 880)
102-
103-
const handleBackBtnClick: () => void = useCallback(() => {
104-
navigateBack(coursePath)
105-
}, [coursePath, navigateBack])
106-
107-
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
108-
109-
const handleDownload: () => Promise<void> = useCallback(async () => {
110-
111-
const canvas: HTMLCanvasElement | void = await getCertificateCanvas()
112-
if (!!canvas) {
113-
fileDownloadCanvasAsImage(canvas, `${certificationTitle}.png`)
114-
}
115-
116-
}, [certificationTitle, getCertificateCanvas])
117-
118-
const handlePrint: () => Promise<void> = useCertificatePrint(certificateElRef, certificationTitle)
119-
12085
useEffect(() => {
12186
if (ready && !hasCompletedTheCertification) {
12287
props.onCertificationNotCompleted()
12388
}
12489
}, [coursePath, hasCompletedTheCertification, props, ready])
12590

12691
return (
127-
<>
128-
<LoadingSpinner hide={ready} />
129-
130-
{ready && readyAndCompletedCertification && (
131-
<div className={styles.wrap}>
132-
<div className={styles['content-wrap']}>
133-
{!props.hideActions && (
134-
<div className={styles['btns-wrap']}>
135-
<ActionButton
136-
icon={<IconOutline.ChevronLeftIcon />}
137-
onClick={handleBackBtnClick}
138-
/>
139-
</div>
140-
)}
141-
<div
142-
className={classNames(styles['certificate-wrap'], props.viewStyle)}
143-
ref={certificateWrapRef}
144-
>
145-
<div className={styles.certifInnerWrap}>
146-
<Certificate
147-
course={course?.title}
148-
userName={userName}
149-
tcHandle={props.profile.handle}
150-
provider={course?.resourceProvider.name}
151-
completedDate={completedCertificate?.completedDate ?? ''}
152-
elRef={certificateElRef}
153-
type={certificate?.certificationCategory.track}
154-
viewStyle={props.viewStyle}
155-
/>
156-
</div>
157-
</div>
158-
{!props.hideActions && (
159-
<div className={styles['btns-wrap']}>
160-
<ActionButton
161-
icon={<IconOutline.PrinterIcon />}
162-
onClick={handlePrint}
163-
/>
164-
<ActionButton
165-
icon={<IconOutline.DownloadIcon />}
166-
onClick={handleDownload}
167-
/>
168-
<FacebookSocialShareBtn
169-
className={styles['share-btn']}
170-
shareUrl={certUrl}
171-
/>
172-
<LinkedinSocialShareBtn
173-
className={styles['share-btn']}
174-
shareUrl={certUrl}
175-
/>
176-
<TwitterSocialShareBtn
177-
className={styles['share-btn']}
178-
shareUrl={certUrl}
179-
/>
180-
</div>
181-
)}
182-
</div>
183-
</div>
184-
)}
185-
</>
92+
<CertificatePageLayout
93+
certificateElRef={certificateElRef}
94+
fallbackBackUrl={coursePath}
95+
fullScreenCertLayout={props.fullScreenCertLayout}
96+
isCertificateCompleted={hasCompletedTheCertification}
97+
isReady={ready}
98+
ssrUrl={certUrl}
99+
title={certificationTitle}
100+
>
101+
<Certificate
102+
completedDate={completedCertificate?.completedDate ?? ''}
103+
course={course?.title}
104+
elRef={certificateElRef}
105+
provider={course?.resourceProvider.name}
106+
tcHandle={props.profile.handle}
107+
type={certificate?.certificationCategory.track}
108+
userName={userName}
109+
/>
110+
</CertificatePageLayout>
186111
)
187112
}
188113

‎src-ts/tools/learn/course-certificate/certificate-view/certificate/Certificate.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
flex-direction: column;
2020
}
2121

22-
.wrap:global(.large-container) & {
22+
:global(.large-container) & {
2323
padding-left: calc($space-mx + $space-mxx);
2424
}
2525

‎src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.module.scss

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
1-
import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useLayoutEffect, useRef, useState } from 'react'
2-
import { Params, useParams, useSearchParams } from 'react-router-dom'
1+
import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
2+
import { Params, useParams } from 'react-router-dom'
33

44
import {
55
LoadingSpinner,
66
profileGetPublicAsync,
77
UserProfile,
88
} from '../../../../lib'
9-
import { getViewStyleParamKey } from '../../learn.routes'
10-
import { CertificateView, CertificateViewStyle } from '../certificate-view'
11-
import { hideSiblings } from '../../learn-lib/functions'
12-
13-
import styles from './UserCertificate.module.scss'
9+
import { CertificateView } from '../certificate-view'
1410

1511
const UserCertificate: FC<{}> = () => {
1612

17-
const wrapElRef: MutableRefObject<HTMLElement | any> = useRef()
1813
const routeParams: Params<string> = useParams()
19-
const [queryParams]: [URLSearchParams, any] = useSearchParams()
2014

2115
const [profile, setProfile]: [
2216
UserProfile | undefined,
@@ -37,33 +31,19 @@ const UserCertificate: FC<{}> = () => {
3731
}
3832
}, [routeParams.memberHandle, setProfileReady])
3933

40-
useLayoutEffect(() => {
41-
const el: HTMLElement = wrapElRef.current
42-
if (!el) {
43-
return
44-
}
45-
46-
hideSiblings(el)
47-
hideSiblings(el.parentElement as HTMLElement)
48-
el.classList.add(styles['full-screen-cert'])
49-
})
50-
5134
return (
5235
<>
5336
<LoadingSpinner hide={profileReady} />
5437

55-
<div ref={wrapElRef}>
56-
{profileReady && profile && (
57-
<CertificateView
58-
certification={certificationParam}
59-
profile={profile}
60-
provider={providerParam}
61-
onCertificationNotCompleted={() => { }}
62-
hideActions
63-
viewStyle={queryParams.get(getViewStyleParamKey()) as CertificateViewStyle}
64-
/>
65-
)}
66-
</div>
38+
{profileReady && profile && (
39+
<CertificateView
40+
certification={certificationParam}
41+
profile={profile}
42+
provider={providerParam}
43+
onCertificationNotCompleted={() => { }}
44+
fullScreenCertLayout
45+
/>
46+
)}
6747
</>
6848
)
6949
}

‎src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss renamed to ‎src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss

File renamed without changes.

0 commit comments

Comments
 (0)