PROD-2534 - extract urls, add ResourceProvider provider

Author: vas3a

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -14,8 +14,11 @@ import {
     CoursesProviderData,
     CourseTitle,
     MyCertificationProgressProviderData,
+    MyCertificationProgressStatus,
+    ResourceProviderData,
     useCoursesProvider,
-    useMyCertificationProgress
+    useMyCertificationProgress,
+    useResourceProvider
 } from '../learn-lib'
 
 import { CourseCurriculum } from './course-curriculum'
@@ -27,6 +30,10 @@ const CourseDetailsPage: FC<{}> = () => {
     const routeParams: Params<string> = useParams()
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
 
+    const {
+        provider: resourceProvider,
+    }: ResourceProviderData = useResourceProvider(routeParams.provider)
+
     const {
         course,
         ready: courseReady,
@@ -52,7 +59,7 @@ const CourseDetailsPage: FC<{}> = () => {
             return
         }
 
-        return progress?.status === 'completed' ? (
+        return progress?.status === MyCertificationProgressStatus.completed ? (
             <>
                 <h3 className='details'>Suggested next steps</h3>
 
@@ -78,21 +85,6 @@ const CourseDetailsPage: FC<{}> = () => {
         )
     }
 
-    function getProviderCredits(): ReactNode {
-        if (!course) {
-            return
-        }
-
-        return course.provider === 'freeCodeCamp' && (
-            <div className={styles['credits-link']}>
-                <a href='https://freecodecamp.org/' target='_blank' referrerPolicy='no-referrer' rel='noreferrer'>
-                    This course was created by the freeCodeCamp.org community.
-                    <IconOutline.ExternalLinkIcon />
-                </a>
-            </div>
-        )
-    }
-
     return (
         <ContentLayout>
             {!ready && (
@@ -129,7 +121,14 @@ const CourseDetailsPage: FC<{}> = () => {
                             />
                         </div>
                     </div>
-                    {getProviderCredits()}
+                    {resourceProvider && (
+                        <div className={styles['credits-link']}>
+                            <a href={`//${resourceProvider.url}`} target='_blank' referrerPolicy='no-referrer' rel='noreferrer'>
+                                This course was created by the {resourceProvider.url} community.
+                                <IconOutline.ExternalLinkIcon />
+                            </a>
+                        </div>
+                    )}
                 </>
             )}
         </ContentLayout>

src-ts/tools/learn/course-details/course-curriculum/CourseCurriculum.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
 import { NavigateFunction, useNavigate, useSearchParams } from 'react-router-dom'
 
-import { authUrlLogin, Button, UserProfile } from '../../../../lib'
+import { Button, UserProfile } from '../../../../lib'
 import {
     CourseOutline,
     LearnCourse,
@@ -15,7 +15,7 @@ import {
     UpdateMyCertificateProgressActions,
     updateMyCertificationsProgressAsync
 } from '../../learn-lib'
-import { getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
+import { authenticateAndStartCourseRoute, getFccLessonPath, LEARN_PATHS } from '../../learn.routes'
 
 import styles from './CourseCurriculum.module.scss'
 import { CurriculumSummary } from './curriculum-summary'
@@ -68,7 +68,7 @@ const CourseCurriculum: FC<CourseCurriculumProps> = (props: CourseCurriculumProp
         if (!isLoggedIn) {
             // add a flag to the return url to show the academic policy modal
             // or resume the course when they're back
-            window.location.href = `${authUrlLogin}${encodeURIComponent('?start-course')}`
+            window.location.href = authenticateAndStartCourseRoute
             return
         }
 

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

@@ -1,4 +1,5 @@
 export * from './certifications-provider'
+export * from './resource-provider-provider'
 export * from './collapsible-pane'
 export * from './courses-provider'
 export * from './curriculum-summary'

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

@@ -0,0 +1,3 @@
+export * from './resource-provider-functions'
+export * from './resource-provider-data.model'
+export * from './resource-provider.provider'

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-data.model.ts

@@ -0,0 +1,7 @@
+import { ResourceProvider } from './resource-provider-functions'
+
+export interface ResourceProviderData {
+    provider?: ResourceProvider
+    loading: boolean
+    ready: boolean
+}

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-functions/index.ts

@@ -0,0 +1,2 @@
+export * from './resource-provider.model'
+export * from './resource-provider.store'

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-functions/resource-provider.model.ts

@@ -0,0 +1,6 @@
+export interface ResourceProvider {
+    attributionStatement: string
+    id: string
+    url: string
+    name: string
+}

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider-functions/resource-provider.store.ts

@@ -0,0 +1,10 @@
+import { xhrGetAsync } from '../../../../../lib/functions'
+import { getPath } from '../../learn-url.config'
+import { ResourceProvider } from './resource-provider.model'
+
+
+export function getResourceProvidersAsync(): Promise<Array<ResourceProvider>|undefined> {
+    return xhrGetAsync<Array<ResourceProvider>>(getPath(
+        'providers'
+    ))
+}

src-ts/tools/learn/learn-lib/resource-provider-provider/resource-provider.provider.tsx

@@ -0,0 +1,38 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { ResourceProviderData } from './resource-provider-data.model'
+import { getResourceProvidersAsync } from './resource-provider-functions/resource-provider.store'
+
+export function useResourceProvider(providerName?: string): ResourceProviderData {
+    const [state, setState]: [ResourceProviderData, Dispatch<SetStateAction<ResourceProviderData>>] = useState<ResourceProviderData>({
+        loading: false,
+        ready: false,
+    })
+    
+    useEffect(() => {
+        if (!providerName) {
+            setState((prevState) => ({
+                ...prevState,
+                provider: undefined,
+                loading: false,
+                ready: false,
+            }))
+            return
+        }
+
+        setState((prevState) => ({
+            ...prevState,
+            loading: true,
+        }))
+
+        getResourceProvidersAsync().then((providers) => {
+            setState((prevState) => ({
+                ...prevState,
+                provider: providers?.find(p => p.name === providerName),
+                loading: false,
+                ready: true,
+            }))
+        })
+    }, [providerName])
+
+    return state
+}

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

@@ -1,4 +1,4 @@
-import { PlatformRoute } from '../../lib'
+import { authUrlLogin, PlatformRoute } from '../../lib'
 
 import { CourseCompletedPage } from './course-completed'
 import { CourseDetailsPage } from './course-details'
@@ -32,6 +32,8 @@ export enum LEARN_PATHS {
     root = '/learn',
 }
 
+export const authenticateAndStartCourseRoute: string = `${authUrlLogin}${encodeURIComponent('?start-course')}`
+
 export const rootRoute: string = LEARN_PATHS.root
 
 export const learnRoutes: Array<PlatformRoute> = [