Skip to content

Commit 107260b

Browse files
kkartunovkkartunov
committed
TCA-870 extract canvas and print renderers to hooks
1 parent 426a69b commit 107260b

File tree

7 files changed

+71
-78
lines changed

7 files changed

+71
-78
lines changed

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

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
22
import { NavigateFunction, useNavigate } from 'react-router-dom'
33
import classNames from 'classnames'
4-
import html2canvas from 'html2canvas'
54

65
import {
76
FacebookSocialShareBtn,
@@ -16,6 +15,8 @@ import {
1615
ActionButton,
1716
AllCertificationsProviderData,
1817
CoursesProviderData,
18+
useCertificateCanvas,
19+
useCertificatePrint,
1920
useCertificateScaling,
2021
useGetCertification,
2122
useGetCourses,
@@ -102,27 +103,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
102103
navigate(coursePath)
103104
}, [coursePath, navigate])
104105

105-
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCallback(async () => {
106-
107-
if (!certificateElRef.current) {
108-
return undefined
109-
}
110-
111-
return html2canvas(certificateElRef.current, {
112-
// when canvas iframe is ready, remove text gradients
113-
// as they're not supported in html2canvas
114-
onclone: (doc: Document) => {
115-
[].forEach.call(doc.querySelectorAll('.grad'), (el: HTMLDivElement) => {
116-
el.classList.remove('grad')
117-
})
118-
},
119-
// scale (pixelRatio) doesn't matter for the final ceriticate, use 1
120-
scale: 1,
121-
// use the same (ideal) window size when rendering the certificate
122-
windowHeight: 700,
123-
windowWidth: 1024,
124-
})
125-
}, [])
106+
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
126107

127108
const handleDownload: () => Promise<void> = useCallback(async () => {
128109

@@ -133,23 +114,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
133114

134115
}, [certificationTitle, getCertificateCanvas])
135116

136-
const handlePrint: () => Promise<void> = useCallback(async () => {
137-
138-
const canvas: HTMLCanvasElement | void = await getCertificateCanvas()
139-
if (!canvas) {
140-
return
141-
}
142-
143-
const printWindow: Window | null = window.open('')
144-
if (!printWindow) {
145-
return
146-
}
147-
148-
printWindow.document.body.appendChild(canvas)
149-
printWindow.document.title = certificationTitle
150-
printWindow.focus()
151-
printWindow.print()
152-
}, [certificationTitle, getCertificateCanvas])
117+
const handlePrint: () => Promise<void> = useCertificatePrint(certificateElRef, certificationTitle)
153118

