Skip to content

Commit b2086d4

Browse files
kkartunovkkartunov
committed
TCA-870 init tca certs
1 parent c464280 commit b2086d4

34 files changed

+1103
-29
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export * from './lesson-provider'
44
export * from './resource-provider-provider'
55
export * from './user-certifications-provider'
66
export * from './user-completed-certifications-provider'
7+
export * from './user-completed-tca-certifications-provider'
78
export * from './tca-certifications-provider'

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,10 @@ export interface TCACertificationsProviderData {
66
loading: boolean
77
ready: boolean
88
}
9+
10+
export interface TCACertificationProviderData {
11+
certification: TCACertification
12+
error: boolean
13+
loading: boolean
14+
ready: boolean
15+
}

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

Lines changed: 67 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,46 @@
33
/* eslint-disable default-param-last */
44
import useSWR, { SWRConfiguration, SWRResponse } from 'swr'
55

6+
import { LEARN_PATHS } from '../../../learn.routes'
67
import { learnUrlGet } from '../../functions'
78
import { useSwrCache } from '../../learn-swr'
89

9-
import { TCACertificationsProviderData } from './tca-certifications-provider-data.model'
10+
import { TCACertificationProviderData, TCACertificationsProviderData } from './tca-certifications-provider-data.model'
1011
import { TCACertification } from './tca-certification.model'
1112

1213
interface TCACertificationsAllProviderOptions {
1314
enabled?: boolean
1415
}
1516

17+
const TCACertificationMock: TCACertification[] = [{
18+
id: 1,
19+
title: 'Web Development Fundamentals',
20+
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.',
21+
estimatedCompletionTime: 4,
22+
learnerLevel: 'Beginner',
23+
sequentialCourses: false,
24+
status: 'active',
25+
certificationCategoryId: '',
26+
skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
27+
},
28+
{
29+
id: 2,
30+
title: 'Data Science Fundamentals',
31+
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.',
32+
estimatedCompletionTime: 14,
33+
status: 'active',
34+
sequentialCourses: false,
35+
learnerLevel: 'Expert',
36+
certificationCategoryId: '',
37+
skills: ['Python', 'TensorFlow', 'JSON'],
38+
}]
39+
1640
export function useGetAllTCACertifications(
1741
options?: TCACertificationsAllProviderOptions,
1842
): TCACertificationsProviderData {
1943

2044
const url: string = learnUrlGet(
21-
'topcoder-certifications',
45+
LEARN_PATHS.tcaCertifications,
2246
)
2347
const swrCacheConfig: SWRConfiguration = useSwrCache(url)
2448

@@ -35,37 +59,51 @@ export function useGetAllTCACertifications(
3559
}
3660
}
3761

