Merge pull request #460 from topcoder-platform/TCA-710_TCA-716

TCA-710 and TCA-716 -> TCA-701

Author: kkartunov

README.md

@@ -151,7 +151,13 @@ The `yarn start` command serves the site using the cert and key in the /ssl dire
 
 By overriding the app to use <b>port 443</b>, you can use the authorized URL and trust the root CA to avoid SSL errors in the browser.
 
->**NOTE:** Mac users will require running the app with elevated permissions in order to use a port lower than 500. 
+>**NOTE:** Mac users will require running the app with elevated permissions in order to use a port lower than 500.
+
+Easy way to overcome elevated permissions is to make use of:
+
+```
+sudo setcap 'cap_net_bind_service=+ep' `which node`
+```
 
 For easier development, it is recommended that you add this certificate to your trusted root authorities and as a trused cert in your browser. Google your browser and OS for more info on how to trust cert authorities.
 

src-ts/lib/svgs/icon-level-1.svg

@@ -19,6 +19,13 @@ import { ReactComponent as SocialShareTwitter } from './social-share-twitter.svg
 import { ReactComponent as SocialIconTwitter } from './social-tw-icon.svg'
 import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
+import { ReactComponent as TcAcademyLogoSvg } from './tc-academy-logo.svg'
+import { ReactComponent as TcLogoSvg } from './tc-logo.svg'
+import { ReactComponent as FccLogoSvg } from './vendor-fcc-logo.svg'
+import { ReactComponent as FccLogoBlackSvg } from './vendor-fcc-logo-black.svg'
+import { ReactComponent as IconLevel1 } from './icon-level-1.svg'
+import { ReactComponent as IconLevel2 } from './icon-level-2.svg'
+import { ReactComponent as IconLevel3 } from './icon-level-3.svg'
 
 export {
     ActiveTabTipIcon,
@@ -40,5 +47,12 @@ export {
     GithubIcon,
     SaveForLaterIcon,
     IconCheck,
+    TcAcademyLogoSvg,
+    TcLogoSvg,
+    FccLogoSvg,
+    FccLogoBlackSvg,
+    IconLevel1,
+    IconLevel2,
+    IconLevel3,
 }
 export * from './icon-wrapper'

src-ts/lib/svgs/icon-level-2.svg

@@ -6,10 +6,9 @@ import { LearnCertificateTrackType } from '../../../learn-lib'
 
 import { CertificateBgPattern } from './certificate-bg-pattern'
 import { CourseCard } from './course-card'
-import { ReactComponent as TcAcademyLogoSvg } from './tc-academy-logo.svg'
-import { ReactComponent as TcLogoSvg } from './tc-logo.svg'
-import { ReactComponent as FccLogoSvg } from './vendor-fcc-logo.svg'
+
 import styles from './Certificate.module.scss'
+import { FccLogoSvg, TcAcademyLogoSvg, TcLogoSvg } from '../../../../../lib'
 
 interface CertificateProps {
     completedDate?: string

src-ts/lib/svgs/icon-level-3.svg

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

src-ts/lib/svgs/index.ts

@@ -0,0 +1,5 @@
+export * from './tca-certifications-provider-data.model'
+export * from './tca-certifications.provider'
+export * from './tca-certificate-status-type'
+export * from './tca-certificate-level-type'
+export * from './tca-certification.model'

src-ts/tools/learn/course-certificate/certificate-view/certificate/tc-academy-logo.svg renamed to src-ts/lib/svgs/tc-academy-logo.svg

@@ -0,0 +1 @@
+export type TCACertificationLearnLevel = 'Beginner' | 'Intermediate' | 'Expert' | 'All Levels'

src-ts/tools/learn/course-certificate/certificate-view/certificate/tc-logo.svg renamed to src-ts/lib/svgs/tc-logo.svg

@@ -0,0 +1 @@
+export type TCACertificationStatus = 'active' | 'inactive' | 'coming_soon' | 'deprecated'

src-ts/lib/svgs/vendor-fcc-logo-black.svg

@@ -0,0 +1,15 @@
+import { TCACertificationLearnLevel } from './tca-certificate-level-type'
+import { TCACertificationStatus } from './tca-certificate-status-type'
+
+export interface TCACertification {
+    id: number
+    title: string
+    description: string
+    estimatedCompletionTime: number
+    status: TCACertificationStatus
+    sequentialCourses: boolean
+    learnerLevel: TCACertificationLearnLevel
+    certificationCategoryId: string
+    stripeProductId?: string
+    skills: string[]
+}

src-ts/tools/learn/course-certificate/certificate-view/certificate/vendor-fcc-logo.svg renamed to src-ts/lib/svgs/vendor-fcc-logo.svg

@@ -0,0 +1,8 @@
+import { TCACertification } from './tca-certification.model'
+
+export interface TCACertificationsProviderData {
+    certifications: Array<TCACertification>
+    error: boolean
+    loading: boolean
+    ready: boolean
+}

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

@@ -0,0 +1,71 @@
+/* eslint-disable max-len */
+/* eslint-disable sort-keys */
+/* eslint-disable default-param-last */
+import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
+
+import { learnUrlGet } from '../../functions'
+import { useSwrCache } from '../../learn-swr'
+
+import { TCACertificationsProviderData } from './tca-certifications-provider-data.model'
+import { TCACertification } from './tca-certification.model'
+
+interface TCACertificationsAllProviderOptions {
+    enabled?: boolean
+}
+
+export function useGetAllTCACertifications(
+    options?: TCACertificationsAllProviderOptions,
+): TCACertificationsProviderData {
+
+    const url: string = learnUrlGet(
+        'topcoder-certifications',
+    )
+    const swrCacheConfig: SWRConfiguration = useSwrCache(url)
+
+    const { data, error }: SWRResponse = useSWR(url, {
+        ...swrCacheConfig,
+        isPaused: () => options?.enabled === false,
+    })
+
+    return {
+        certifications: 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',
+        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',
+        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'],
+    }]
+
+    const error = {}
+
+    return {
+        certifications: data ?? [],
+        error: !!error,
+        loading: !data,
+        ready: !!data,
+    }
+}

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

@@ -1,3 +1,11 @@
 import { ReactComponent as LearningHat } from './learning-hat.svg'
+import { ReactComponent as CertIcon } from './cert-icon.svg'
+import { ReactComponent as CourseIcon } from './course-icon.svg'
+import { ReactComponent as CrowdIcon } from './crowd-icon.svg'
 
-export { LearningHat }
+export {
+    LearningHat,
+    CertIcon,
+    CourseIcon,
+    CrowdIcon,
+}

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

@@ -2,10 +2,12 @@ import { FC } from 'react'
 import classNames from 'classnames'
 
 import { PageSubheaderPortalId } from '../../../config'
-import { ContentLayout, LoadingSpinner, Portal } from '../../../lib'
+import { ContentLayout, LoadingSpinner, PageDivider, Portal } from '../../../lib'
 import {
     AllCertificationsProviderData,
+    TCACertificationsProviderData,
     useGetAllCertifications,
+    useGetAllTCACertificationsMOCK,
     useGetUserCertifications,
     UserCertificationsProviderData,
     WaveHero,
@@ -14,6 +16,8 @@ import '../../../lib/styles/index.scss'
 
 import { AvailableCoursesList } from './available-courses-list'
 import { ProgressBlock } from './progress-block'
+import { WhatTCACanDo } from './what-tca-cando'
+import { TCCertifications } from './tc-certifications'
 import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg'
 import styles from './WelcomePage.module.scss'
 
@@ -24,6 +28,9 @@ const WelcomePage: FC = () => {
 
     const coursesReady: boolean = allCertsData.ready && userCertsData.ready
 
+    // TODO: this hook is mocked - remove mock when API is available...
+    const allTCACertifications: TCACertificationsProviderData = useGetAllTCACertificationsMOCK()
+
     return (
         <ContentLayout>
 
@@ -42,9 +49,7 @@ const WelcomePage: FC = () => {
                                 The Topcoder Academy will provide you with learning opportunities
                                 in the form of guided learning paths.
                                 You will have the opportunity to learn new skills that will better
-                                prepare you to earn on the Topcoder platform.<br />
-                                <br />
-                                We look forward to learning with you!
+                                prepare you to earn on the Topcoder platform.
                             `}
                             theme='light'
                         >
@@ -61,6 +66,14 @@ const WelcomePage: FC = () => {
                 <div className={classNames(styles['courses-section'], 'full-height-frame')}>
                     <LoadingSpinner hide={coursesReady} />
 
+                    <WhatTCACanDo />
+
+                    <PageDivider />
+
+                    <TCCertifications certifications={allTCACertifications.certifications} />
+
+                    <PageDivider />
+
                     {coursesReady && (
                         <AvailableCoursesList
                             certifications={allCertsData.certifications}