TCA-870 reusable components

Author: kkartunov

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

@@ -13,18 +13,18 @@ import {
     UserProfile,
 } from '../../../../lib'
 import {
+    ActionButton,
     AllCertificationsProviderData,
     CoursesProviderData,
+    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

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

@@ -9,6 +9,7 @@ import { useSwrCache } from '../../learn-swr'
 
 import { TCACertificationProviderData, TCACertificationsProviderData } from './tca-certifications-provider-data.model'
 import { TCACertification } from './tca-certification.model'
+import { find } from 'lodash'
 
 interface TCACertificationsAllProviderOptions {
     enabled?: boolean
@@ -17,6 +18,7 @@ interface TCACertificationsAllProviderOptions {
 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',
@@ -28,6 +30,7 @@ const TCACertificationMock: TCACertification[] = [{
 {
     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',
@@ -88,7 +91,7 @@ export function useGetTCACertificationMOCK(
     certification: string,
 ): TCACertificationProviderData {
 
-    const data: TCACertification = TCACertificationMock[certification as any]
+    const data: TCACertification | undefined = find(TCACertificationMock, { dashedName: certification })
 
     return {
         certification: data,

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

@@ -1,3 +1,4 @@
+export * from './action-button'
 export * from './collapsible-pane'
 export * from './course-badge'
 export * from './course-outline'
@@ -8,4 +9,5 @@ export * from './learn-breadcrumb-provider'
 export * from './learn-swr'
 export * from './my-course-card'
 export * from './svgs'
+export * from './use-certificate-scaling-hook'
 export * from './wave-hero'

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

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

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

@@ -13,16 +13,16 @@ import {
     UserProfile,
 } from '../../../../lib'
 import {
+    ActionButton,
     TCACertificationProviderData,
-    UserCompletedTCACertificationsProviderData,
-    useGetUserTCACompletedCertificationsMOCK,
+    useCertificateScaling,
     useGetTCACertificationMOCK,
+    useGetUserTCACompletedCertificationsMOCK,
+    UserCompletedTCACertificationsProviderData,
 } from '../../learn-lib'
 import { getTCACertificationPath, getUserTCACertificateSsr } 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