154119
useEffect(() => {
155120
if (ready && !hasCompletedTheCertification) {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,7 @@ export * from './learn-level-icon'
1010
export * from './learn-swr'
1111
export * from './my-course-card'
1212
export * from './svgs'
13+
export * from './use-certificate-canvas-hook'
14+
export * from './use-certificate-print-hook'
1315
export * from './use-certificate-scaling-hook'
1416
export * from './wave-hero'

‎src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './useCertificateCanvas.hook'

‎src-ts/tools/learn/learn-lib/use-certificate-canvas-hook/useCertificateCanvas.hook.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { MutableRefObject, useCallback } from 'react'
2+
import html2canvas from 'html2canvas'
3+
4+
export function useCertificateCanvas(
5+
certificateElRef: MutableRefObject<HTMLDivElement | undefined>,
6+
): () => Promise<HTMLCanvasElement | void> {
7+
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCallback(async () => {
8+
9+
if (!certificateElRef.current) {
10+
return undefined
11+
}
12+
13+
return html2canvas(certificateElRef.current, {
14+
// when canvas iframe is ready, remove text gradients
15+
// as they're not supported in html2canvas
16+
onclone: (doc: Document) => {
17+
[].forEach.call(doc.querySelectorAll('.grad'), (el: HTMLDivElement) => {
18+
el.classList.remove('grad')
19+
})
20+
},
21+
// scale (pixelRatio) doesn't matter for the final ceriticate, use 1
22+
scale: 1,
23+
// use the same (ideal) window size when rendering the certificate
24+
windowHeight: 700,
25+
windowWidth: 1024,
26+
})
27+
}, [certificateElRef])
28+
29+
return getCertificateCanvas
30+
}

‎src-ts/tools/learn/learn-lib/use-certificate-print-hook/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './useCertificatePrint.hook'

‎src-ts/tools/learn/learn-lib/use-certificate-print-hook/useCertificatePrint.hook.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { MutableRefObject, useCallback } from 'react'
2+
import { useCertificateCanvas } from '../use-certificate-canvas-hook'
3+
4+
export function useCertificatePrint(
5+
certificateElRef: MutableRefObject<HTMLDivElement | undefined>,
6+
certificationTitle: string,
7+
): () => Promise<void> {
8+
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
9+
10+
const handlePrint: () => Promise<void> = useCallback(async () => {
11+
12+
const canvas: HTMLCanvasElement | void = await getCertificateCanvas()
13+
if (!canvas) {
14+
return
15+
}
16+
17+
const printWindow: Window | null = window.open('')
18+
if (!printWindow) {
19+
return
20+
}
21+
22+
printWindow.document.body.appendChild(canvas)
23+
printWindow.document.title = certificationTitle
24+
printWindow.focus()
25+
printWindow.print()
26+
}, [certificationTitle, getCertificateCanvas])
27+
28+
return handlePrint
29+
}

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

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
22
import { NavigateFunction, useNavigate } from 'react-router-dom'
33
import classNames from 'classnames'
4-
import html2canvas from 'html2canvas'
54

65
import {
76
FacebookSocialShareBtn,
@@ -15,6 +14,8 @@ import {
1514
import {
1615
ActionButton,
1716
TCACertificationProviderData,
17+
useCertificateCanvas,
18+
useCertificatePrint,
1819
useCertificateScaling,
1920
useGetTCACertificationMOCK,
2021
useGetUserTCACompletedCertificationsMOCK,
@@ -89,27 +90,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
8990
navigate(tcaCertificationPath)
9091
}, [tcaCertificationPath, navigate])
9192

92-
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCallback(async () => {
93-
94-
if (!certificateElRef.current) {
95-
return undefined
96-
}
97-
98-
return html2canvas(certificateElRef.current, {
99-
// when canvas iframe is ready, remove text gradients
100-
// as they're not supported in html2canvas
101-
onclone: (doc: Document) => {
102-
[].forEach.call(doc.querySelectorAll('.grad'), (el: HTMLDivElement) => {
103-
el.classList.remove('grad')
104-
})
105-
},
106-
// scale (pixelRatio) doesn't matter for the final ceriticate, use 1
107-
scale: 1,
108-
// use the same (ideal) window size when rendering the certificate
109-
windowHeight: 700,
110-
windowWidth: 1024,
111-
})
112-
}, [])
93+
const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
11394

11495
const handleDownload: () => Promise<void> = useCallback(async () => {
11596

@@ -120,23 +101,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
120101

121102
}, [certificationTitle, getCertificateCanvas])
122103

123-
const handlePrint: () => Promise<void> = useCallback(async () => {
124-
125-
const canvas: HTMLCanvasElement | void = await getCertificateCanvas()
126-
if (!canvas) {
127-
return
128-
}
129-
130-
const printWindow: Window | null = window.open('')
131-
if (!printWindow) {
132-
return
133-
}
134-
135-
printWindow.document.body.appendChild(canvas)
136-
printWindow.document.title = certificationTitle
137-
printWindow.focus()
138-
printWindow.print()
139-
}, [certificationTitle, getCertificateCanvas])
104+
const handlePrint: () => Promise<void> = useCertificatePrint(certificateElRef, certificationTitle)
140105

141106
useEffect(() => {
142107
if (ready && !hasCompletedTheCertification) {

0 commit comments

Comments
 (0)