Merge pull request #470 from topcoder-platform/TCA-870-cert-generation

TCA-870-cert-generation  -> TCA-792_tc-certifications-epic

Author: kkartunov

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

@@ -1,7 +1,6 @@
 import { FC, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
 import classNames from 'classnames'
-import html2canvas from 'html2canvas'
 
 import {
     FacebookSocialShareBtn,
@@ -13,18 +12,20 @@ import {
     UserProfile,
 } from '../../../../lib'
 import {
+    ActionButton,
     AllCertificationsProviderData,
     CoursesProviderData,
+    useCertificateCanvas,
+    useCertificatePrint,
+    useCertificateScaling,
     useGetCertification,
     useGetCourses,
     useGetUserCompletedCertifications,
     UserCompletedCertificationsProviderData,
 } from '../../learn-lib'
 import { getCoursePath, getUserCertificateSsr } from '../../learn.routes'
 
-import { ActionButton } from './action-button'
 import { Certificate } from './certificate'
-import { useCertificateScaling } from './use-certificate-scaling.hook'
 import styles from './CertificateView.module.scss'
 
 export type CertificateViewStyle = 'large-container' | undefined
@@ -102,27 +103,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
         navigate(coursePath)
     }, [coursePath, navigate])
 
-    const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCallback(async () => {
-
-        if (!certificateElRef.current) {
-            return undefined
-        }
-
-        return html2canvas(certificateElRef.current, {
-            // when canvas iframe is ready, remove text gradients
-            // as they're not supported in html2canvas
-            onclone: (doc: Document) => {
-                [].forEach.call(doc.querySelectorAll('.grad'), (el: HTMLDivElement) => {
-                    el.classList.remove('grad')
-                })
-            },
-            // scale (pixelRatio) doesn't matter for the final ceriticate, use 1
-            scale: 1,
-            // use the same (ideal) window size when rendering the certificate
-            windowHeight: 700,
-            windowWidth: 1024,
-        })
-    }, [])
+    const getCertificateCanvas: () => Promise<HTMLCanvasElement | void> = useCertificateCanvas(certificateElRef)
 
     const handleDownload: () => Promise<void> = useCallback(async () => {
 
@@ -133,23 +114,7 @@ const CertificateView: FC<CertificateViewProps> = (props: CertificateViewProps)
 
     }, [certificationTitle, getCertificateCanvas])
 
