Merge pull request #550 from topcoder-platform/TCA-1105

TCA-1105 move category filter to course section

Author: kkartunov

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -29,7 +29,6 @@ import '../../../lib/styles/index.scss'
 import { AvailableCoursesList } from './available-courses-list'
 import { WhatTCACanDo } from './what-tca-cando'
 import { TCCertifications } from './tc-certifications'
-import { FilterBar } from './filter-bar'
 import styles from './WelcomePage.module.scss'
 
 const PRIORITY_CATEGORIES: ReadonlyArray<string> = [
@@ -68,20 +67,6 @@ const WelcomePage: FC = () => {
             groupBy(orderBy(allCertsData.certifications, 'title', 'asc'), 'certificationCategory.category')
         ), [allCertsData.certifications])
 
-    // compute all the available category dropdown options
-    const certsCategoriesOptions: Array<{
-        label: string,
-        value: string,
-    }> = useMemo(() => [
-        { label: 'All Categories', orderIndex: -1, value: '' },
-        ...Object.keys(certsByCategory)
-            .sort()
-            .map(c => ({
-                label: c,
-                value: c,
-            })),
-    ], [certsByCategory])
-
     // create and sort the certificates groups
     const certificationsGroups: Array<string> = useMemo(() => orderBy(
         Object.keys(certsByCategory),
@@ -124,14 +109,6 @@ const WelcomePage: FC = () => {
 
                     <WhatTCACanDo />
 
-                    <FilterBar
-                        certsCategoriesOptions={certsCategoriesOptions}
-                        onSelectCategory={onSelectCategory}
-                        selectedCategory={selectedCategory}
-                    />
-
-                    <PageDivider />
-
                     <TCCertifications
                         certifications={allTCACertifications.certifications}
                         progress={certsProgress}
@@ -146,6 +123,7 @@ const WelcomePage: FC = () => {
                             certificationsGroups={certificationsGroups}
                             selectedCategory={selectedCategory}
                             certificationsProgresses={userCertsData.progresses}
+                            onSelectCategory={onSelectCategory}
                         />
                     )}
                 </div>

src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.module.scss

@@ -45,7 +45,7 @@
         @include ltemd {
             flex-direction: column;
             align-items: flex-start;
-            padding-bottom: 0;
+            padding-bottom: $space-xxl;
 
             h2 {
                 margin: $space-md 0 $space-xxl;

src-ts/tools/learn/welcome/available-courses-list/AvailableCoursesList.tsx

@@ -1,9 +1,10 @@
 import { Dictionary } from 'lodash'
-import { FC, Fragment, ReactNode } from 'react'
+import { ChangeEvent, FC, Fragment, ReactNode, useMemo } from 'react'
 import classNames from 'classnames'
 
 import { LearnCertification, LearnUserCertificationProgress } from '../../learn-lib'
 import { CoursesCard } from '../courses-card'
+import { FilterBar } from '../filter-bar'
 
 import styles from './AvailableCoursesList.module.scss'
 
@@ -13,6 +14,7 @@ interface AvailableCoursesListProps {
     certificationsGroups: Array<string>
     selectedCategory: string
     certificationsProgresses: ReadonlyArray<LearnUserCertificationProgress>
+    onSelectCategory: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
 const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCoursesListProps) => {
@@ -41,6 +43,20 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
         </Fragment>
     )
 
+    // compute all the available category dropdown options
+    const certsCategoriesOptions: Array<{
+        label: string,
+        value: string,
+    }> = useMemo(() => [
+        { label: 'All Categories', orderIndex: -1, value: '' },
+        ...Object.keys(props.certsByCategory)
+            .sort()
+            .map(c => ({
+                label: c,
+                value: c,
+            })),
+    ], [props.certsByCategory])
+
     return (
         <div className={styles.wrap}>
             <div className={styles.coursesListHeaderWrap}>
@@ -52,6 +68,11 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
                         </span>
                     </h2>
 
+                    <FilterBar
+                        certsCategoriesOptions={certsCategoriesOptions}
+                        onSelectCategory={props.onSelectCategory}
+                        selectedCategory={props.selectedCategory}
+                    />
                 </div>
 
                 <div className={styles.teaseBanner}>

src-ts/tools/learn/welcome/filter-bar/FilterBar.module.scss

@@ -3,7 +3,6 @@
 .coursesListFilters {
     display: flex;
     margin-left: auto;
-    margin-top: $space-xxxxl;
 
     gap: $space-xxl;
 

src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: column;
     margin-bottom: $space-xxxxl;
+    margin-top: $space-xxl;
 
     @include ltemd {
         margin-bottom: 0;