Merge pull request #472 from topcoder-platform/TCA-935-homepage-API-integration

TCA-935 homepage integration init

Author: kkartunov

src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode, useContext } from 'react'
 import { Params, useParams } from 'react-router-dom'
 
 import { PageSubheaderPortalId } from '../../../config'
-import { TCACertificationsProviderData, useGetTCACertificationMOCK, useLearnBreadcrumb, WaveHero } from '../learn-lib'
+import { TCACertificationProviderData, useGetTCACertificationMOCK, useLearnBreadcrumb, WaveHero } from '../learn-lib'
 import {
     Breadcrumb,
     BreadcrumbItemModel,
@@ -39,9 +39,9 @@ const CertificationDetailsPage: FC<{}> = () => {
     const { initialized: profileReady }: ProfileContextData = useContext(profileContext)
 
     const {
-        certifications: [certification],
+        certification,
         ready: certificateReady,
-    }: TCACertificationsProviderData = useGetTCACertificationMOCK(dashedName as string)
+    }: TCACertificationProviderData = useGetTCACertificationMOCK(dashedName as string)
 
     const ready: boolean = profileReady && certificateReady
 
@@ -100,8 +100,8 @@ const CertificationDetailsPage: FC<{}> = () => {
                     <WaveHero
                         title={(
                             <HeroTitle
+                                certification={certification}
                                 certTitle={certification.title}
-                                providers={certification.providers}
                             />
                         )}
                         theme='grey'

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -2,8 +2,7 @@ import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
 import { Button, IconOutline, IconSolid, Tooltip } from '../../../../lib'
-import { ProvidersLogoList } from '../providers-logo-list'
-import { LearnLevelIcon, TCACertification } from '../../learn-lib'
+import { LearnLevelIcon, ProvidersLogoList, TCACertification } from '../../learn-lib'
 
 import img from './certificate-placeholder.jpg'
 import styles from './CertificationDetailsSidebar.module.scss'

src-ts/tools/learn/certification-details/hero-title/HeroTitle.tsx

@@ -1,25 +1,28 @@
 import { FC } from 'react'
 
-import { DevCertBadgeSvg, TCACertification } from '../../learn-lib'
-import { ProvidersLogoList } from '../providers-logo-list'
+import { TCACertBadge, TCACertification } from '../../learn-lib'
+import { ProvidersLogoList } from '../../learn-lib/providers-logo-list'
 
 import styles from './HeroTitle.module.scss'
 
 interface HeroTitleProps {
+    certification: TCACertification
     certTitle: string
-    providers: TCACertification['providers']
 }
 
 const HeroTitle: FC<HeroTitleProps> = (props: HeroTitleProps) => (
     <div className={styles.wrap}>
-        <DevCertBadgeSvg />
+        <TCACertBadge
+            learnerLevel={props.certification.learnerLevel}
+            certificationCategory={props.certification.certificationCategory}
+        />
         <div className={styles.text}>
             <h1 className={styles.title}>
                 {props.certTitle}
             </h1>
             <ProvidersLogoList
                 label='Content from'
-                providers={props.providers}
+                providers={props.certification.providers}
             />
         </div>
     </div>

src-ts/tools/learn/certification-details/providers-logo-list/providers-logo-map.tsx

@@ -4,3 +4,8 @@ export * from './tca-certificate-status-type'
 export * from './tca-certificate-level-type'
 export * from './tca-certification.model'
 export * from './tca-provider-type'
+export * from './tca-certification-provider.model-base'
+export * from './tca-certification-provider.model'
+export * from './tca-certification-resource.model'
+export * from './tca-certification-resourceable.type'
+export * from './tca-certification-category.model'

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

@@ -0,0 +1,8 @@
+import { TCAProviderType } from './tca-provider-type'
+
+export interface TCACertificationProviderBase {
+    id: number
+    name: TCAProviderType
+    description: string
+    url: string
+}

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

@@ -0,0 +1,7 @@
+import { TCACertificationProviderBase } from './tca-certification-provider.model-base'
+import { TCACertificationResource } from './tca-certification-resource.model'
+
+export interface TCACertificationProvider extends TCACertificationProviderBase {
+    attributionStatement: string
+    CertificationResource: TCACertificationResource
+}

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

@@ -0,0 +1,15 @@
+import { TCACertificationResourceable } from './tca-certification-resourceable.type'
+
+export interface TCACertificationResource {
+    id: number
+    topcoderCertificationId: number
+    resourceProviderId: number
+    resourceableId: number
+    resourceableType: TCACertificationResourceable
+    displayOrder: number
+    completionOrder: number
+    resourceDescription: string
+    resourceTitle: string
+    createdAt: Date
+    updatedAt: Date
+}

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

@@ -0,0 +1 @@
+export type TCACertificationResourceable = 'FreeCodeCampCertification'

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

@@ -1,26 +1,30 @@
 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'
+import { TCACertificationProvider } from './tca-certification-provider.model'
+import { TCACertificationProviderBase } from './tca-certification-provider.model-base'
+import { TCACertificationResource } from './tca-certification-resource.model'
 
 export interface TCACertification {
     id: number
     title: string
-    certificationCategoryId: string
-    coursesCount: number
     dashedName: string
     description: string
     introText: string
     estimatedCompletionTime: number
+    status: TCACertificationStatus
+    sequentialCourses: boolean
     learnerLevel: TCACertificationLearnLevel
-    certificationCategory: TCACertificationCategory
+    certificationCategoryId: string
     stripeProductId?: string
     skills: string[]
     learningOutcomes: string[]
     prerequisites: string[]
     createdAt: Date
     updatedAt: Date
-    providers: Array<TcaProviderType>
-    sequentialCourses: boolean
-    status: TCACertificationStatus
+    certificationResources: Array<TCACertificationResource>
+    certificationCategory: TCACertificationCategory
+    resourceProviders: Array<TCACertificationProvider>
+    coursesCount: number
+    providers: Array<TCACertificationProviderBase>
 }

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

@@ -26,6 +26,17 @@ const TCACertificationMock: TCACertification[] = [{
     status: 'active',
     certificationCategoryId: '',
     skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
+    providers: [{
+        "id": 1,
+        "name": "freeCodeCamp",
+        "description": "Free courses about programming and some such",
+        "url": "freeCodeCamp.org"
+    }],
+    coursesCount: 5,
+    learningOutcomes: ['HTML', 'CSS', 'JavaScript'],
+    certificationCategory: {
+        "track": "DEV",
+    },
 },
 {
     id: 2,
@@ -38,6 +49,17 @@ const TCACertificationMock: TCACertification[] = [{
     learnerLevel: 'Expert',
     certificationCategoryId: '',
     skills: ['Python', 'TensorFlow', 'JSON'],
+    providers: [{
+        "id": 1,
+        "name": "freeCodeCamp",
+        "description": "Free courses about programming and some such",
+        "url": "freeCodeCamp.org"
+    }],
+    coursesCount: 1,
+    learningOutcomes: ['Python', 'TensorFlow', 'JSON'],
+    certificationCategory: {
+        "track": "DATASCIENCE",
+    },
 }]
 
 export function useGetAllTCACertifications(
@@ -91,7 +113,7 @@ export function useGetTCACertificationMOCK(
     certification: string,
 ): TCACertificationProviderData {
 
-    const data: TCACertification | undefined = find(TCACertificationMock, { dashedName: certification })
+    const data: TCACertification = find(TCACertificationMock, { dashedName: certification })
 
     return {
         certification: data,

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

@@ -1 +1 @@
-export type TcaProviderType = 'freecodecamp' | 'topcoder'
+export type TCAProviderType = 'freeCodeCamp' | 'Topcoder'

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

@@ -9,7 +9,9 @@ export * from './learn-breadcrumb-provider'
 export * from './learn-level-icon'
 export * from './learn-swr'
 export * from './my-course-card'
+export * from './providers-logo-list'
 export * from './svgs'
+export * from './tca-cert-badge'
 export * from './use-certificate-canvas-hook'
 export * from './use-certificate-print-hook'
 export * from './use-certificate-scaling-hook'

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

@@ -1,7 +1,7 @@
 import { FC, Fragment } from 'react'
 import classNames from 'classnames'
 
-import { TCACertification } from '../../learn-lib'
+import { TCACertification } from '..'
 
 import { getProviderLogo } from './providers-logo-map'
 import styles from './ProvidersLogoList.module.scss'
@@ -19,7 +19,7 @@ const ProvidersLogoList: FC<ProvidersLogoListProps> = (props: ProvidersLogoListP
         </span>
         <div>
             {props.providers.map(p => (
-                <Fragment key={p}>{getProviderLogo(p)}</Fragment>
+                <Fragment key={`${p.id}-${p.name}`}>{getProviderLogo(p.name)}</Fragment>
             ))}
         </div>
     </div>

src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.module.scss renamed to src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.module.scss

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+
+import { FccLogoBlackSvg, TcLogoSvg } from '../svgs'
+import { TCAProviderType } from '../data-providers'
+
+export const providersLogoMap: {[key in TCAProviderType]: ReactNode} = {
+    freeCodeCamp: <FccLogoBlackSvg />,
+    Topcoder: <TcLogoSvg />,
+}
+
+export function getProviderLogo(provider: TCAProviderType): ReactNode {
+    return providersLogoMap[provider]
+}

src-ts/tools/learn/certification-details/providers-logo-list/ProvidersLogoList.tsx renamed to src-ts/tools/learn/learn-lib/providers-logo-list/ProvidersLogoList.tsx

@@ -2,7 +2,12 @@ export { ReactComponent as LearningHat } from './learning-hat.svg'
 export { ReactComponent as CertIcon } from './cert-icon.svg'
 export { ReactComponent as CourseIcon } from './course-icon.svg'
 export { ReactComponent as CrowdIcon } from './crowd-icon.svg'
-export { ReactComponent as DevCertBadgeSvg } from './dev-cert-badge.svg'
 export { ReactComponent as TcLogoSvg } from './tc-logo.svg'
 export { ReactComponent as FccLogoBlackSvg } from './vendor-fcc-logo-black.svg'
 export { ReactComponent as IconCertifSvg } from './icon-certif.svg'
+export { ReactComponent as DSCertBadge1Svg } from './ds-cert-badge-1.svg'
+export { ReactComponent as DSCertBadge2Svg } from './ds-cert-badge-2.svg'
+export { ReactComponent as DSCertBadge3Svg } from './ds-cert-badge-3.svg'
+export { ReactComponent as WebDevCertBadge1Svg } from './web-dev-cert-badge-1.svg'
+export { ReactComponent as WebDevCertBadge2Svg } from './web-dev-cert-badge-2.svg'
+export { ReactComponent as WebDevCertBadge3Svg } from './web-dev-cert-badge-3.svg'

src-ts/tools/learn/certification-details/providers-logo-list/index.ts renamed to src-ts/tools/learn/learn-lib/providers-logo-list/index.ts

@@ -0,0 +1,8 @@
+@import '../../../../lib/styles/includes';
+
+.tcaBadge {
+    @include ltemd {
+        width: 60px;
+        height: 56px;
+    }
+}

src-ts/tools/learn/learn-lib/providers-logo-list/providers-logo-map.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+import {
+    DSCertBadge1Svg,
+    DSCertBadge2Svg,
+    DSCertBadge3Svg,
+    TCACertificationCategory,
+    TCACertificationLearnLevel,
+    WebDevCertBadge1Svg,
+    WebDevCertBadge2Svg,
+    WebDevCertBadge3Svg,
+} from '..'
+import styles from './TCACertBadge.module.scss'
+
+interface TCACertBadgeProps {
+    learnerLevel: TCACertificationLearnLevel
+    certificationCategory: TCACertificationCategory
+}
+
+const badgesMap: any = {
+    DATASCIENCE: {
+        Beginner: <DSCertBadge1Svg className={styles.tcaBadge} />,
+        Expert: <DSCertBadge3Svg className={styles.tcaBadge} />,
+        Intermediate: <DSCertBadge2Svg className={styles.tcaBadge} />,
+    },
+    DEV: {
+        Beginner: <WebDevCertBadge1Svg className={styles.tcaBadge} />,
+        Expert: <WebDevCertBadge3Svg className={styles.tcaBadge} />,
+        Intermediate: <WebDevCertBadge2Svg className={styles.tcaBadge} />,
+    },
+}
+
+const TCACertBadge: FC<TCACertBadgeProps>
+    = (props: TCACertBadgeProps): JSX.Element => badgesMap[props.certificationCategory.track][props.learnerLevel]
+
+export default TCACertBadge

src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-1.svg renamed to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-1.svg

@@ -0,0 +1 @@
+export { default as TCACertBadge } from './TCACertBadge'

src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-2.svg renamed to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-2.svg

@@ -41,5 +41,9 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: $space-xxl;
+
+        @include ltemd {
+            grid-template-columns: 1fr;
+        }
     }
 }

src-ts/tools/learn/welcome/tc-certifications/assets/ds-cert-badge-3.svg renamed to src-ts/tools/learn/learn-lib/svgs/ds-cert-badge-3.svg

@@ -13,7 +13,7 @@ interface TCCertificationsProps {
 const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProps) => {
     const renderListCard: (certification: TCACertification) => ReactNode
         = useCallback((certification: TCACertification) => (
-            <TCCertCard certification={certification} />
+            <TCCertCard certification={certification} key={certification.dashedName} />
         ), [])
 
     return (

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

@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     background-color: $black-5;
-    padding: $space-xxl $space-lg;
+    padding: $space-xxxxl $space-xxl;
     border-radius: 8px;
 
     .cardHeader {
@@ -14,6 +14,10 @@
         padding-bottom: $space-xxl;
         margin-bottom: $space-xxl;
 
+        @include ltemd {
+            align-items: flex-start;
+        }
+
         .cardTitleWrap {
             display: flex;
             flex-direction: column;
@@ -50,7 +54,7 @@
     .skills {
         display: flex;
         flex-wrap: wrap;
-        margin: $space-sm 0;
+        margin-top: $space-sm;
 
         >div {
             margin-right: $space-sm;
@@ -66,12 +70,20 @@
         display: flex;
         align-items: center;
     }
+
+    .cardBottom {
+        margin-top: $space-xxl;
+
+        @include ltemd {
+            margin-top: $space-xl;
+        }
+    }
 }
 
 .infoText {
     font-style: italic;
     color: $black-60;
-    margin-right: $space-lg;
+    margin-right: $space-sm;
 
     &:last-child {
         margin-right: 0;