38-
// TODO: remove when integrated with API
39-
export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
40-
const data: TCACertification[] = [{
41-
id: 1,
42-
title: 'Web Development Fundamentals',
43-
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.',
44-
estimatedCompletionTime: 4,
45-
learnerLevel: 'Beginner',
46-
sequentialCourses: false,
47-
status: 'active',
48-
certificationCategoryId: '',
49-
skills: ['HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript', 'HTML', 'CSS', 'JavaScript'],
50-
},
51-
{
52-
id: 2,
53-
title: 'Data Science Fundamentals',
54-
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.',
55-
estimatedCompletionTime: 14,
56-
status: 'active',
57-
sequentialCourses: false,
58-
learnerLevel: 'Expert',
59-
certificationCategoryId: '',
60-
skills: ['Python', 'TensorFlow', 'JSON'],
61-
}]
62-
63-
const error = {}
62+
export function useGetTCACertification(
63+
certification: string,
64+
options?: TCACertificationsAllProviderOptions,
65+
): TCACertificationProviderData {
66+
67+
const url: string = learnUrlGet(
68+
LEARN_PATHS.tcaCertifications,
69+
certification,
70+
)
71+
const swrCacheConfig: SWRConfiguration = useSwrCache(url)
72+
73+
const { data, error }: SWRResponse = useSWR(url, {
74+
...swrCacheConfig,
75+
isPaused: () => options?.enabled === false,
76+
})
6477

6578
return {
66-
certifications: data ?? [],
79+
certification: data,
6780
error: !!error,
6881
loading: !data,
6982
ready: !!data,
7083
}
7184
}
85+
86+
// TODO: remove when integrated with API
87+
export function useGetTCACertificationMOCK(
88+
certification: string,
89+
): TCACertificationProviderData {
90+
91+
const data: TCACertification = TCACertificationMock[certification as any]
92+
93+
return {
94+
certification: data,
95+
error: false,
96+
loading: !data,
97+
ready: !!data,
98+
}
99+
}
100+
101+
// TODO: remove when integrated with API
102+
export function useGetAllTCACertificationsMOCK(): TCACertificationsProviderData {
103+
return {
104+
certifications: TCACertificationMock ?? [],
105+
error: false,
106+
loading: !TCACertificationMock,
107+
ready: !!TCACertificationMock,
108+
}
109+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './user-completed-tca-certifications-provider-data.model'
2+
export * from './user-completed-tca-certifications.provider'
3+
export * from './user-completed-tca-certification.model'

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface UserCompletedTCACertification {
2+
status: string
3+
completedDate: string
4+
trackType: string
5+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
2+
3+
export interface UserCompletedTCACertificationsProviderData {
4+
certifications: ReadonlyArray<UserCompletedTCACertification>
5+
loading: boolean
6+
ready: boolean
7+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import useSWR, { SWRResponse } from 'swr'
2+
3+
import { learnUrlGet } from '../../functions'
4+
5+
import { UserCompletedTCACertification } from './user-completed-tca-certification.model'
6+
import { UserCompletedTCACertificationsProviderData } from './user-completed-tca-certifications-provider-data.model'
7+
8+
const COMPLETED_CERTS_MOCK = [
9+
{ status: 'comleted', trackType: 'web dev', completedDate: '' },
10+
]
11+
12+
export function useGetUserTCACompletedCertifications(
13+
userId?: number,
14+
certification?: string,
15+
): UserCompletedTCACertificationsProviderData {
16+
17+
// TODO: update to actual API endpoint URL when ready
18+
const url: string = learnUrlGet('completed-certifications', `${userId}`)
19+
20+
const { data, error }: SWRResponse<ReadonlyArray<UserCompletedTCACertification>> = useSWR(url)
21+
22+
let certifications: ReadonlyArray<UserCompletedTCACertification> = data ?? []
23+
24+
if (certification) {
25+
certifications = certifications
26+
.filter(c => (!certification || c.certification === certification))
27+
}
28+
29+
return {
30+
certifications,
31+
loading: !data && !error,
32+
ready: !!data || !!error,
33+
}
34+
}
35+
36+
// TODO: remove when API ready
37+
export function useGetUserTCACompletedCertificationsMOCK(
38+
userId?: number,
39+
certification?: string,
40+
): UserCompletedTCACertificationsProviderData {
41+
const data = COMPLETED_CERTS_MOCK
42+
43+
return {
44+
certifications: data,
45+
loading: !data,
46+
ready: !!data,
47+
}
48+
}

‎src-ts/tools/learn/learn.routes.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-cer
1111
const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp')
1212
const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning')
1313
const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn'))
14+
const MyTCACertificate: LazyLoadedComponent = lazyLoad(() => import('./tca-certificate'), 'MyTCACertificate')
1415

1516
export enum LEARN_PATHS {
1617
certificate = '/certificate',
@@ -20,6 +21,7 @@ export enum LEARN_PATHS {
2021
fcc = '/learn/fcc',
2122
root = '/learn',
2223
startCourseRouteFlag = 'start-course',
24+
tcaCertifications = 'tca-certifications',
2325
}
2426

2527
export const rootRoute: string = LEARN_PATHS.root
@@ -70,6 +72,14 @@ export function getUserCertificateSsr(
7072
return `${LearnConfig.CERT_DOMAIN}/${handle}/${provider}/${certification}/${encodeURI(title)}`
7173
}
7274

75+
export function getUserTCACertificateSsr(
76+
certification: string,
77+
handle: string,
78+
title: string,
79+
): string {
80+
return `${LearnConfig.CERT_DOMAIN}/${handle}/tca/${certification}/${encodeURI(title)}`
81+
}
82+
7383
export function getUserCertificateUrl(
7484
provider: string,
7585
certification: string,
@@ -82,6 +92,10 @@ export function getViewStyleParamKey(): string {
8292
return Object.keys(LearnConfig.CERT_ALT_PARAMS)[0]
8393
}
8494

95+
export function getTCACertificationPath(certification: string): string {
96+
return `${LEARN_PATHS.root}/${LEARN_PATHS.tcaCertifications}/${certification}`
97+
}
98+
8599
export const learnRoutes: ReadonlyArray<PlatformRoute> = [
86100
{
87101
children: [
@@ -127,6 +141,12 @@ export const learnRoutes: ReadonlyArray<PlatformRoute> = [
127141
id: 'My Learning',
128142
route: 'my-learning',
129143
},
144+
{
145+
children: [],
146+
element: <MyTCACertificate />,
147+
id: 'My TCA Certification',
148+
route: 'tca-certifications/:certification/certificate',
149+
},
130150
],
131151
element: <LandingLearn />,
132152
id: toolTitle,

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import '../../../../lib/styles/includes';
2+
3+
.wrap {
4+
padding-top: $space-xxxxl;
5+
padding-bottom: calc($space-xxxxl + $space-xs);
6+
flex: 99 1 auto;
7+
display: flex;
8+
9+
background: $tc-grad15;
10+
}
11+
12+
.content-wrap {
13+
display: flex;
14+
@include pagePaddings;
15+
margin: auto;
16+
width: 100%;
17+
justify-content: center;
18+
19+
gap: $space-xxxxl;
20+
21+
@include ltemd {
22+
flex-direction: column;
23+
margin: 0 auto auto;
24+
}
25+
}
26+
27+
.btns-wrap {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
32+
gap: $space-sm;
33+
34+
&:last-child {
35+
margin-top: auto;
36+
}
37+
38+
@include ltemd {
39+
flex-direction: row;
40+
&:last-child {
41+
justify-content: center;
42+
}
43+
}
44+
}
45+
46+
.certificate-wrap {
47+
aspect-ratio: 1.25715;
48+
width: 880px;
49+
50+
background: #fff;
51+
52+
box-shadow: 0 20px 36px rgba($tc-black, 0.22);
53+
54+
&:global(.large-container) {
55+
aspect-ratio: unset;
56+
@include socialPreviewImg;
57+
}
58+
}
59+
60+
.share-btn:global(.button.icon) {
61+
@include icon-mxx;
62+
border-radius: 50%;
63+
64+
color: $tc-white;
65+
border: $border solid $tc-white;
66+
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
71+
padding: $space-sm;
72+
73+
&:hover {
74+
background: transparent;
75+
}
76+
77+
svg {
78+
@include icon-xxl;
79+
}
80+
}

0 commit comments

Comments
 (0)