TCA-407 - add filter & sort for my-learnings page

Author: vas3a

src-ts/lib/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -30,7 +30,7 @@ interface InputSelectProps {
     readonly label?: string
     readonly name: string
     readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
-    readonly options: Array<InputSelectOption>
+    readonly options: ReadonlyArray<InputSelectOption>
     readonly tabIndex?: number
     readonly value?: string
 }

src-ts/lib/form/form-groups/form-input/input-select/index.ts

@@ -1 +1,2 @@
+export * from './InputSelect'
 export { default as InputSelect } from './InputSelect'

src-ts/tools/learn/my-learning/MyLearning.module.scss

@@ -21,50 +21,6 @@
     }
 }
 
-.title-line {
-    display: flex;
-    align-items: center;
-
-    svg {
-        @include icon-size(60);
-        margin-right: $space-sm;
-        @include ltemd {
-            @include icon-size(38);
-        }
-    }
-}
-
-.courses-area {
-    padding: $space-xxxxl 0;
-    gap: $space-lg;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    &:empty {
-        display: none;
-    }
-
-    @include ltemd {
-        gap: $space-xxl;
-    }
-}
-
-.cards-wrap {
-    display: flex;
-    gap: $space-xxl;
-    flex-wrap: wrap;
-
-    > * {
-        flex: 0 1 calc(50% - calc($space-xxl / 2));
-    }
-
-    @include ltemd {
-        > * {
-            flex: 1 1 0;
-        }
-    }
-}
-
 .loading-spinner {
     background: none;
-}
+}

src-ts/tools/learn/my-learning/MyLearning.tsx

