fix lint errors for part of tools/learn

Author: vas3a

src-ts/tools/learn/course-certificate/certificate-view/certificate/course-card/CourseCard.tsx

@@ -26,7 +26,13 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => (
             <IconOutline.CalendarIcon />
             <span className='large-subtitle'>
                 <span>Completed</span>
-                <span>{props.completedDate && textFormatDateLocaleShortString(new Date(props.completedDate))}</span>
+                <span>
+                    {
+                        props.completedDate && (
+                            textFormatDateLocaleShortString(new Date(props.completedDate))
+                        )
+                    }
+                </span>
             </span>
         </div>
     </div>

src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx

@@ -18,7 +18,7 @@ interface CollapsibleItemProps {
     active?: string
     duration: LearnModule['meta']['estimatedCompletionTime']
     isAssessment: boolean
-    itemId?: (item: any) => string
+    itemId?: (item: CollapsibleListItem) => string
     items: Array<CollapsibleListItem>
     lessonsCount: number
     moduleKey: string
@@ -30,52 +30,67 @@ interface CollapsibleItemProps {
 }
 
 const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps) => {
-    const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isOpen, setIsOpen]: [
+        boolean,
+        Dispatch<SetStateAction<boolean>>
+    ] = useState<boolean>(false)
 
     const toggle: () => void = useCallback(() => {
         setIsOpen(open => !open)
     }, [])
 
-    const progress: LearnModuleProgress | undefined = useMemo(() => props.progress?.find(m => m.module === props.moduleKey), [props.progress, props.moduleKey])
+    const progress: LearnModuleProgress | undefined = useMemo(() => (
+        props.progress?.find(m => m.module === props.moduleKey)
+    ), [props.progress, props.moduleKey])
 
-    const isCompleted: boolean = useMemo(() => !!progress && progress.lessonCount === progress?.completedLessons.length, [progress])
+    const isCompleted: boolean = useMemo(() => (
+        !!progress && progress.lessonCount === progress?.completedLessons.length
+    ), [progress])
 
-    const isPartial: boolean = useMemo(() => !!progress && !!progress.completedLessons.length, [progress])
+    const isPartial: boolean = useMemo(() => (
+        !!progress && !!progress.completedLessons.length
+    ), [progress])
 
     const isItemCompleted: (key: string) => boolean = (key: string) => (
         !!progress?.completedLessons.find(l => l.dashedName === key)
     )
 
-    const stepLabel: (item: any, isActive: boolean, stepCount: string, label?: string) => ReactNode
-    = (item: any, isActive: boolean, stepCount: string, label?: string) => (
-        <StepIcon
-            index={stepCount}
-            completed={isItemCompleted(item.dashedName)}
-            active={isActive}
-            label={label}
-        />
-    )
-
-    const renderListItem: (item: any) => ReactNode = (item: any) => {
-        const isActive: boolean = props.itemId?.(item) === props.active
-        const stepCount: string = item.dashedName.match(/^step-(\d+)$/i)?.[1]
-        const label: ReactNode = stepLabel(item, isActive, stepCount, !stepCount && item.title)
-        const key: string = props.itemId?.(item) ?? item.title
-
-        return (
-            <li
-                key={key}
-                className={classNames(styles['item-wrap'], !stepCount && 'full-width')}
-                onClick={() => props.onItemClick(item)}
-            >
-                {props.path ? (
-                    <Link className={styles['item-wrap']} to={props.path(item)}>
-                        {label}
-                    </Link>
-                ) : label}
-            </li>
+    const stepLabel: (
+        item: CollapsibleListItem,
+        isActive: boolean,
+        stepCount?: string,
+        label?: string
+    ) => ReactNode
+        = (item: CollapsibleListItem, isActive: boolean, stepCount?: string, label?: string) => (
+            <StepIcon
+                index={stepCount}
+                completed={isItemCompleted(item.dashedName)}
+                active={isActive}
+                label={label}
+            />
         )
-    }
+
+    const renderListItem: (item: CollapsibleListItem) => ReactNode
+        = (item: CollapsibleListItem) => {
+            const isActive: boolean = props.itemId?.(item) === props.active
+            const stepCount: string | undefined = item.dashedName.match(/^step-(\d+)$/i)?.[1]
+            const label: ReactNode = stepLabel(item, isActive, stepCount, !stepCount && item.title)
+            const key: string = props.itemId?.(item) ?? item.title
+
+            return (
+                <li
+                    key={key}
+                    className={classNames(styles['item-wrap'], !stepCount && 'full-width')}
+                    onClick={() => props.onItemClick(item)}
+                >
+                    {props.path ? (
+                        <Link className={styles['item-wrap']} to={props.path(item)}>
+                            {label}
+                        </Link>
+                    ) : label}
+                </li>
+            )
+        }
 
     return (
         <div className={classNames(styles.wrap, isOpen ? 'is-open' : 'collapsed')}>

src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.tsx

@@ -18,13 +18,17 @@ const StatusIcon: FC<StatusIconProps> = (props: StatusIconProps) => {
         props.partial && 'partial',
     )
 
-    const icon: ReactNode = useMemo(() => (
-        props.completed
-            ? <IconSolid.CheckCircleIcon />
-            : props.partial
-                ? <IconOutline.ClockIcon />
-                : <IconOutline.DotsCircleHorizontalIcon />
-    ), [props.completed, props.partial])
+    const icon: ReactNode = useMemo(() => {
+        if (props.completed) {
+            return <IconSolid.CheckCircleIcon />
+        }
+
+        if (props.partial) {
+            return <IconOutline.ClockIcon />
+        }
+
+        return <IconOutline.DotsCircleHorizontalIcon />
+    }, [props.completed, props.partial])
 
     return (
         <div className={classes}>

src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx

@@ -8,7 +8,7 @@ import styles from './StepIcon.module.scss'
 interface StepIconProps {
     active?: boolean
     completed?: boolean
-    index: string
+    index?: string
     label?: string
 }
 

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

@@ -1,3 +1,4 @@
+import { noop } from 'lodash'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 import { courseGetAsync } from './courses-functions'
@@ -24,7 +25,7 @@ export function useCourses(provider: string, certification?: string): CoursesPro
                 loading: false,
                 ready: false,
             }))
-            return
+            return noop
         }
 
         setState(prevState => ({

src-ts/tools/learn/learn-lib/functions/learn-xhr.functions.ts

@@ -2,20 +2,20 @@ import { AxiosInstance, AxiosRequestConfig } from 'axios'
 
 import { xhrCreateInstance, xhrGetAsync, xhrPostAsync, xhrPutAsync } from '../../../../lib'
 
-import { create as learnCreate } from './learn.factory'
+import { create as learnCreate, LearnResponseModel } from './learn.factory'
 
 const learnXhrInstance: AxiosInstance = xhrCreateInstance()
 
 // handle all created and updated dates
 learnXhrInstance.interceptors.response
     .use(response => {
 
-        if (response.data?.hasOwnProperty('createdAt')) {
+        if (Object.prototype.hasOwnProperty.call(response.data, 'createdAt')) {
             response.data = learnCreate(response.data)
 
         } else if (response.data?.constructor?.name === 'Array') {
             response.data = response.data
-                .map((item: any) => learnCreate(item))
+                .map(<T extends LearnResponseModel>(item: T) => learnCreate(item))
         }
 
         return response
@@ -25,10 +25,18 @@ export async function getAsync<T>(url: string): Promise<T> {
     return xhrGetAsync(url, learnXhrInstance)
 }
 
-export async function postAsync<T, R>(url: string, data: T, config?: AxiosRequestConfig<T>): Promise<R> {
+export async function postAsync<T, R>(
+    url: string,
+    data: T,
+    config?: AxiosRequestConfig<T>,
+): Promise<R> {
     return xhrPostAsync(url, data, config, learnXhrInstance)
 }
 
-export async function putAsync<T, R>(url: string, data: T, config?: AxiosRequestConfig<T>): Promise<R> {
+export async function putAsync<T, R>(
+    url: string,
+    data: T,
+    config?: AxiosRequestConfig<T>,
+): Promise<R> {
     return xhrPutAsync(url, data, config, learnXhrInstance)
 }

src-ts/tools/learn/learn-lib/functions/learn.factory.ts

@@ -1,4 +1,6 @@
-interface LearnResponseModel {
+import { set } from 'lodash'
+
+export interface LearnResponseModel {
     createdAt?: string | Date
     publishedAt?: string | Date
     updatedAt?: string | Date
@@ -7,15 +9,15 @@ interface LearnResponseModel {
 export function create<T extends LearnResponseModel>(item: T): T {
 
     if (typeof item?.createdAt === 'string') {
-        item.createdAt = new Date(item.createdAt)
+        set(item, 'createdAt', new Date(item.createdAt))
     }
 
     if (typeof item?.updatedAt === 'string') {
-        item.updatedAt = new Date(item.updatedAt)
+        set(item, 'updatedAt', new Date(item.updatedAt))
     }
 
     if (typeof item?.publishedAt === 'string') {
-        item.publishedAt = new Date(item.publishedAt)
+        set(item, 'publishedAt', new Date(item.publishedAt))
     }
 
     return item

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

@@ -1,3 +1,4 @@
+import { get, noop } from 'lodash'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 
 import { courseGetAsync } from '../courses-provider'
@@ -12,10 +13,14 @@ export function useLessonProvider(
     module?: string,
     lesson?: string,
 ): LessonProviderData {
-    const [state, setState]: [LessonProviderData, Dispatch<SetStateAction<LessonProviderData>>] = useState<LessonProviderData>({
-        loading: false,
-        ready: false,
-    })
+    const [state, setState]: [
+        LessonProviderData,
+        Dispatch<SetStateAction<LessonProviderData>>
+    ]
+        = useState<LessonProviderData>({
+            loading: false,
+            ready: false,
+        })
 
     useEffect(() => {
         let mounted: boolean = true
@@ -27,7 +32,7 @@ export function useLessonProvider(
                 loading: false,
                 ready: false,
             }))
-            return
+            return noop
         }
 
         setState(prevState => ({
@@ -42,8 +47,10 @@ export function useLessonProvider(
                     return
                 }
 
-                const moduleData: LearnModule | undefined = courseData?.modules.find(m => m.key === module)
-                const lessonData: LearnLesson | undefined = moduleData?.lessons.find(l => l.dashedName === lesson)
+                const moduleData: LearnModule | undefined
+                    = courseData?.modules.find(m => m.key === module)
+                const lessonData: LearnLesson | undefined
+                    = moduleData?.lessons.find(l => l.dashedName === lesson)
 
                 const lessonUrl: string = [
                     'learn',
@@ -57,10 +64,10 @@ export function useLessonProvider(
                     lesson: lessonData && {
                         ...lessonData,
                         course: {
-                            certification: courseData?.certification ?? '',
-                            certificationId: courseData?.certificationId ?? '',
-                            id: courseData?.id ?? '',
-                            title: courseData?.title ?? '',
+                            certification: get(courseData, 'certification', ''),
+                            certificationId: get(courseData, 'certificationId', ''),
+                            id: get(courseData, 'id', ''),
+                            title: get(courseData, 'title', ''),
                         },
                         lessonUrl,
                         module: {

src-ts/tools/learn/learn-lib/my-course-card/completed/Completed.tsx

@@ -8,7 +8,7 @@ import { getCertificatePath, getCoursePath } from '../../../learn.routes'
 import styles from './Completed.module.scss'
 
 interface CompletedProps {
-    certification: LearnCertification
+    certification?: LearnCertification
     completed: string
 }
 
@@ -38,13 +38,23 @@ const Completed: FC<CompletedProps> = (props: CompletedProps) => {
                     size='xs'
                     buttonStyle='secondary'
                     label='View Course'
-                    route={getCoursePath(props.certification.providerName, props.certification.certification)}
+                    route={
+                        getCoursePath(
+                            props.certification.providerName,
+                            props.certification.certification,
+                        )
+                    }
                 />
                 <Button
                     size='xs'
                     buttonStyle='secondary'
                     label='View certificate'
-                    route={getCertificatePath(props.certification.providerName, props.certification.certification)}
+                    route={
+                        getCertificatePath(
+                            props.certification.providerName,
+                            props.certification.certification,
+                        )
+                    }
                 />
             </div>
         </div>

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

@@ -4,10 +4,14 @@ 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,
-    })
+    const [state, setState]: [
+        ResourceProviderData,
+        Dispatch<SetStateAction<ResourceProviderData>>
+    ]
+        = useState<ResourceProviderData>({
+            loading: false,
+            ready: false,
+        })
 
     useEffect(() => {
         if (!providerName) {