-    const handlePrint: () => Promise<void> = useCallback(async () => {
-
-        const canvas: HTMLCanvasElement | void = await getCertificateCanvas()
-        if (!canvas) {
-            return
-        }
-
-        const printWindow: Window | null = window.open('')
-        if (!printWindow) {
-            return
-        }
-
-        printWindow.document.body.appendChild(canvas)
-        printWindow.document.title = certificationTitle
-        printWindow.focus()
-        printWindow.print()
-    }, [certificationTitle, getCertificateCanvas])
+    const handlePrint: () => Promise<void> = useCertificatePrint(certificateElRef, certificationTitle)
 
     useEffect(() => {
         if (ready && !hasCompletedTheCertification) {

src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.module.scss renamed to src-ts/tools/learn/learn-lib/action-button/ActionButton.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles/includes';
+@import '../../../../lib/styles/includes';
 
 .wrap {
     @include icon-mxx;

src-ts/tools/learn/course-certificate/certificate-view/action-button/ActionButton.tsx renamed to src-ts/tools/learn/learn-lib/action-button/ActionButton.tsx

@@ -4,4 +4,5 @@ export * from './lesson-provider'
 export * from './resource-provider-provider'
 export * from './user-certifications-provider'
 export * from './user-completed-certifications-provider'
+export * from './user-completed-tca-certifications-provider'
 export * from './tca-certifications-provider'

src-ts/tools/learn/course-certificate/certificate-view/action-button/index.ts renamed to src-ts/tools/learn/learn-lib/action-button/index.ts

@@ -0,0 +1,7 @@
+export interface TCACertificationCategory {
+    id: number
+    category: string
+    track: string
+    createdAt: Date
+    updatedAt: Date
+}

src-ts/tools/learn/learn-lib/data-providers/index.ts

@@ -1,22 +1,26 @@
 import { TCACertificationLearnLevel } from './tca-certificate-level-type'
 import { TCACertificationStatus } from './tca-certificate-status-type'
+import { TCACertificationCategory } from './tca-certification-category.model'
 import { TcaProviderType } from './tca-provider-type'
 
 export interface TCACertification {
+    id: number
+    title: string
     certificationCategoryId: string
     coursesCount: number
     dashedName: string
     description: string
-    estimatedCompletionTime: number
-    id: number
     introText: string
+    estimatedCompletionTime: number
     learnerLevel: TCACertificationLearnLevel
-    learningOutcomes: Array<string>
-    prerequisites: Array<string>
+    certificationCategory: TCACertificationCategory
+    stripeProductId?: string
+    skills: string[]
+    learningOutcomes: string[]
+    prerequisites: string[]
+    createdAt: Date
+    updatedAt: Date
     providers: Array<TcaProviderType>
     sequentialCourses: boolean
-    skills: string[]
     status: TCACertificationStatus
-    stripeProductId?: string
-    title: string
 }

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-category.model.ts

@@ -6,3 +6,10 @@ export interface TCACertificationsProviderData {
     loading: boolean
     ready: boolean
 }
+
+export interface TCACertificationProviderData {
+    certification: TCACertification
+    error: boolean
+    loading: boolean
+    ready: boolean
+}

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

@@ -1,24 +1,51 @@
 /* eslint-disable max-len */
 /* eslint-disable sort-keys */
 /* eslint-disable default-param-last */
+import { find } from 'lodash'
 import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
 
+import { LEARN_PATHS } from '../../../learn.routes'
 import { learnUrlGet } from '../../functions'
 import { useSwrCache } from '../../learn-swr'
 
-import { TCACertificationsProviderData } from './tca-certifications-provider-data.model'
+import { TCACertificationProviderData, TCACertificationsProviderData } from './tca-certifications-provider-data.model'
 import { TCACertification } from './tca-certification.model'
 
 interface TCACertificationsAllProviderOptions {
     enabled?: boolean
 }
 
+const TCACertificationMock: TCACertification[] = [{
+    id: 1,
+    title: 'Web Development Fundamentals',
+    dashedName: 'web-development-fundamentals',
+    description: 'The Web Developer Fundamentals certification will teach you the basics of HTML, CSS, javascript, front end libraries and will also introduce you to backend development.',
+    estimatedCompletionTime: 4,
+    learnerLevel: 'Beginner',
+    sequentialCourses: false,
+    status: 'active',
+    certificationCategoryId: '',
+    skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
+},
+{
+    id: 2,
+    title: 'Data Science Fundamentals',
+    dashedName: 'data-science-fundamentals',
+    description: 'The Data Science Fundamentals certification will teach you the basics of scientific computing, Data Analysis and machine learning while using Python. Additionally, you will learn about data visualization.',
+    estimatedCompletionTime: 14,
+    status: 'active',
+    sequentialCourses: false,
+    learnerLevel: 'Expert',
+    certificationCategoryId: '',
+    skills: ['Python', 'TensorFlow', 'JSON'],
+}]
+
 export function useGetAllTCACertifications(
     options?: TCACertificationsAllProviderOptions,
 ): TCACertificationsProviderData {
 
     const url: string = learnUrlGet(
-        'topcoder-certifications',
+        LEARN_PATHS.tcaCertifications,
     )
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
 
@@ -38,10 +65,10 @@ export function useGetAllTCACertifications(
 export function useGetTCACertification(
     certification: string,
     options?: TCACertificationsAllProviderOptions,
-): TCACertificationsProviderData {
+): TCACertificationProviderData {
 
     const url: string = learnUrlGet(
-        'topcoder-certifications',
+        LEARN_PATHS.tcaCertifications,
         certification,
     )
     const swrCacheConfig: SWRConfiguration = useSwrCache(url)
@@ -52,89 +79,34 @@ export function useGetTCACertification(
     })
 
     return {
-        certifications: data ?? [],
+        certification: data,
         error: !!error,
         loading: !data,
         ready: !!data,
     }
 }
 
 // TODO: remove when integrated with API
-export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
-    const data: TCACertification[] = [{
-        id: 1,
-        title: 'Web Development Fundamentals',
-        dashedName: 'web-developmnt-fundamentals',
-        description: 'The Web Developer Fundamentals certification will teach you the basics of HTML, CSS, javascript, front end libraries and will also introduce you to backend development.',
-        introText: 'Introducing our Web Development fundamentals certification! Start your certification journey with Topcoder.',
-        estimatedCompletionTime: 4,
-        learnerLevel: 'Beginner',
-        sequentialCourses: false,
-        status: 'active',
-        certificationCategoryId: '',
-        skills: ['HTML', 'CSS', 'JavaScript', 'HTML1', 'CSS2', 'JavaScript2', 'HTML3', 'CSS3', 'JavaScript3', 'HTML4', 'CSS4', 'JavaScript4'],
-        prerequisites: [],
-        coursesCount: 4,
-        providers: ['freecodecamp', 'topcoder'],
-        learningOutcomes: [],
-    },
-    {
-        id: 2,
-        title: 'Data Science Fundamentals',
-        dashedName: 'data-science-fundamentals',
-        description: 'The Data Science Fundamentals certification will teach you the basics of scientific computing, Data Analysis and machine learning while using Python. Additionally, you will learn about data visualization.',
-        introText: '',
-        estimatedCompletionTime: 14,
-        status: 'active',
-        sequentialCourses: false,
-        learnerLevel: 'Expert',
-        certificationCategoryId: '',
-        skills: ['Python', 'TensorFlow', 'JSON'],
-        prerequisites: [],
-        coursesCount: 4,
-        providers: ['freecodecamp', 'topcoder'],
-        learningOutcomes: [],
-    }]
+export function useGetTCACertificationMOCK(
+    certification: string,
+): TCACertificationProviderData {
+
+    const data: TCACertification | undefined = find(TCACertificationMock, { dashedName: certification })
 
     return {
-        certifications: data ?? [],
+        certification: data,
         error: false,
         loading: !data,
         ready: !!data,
     }
 }
 
 // TODO: remove when integrated with API
-export function useGetTCACertificationMOCK(
-    certification: string,
-): TCACertificationsProviderData {
-    const data: TCACertification[] = [{
-        id: 1,
-        title: 'Web Development Fundamentals',
-        dashedName: 'web-developmnt-fundamentals',
-        description: 'The Web Developer Fundamentals certification will teach you the basics of HTML, CSS, javascript, front end libraries and will also introduce you to backend development.',
-        introText: 'Introducing our Web Development fundamentals certification! Start your certification journey with Topcoder.',
-        estimatedCompletionTime: 4,
-        learnerLevel: 'Beginner',
-        sequentialCourses: false,
-        status: 'active',
-        certificationCategoryId: '',
-        skills: ['HTML', 'CSS', 'JavaScript', 'HTML1', 'CSS2', 'JavaScript2', 'HTML3', 'CSS3', 'JavaScript3', 'HTML4', 'CSS4', 'JavaScript4'],
-        prerequisites: [],
-        coursesCount: 4,
-        providers: ['freecodecamp', 'topcoder'],
-        learningOutcomes: [
-            'Fundamental skills required to begin a career in web development',
-            'Introduction to React and other front end libraries - a jumping off point to build awesome websites',
-            'Introduction to Java Script - one of the languages every web developer should know for web development and building basic algorithms and data structures',
-            'Introduction to backend development with Node and APIs',
-        ],
-    }]
-
+export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
     return {
-        certifications: data ?? [],
+        certifications: TCACertificationMock ?? [],
         error: false,
-        loading: !data,
-        ready: !!data,
+        loading: !TCACertificationMock,
+        ready: !!TCACertificationMock,
     }
 }

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certifications-provider-data.model.ts

@@ -0,0 +1,3 @@
+export * from './user-completed-tca-certifications-provider-data.model'
+export * from './user-completed-tca-certifications.provider'
+export * from './user-completed-tca-certification.model'

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

@@ -0,0 +1,5 @@
+export interface UserCompletedTCACertification {
+    status: string
+    completedDate: string
+    trackType: string
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/index.ts

@@ -0,0 +1,7 @@
+import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
+
+export interface UserCompletedTCACertificationsProviderData {
+    certifications: ReadonlyArray<UserCompletedTCACertification>
+    loading: boolean
+    ready: boolean
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certification.model.ts

@@ -0,0 +1,48 @@
+import useSWR, { SWRResponse } from 'swr'
+
+import { learnUrlGet } from '../../functions'
+
+import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
+import { UserCompletedTCACertificationsProviderData } from './user-completed-tca-certifications-provider-data.model'
+
+const COMPLETED_CERTS_MOCK = [
+    { status: 'comleted', trackType: 'web dev', completedDate: 'Dec 19, 2022' },
+]
+
+export function useGetUserTCACompletedCertifications(
+    userId?: number,
+    certification?: string,
+): UserCompletedTCACertificationsProviderData {
+
+    // TODO: update to actual API endpoint URL when ready
+    const url: string = learnUrlGet('completed-certifications', `${userId}`)
+
+    const { data, error }: SWRResponse<ReadonlyArray<UserCompletedTCACertification>> = useSWR(url)
+
+    let certifications: ReadonlyArray<UserCompletedTCACertification> = data ?? []
+
+    if (certification) {
+        certifications = certifications
+            .filter(c => (!certification || c.certification === certification))
+    }
+
+    return {
+        certifications,
+        loading: !data && !error,
+        ready: !!data || !!error,
+    }
+}
+
+// TODO: remove when API ready
+export function useGetUserTCACompletedCertificationsMOCK(
+    userId?: number,
+    certification?: string,
+): UserCompletedTCACertificationsProviderData {
+    const data = COMPLETED_CERTS_MOCK
+
+    return {
+        certifications: data,
+        loading: !data,
+        ready: !!data,
+    }
+}

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certifications-provider-data.model.ts

@@ -1,3 +1,4 @@
+export * from './action-button'
 export * from './collapsible-pane'
 export * from './course-badge'
 export * from './course-outline'
@@ -9,4 +10,7 @@ export * from './learn-level-icon'
 export * from './learn-swr'
 export * from './my-course-card'
 export * from './svgs'
+export * from './use-certificate-canvas-hook'
+export * from './use-certificate-print-hook'
+export * from './use-certificate-scaling-hook'
 export * from './wave-hero'

src-ts/tools/learn/learn-lib/data-providers/user-completed-tca-certifications-provider/user-completed-tca-certifications.provider.tsx

@@ -0,0 +1 @@
+export * from './useCertificateCanvas.hook'