@@ -1,12 +1,9 @@
-import { FC, useContext, useMemo } from 'react'
+import { Dispatch, FC, ReactNode, SetStateAction, useContext, useMemo, useState } from 'react'
 
 import { Breadcrumb, BreadcrumbItemModel, ContentLayout, LoadingSpinner, Portal, profileContext, ProfileContextData } from '../../../lib'
 import {
     AllCertificationsProviderData,
     LearnCertification,
-    LearningHat,
-    MyCourseCompletedCard,
-    MyCourseInProgressCard,
     useAllCertifications,
     useLearnBreadcrumb,
     UserCertificationsProviderData,
@@ -15,7 +12,10 @@ import {
 } from '../learn-lib'
 import { LEARN_PATHS } from '../learn.routes'
 
+import { CompletedTab } from './completed-tab'
 import { HeroCard } from './hero-card'
+import { InProgressTab } from './in-progress-tab'
+import { MyTabsNavbar, MyTabsViews } from './my-tabs-navbar'
 import styles from './MyLearning.module.scss'
 
 interface CertificatesByIdType {
@@ -27,6 +27,7 @@ const MyLearning: FC<{}> = () => {
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
     const { completed, inProgress, ready: coursesReady }: UserCertificationsProviderData = useUserCertifications()
     const { certifications, ready: certificatesReady }: AllCertificationsProviderData = useAllCertifications()
+    const [activeTab, setActiveTab]: [MyTabsViews|undefined, Dispatch<SetStateAction<MyTabsViews|undefined>>] = useState()
 
     const ready: boolean = profileReady && coursesReady && certificatesReady
 
@@ -44,6 +45,28 @@ const MyLearning: FC<{}> = () => {
         },
     ])
 
+    const renderTabs: () => ReactNode = () => (
+        <MyTabsNavbar
+            inProgress={inProgress.length}
+            completed={completed.length}
+            onTabChange={setActiveTab}
+        >
+            {activeTab === MyTabsViews.completed ? (
+                <CompletedTab
+                    allCertificates={certifications}
+                    certificatesById={certificatesById}
+                    certifications={completed}
+                />
+            ) : (
+                <InProgressTab
+                    allCertificates={certifications}
+                    certificatesById={certificatesById}
+                    certifications={inProgress}
+                />
+            )}
+        </MyTabsNavbar>
+    )
+
     return (
         <ContentLayout contentClass={styles['content-layout']}>
             <Breadcrumb items={breadcrumb} />
@@ -64,41 +87,7 @@ const MyLearning: FC<{}> = () => {
                     </div>
                 </Portal>
 
-                {ready && (
-                    <>
-                        <div className={styles['courses-area']}>
-                            {inProgress.map((certif) => (
-                                <MyCourseInProgressCard
-                                    certification={certificatesById[certif.certificationId]}
-                                    key={certif.certificationId}
-                                    theme='detailed'
-                                    currentLesson={certif.currentLesson}
-                                    completedPercentage={certif.courseProgressPercentage / 100}
-                                    startDate={certif.startDate}
-                                />
-                            ))}
-                        </div>
-
-                        {!!completed.length && (
-                            <div className={styles['courses-area']}>
-                                <div className={styles['title-line']}>
-                                    <LearningHat />
-                                    <h2 className='details'>Completed Courses</h2>
-                                </div>
-
-                                <div className={styles['cards-wrap']}>
-                                    {completed.map((certif) => (
-                                        <MyCourseCompletedCard
-                                            certification={certificatesById[certif.certificationId]}
-                                            key={certif.certificationId}
-                                            completed={certif.completedDate}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                    </>
-                )}
+                {ready && renderTabs()}
             </div>
         </ContentLayout>
     )

src-ts/tools/learn/my-learning/completed-tab/CompletedTab.module.scss

@@ -0,0 +1,17 @@
+@import '../../../../lib/styles/includes';
+
+.cards-wrap {
+    display: flex;
+    gap: $space-xxl;
+    flex-wrap: wrap;
+
+    > * {
+        flex: 0 1 calc(50% - calc($space-xxl / 2));
+    }
+
+    @include ltemd {
+        > * {
+            flex: 1 1 0;
+        }
+    }
+}

src-ts/tools/learn/my-learning/completed-tab/CompletedTab.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactNode } from 'react'
+
+import { LearnCertification, MyCourseCompletedCard, UserCertificationCompleted } from '../../learn-lib'
+import { sortOptions } from '../my-learning-sort-options'
+import { MyTabsViews } from '../my-tabs-navbar'
+import { TabContentLayout } from '../tab-content-layout'
+import { useSortAndFilter, UseSortAndFilterValue } from '../use-sort-and-filter'
+
+import styles from './CompletedTab.module.scss'
+
+interface CompletedTabProps {
+    allCertificates: ReadonlyArray<LearnCertification>
+    certificatesById: {[key: string]: LearnCertification}
+    certifications: ReadonlyArray<UserCertificationCompleted>
+}
+
+const CompletedTab: FC<CompletedTabProps> = (props: CompletedTabProps) => {
+
+    const {
+        handleCategoryChange,
+        certifications,
+        handleSortChange,
+    }: UseSortAndFilterValue = useSortAndFilter(
+        props.allCertificates,
+        props.certifications
+    )
+
+    const renderCertificationsList: () => ReactNode = () => (
+        certifications.map((certif) => (
+            <MyCourseCompletedCard
+                certification={props.certificatesById[certif.certificationId]}
+                key={certif.certificationId}
+                completed={certif.completedDate}
+            />
+        ))
+    )
+
+    return (
+        <TabContentLayout
+            certifications={props.allCertificates}
+            title={MyTabsViews.completed}
+            sortOptions={sortOptions.completed}
+            onSortChange={handleSortChange}
+            onCategoryChange={handleCategoryChange}
+        >
+            <div className={styles['cards-wrap']}>
+                {renderCertificationsList()}
+            </div>
+        </TabContentLayout>
+    )
+}
+
+export default CompletedTab

src-ts/tools/learn/my-learning/completed-tab/index.ts

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

src-ts/tools/learn/my-learning/in-progress-tab/InProgressTab.tsx

@@ -0,0 +1,52 @@
+import { FC, ReactNode } from 'react'
+
+import { LearnCertification, MyCourseInProgressCard, UserCertificationInProgress } from '../../learn-lib'
+import { sortOptions } from '../my-learning-sort-options'
+import { MyTabsViews } from '../my-tabs-navbar'
+import { TabContentLayout } from '../tab-content-layout'
+import { useSortAndFilter, UseSortAndFilterValue } from '../use-sort-and-filter'
+
+interface InProgressTabProps {
+    allCertificates: ReadonlyArray<LearnCertification>
+    certificatesById: {[key: string]: LearnCertification}
+    certifications: ReadonlyArray<UserCertificationInProgress>
+}
+
+const InProgressTab: FC<InProgressTabProps> = (props: InProgressTabProps) => {
+
+    const {
+        handleCategoryChange,
+        certifications,
+        handleSortChange,
+    }: UseSortAndFilterValue = useSortAndFilter(
+        props.allCertificates,
+        props.certifications
+    )
+
+    const renderCertificationsList: () => ReactNode = () => (
+        certifications.map((certif) => (
+            <MyCourseInProgressCard
+                certification={props.certificatesById[certif.certificationId]}
+                key={certif.certificationId}
+                theme='detailed'
+                currentLesson={certif.currentLesson}
+                completedPercentage={certif.courseProgressPercentage / 100}
+                startDate={certif.startDate}
+            />
+        ))
+    )
+
+    return (
+        <TabContentLayout
+            certifications={props.allCertificates}
+            title={MyTabsViews.inProgress}
+            sortOptions={sortOptions.inProgress}
+            onSortChange={handleSortChange}
+            onCategoryChange={handleCategoryChange}
+        >
+            {renderCertificationsList()}
+        </TabContentLayout>
+    )
+}
+
+export default InProgressTab

src-ts/tools/learn/my-learning/in-progress-tab/index.ts

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

src-ts/tools/learn/my-learning/my-learning-sort-options.ts

@@ -0,0 +1,26 @@
+export interface SortOption {
+    label: string,
+    value: string,
+}
+
+const COMPLETED_SORT_OPTIONS: ReadonlyArray<SortOption> = [
+    {label: 'Completion date: new to old', value: '-completedDate'},
+    {label: 'Completion date: old to new', value: 'completedDate'},
+]
+
+const IN_PROGRESS_SORT_OPTIONS: ReadonlyArray<SortOption> = [
+    {label: 'Recent activity: new to old', value: '-updatedAt'},
+    {label: 'Recent activity: old to new', value: 'updatedAt'},
+    {label: 'Most progress', value: '-courseProgressPercentage'},
+    {label: 'Least progress', value: 'courseProgressPercentage'},
+    {label: 'Name', value: 'certification'},
+    // {label: 'Length', field: (c: ), direction: 'asc'},
+]
+
+export const sortOptions: {
+    completed: ReadonlyArray<SortOption>,
+    inProgress: ReadonlyArray<SortOption>
+} = {
+    completed: COMPLETED_SORT_OPTIONS,
+    inProgress: IN_PROGRESS_SORT_OPTIONS,
+}