Skip to content

Commit ca29674

Browse files
authored
Merge pull request #550 from topcoder-platform/TCA-1105
TCA-1105 move category filter to course section
2 parents 7f22cd4 + 7b17c2d commit ca29674

File tree

5 files changed

+25
-26
lines changed

5 files changed

+25
-26
lines changed

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import '../../../lib/styles/index.scss'
2929
import { AvailableCoursesList } from './available-courses-list'
3030
import { WhatTCACanDo } from './what-tca-cando'
3131
import { TCCertifications } from './tc-certifications'
32-
import { FilterBar } from './filter-bar'
3332
import styles from './WelcomePage.module.scss'
3433

3534
const PRIORITY_CATEGORIES: ReadonlyArray<string> = [
@@ -68,20 +67,6 @@ const WelcomePage: FC = () => {
6867
groupBy(orderBy(allCertsData.certifications, 'title', 'asc'), 'certificationCategory.category')
6968
), [allCertsData.certifications])
7069

71-
// compute all the available category dropdown options
72-
const certsCategoriesOptions: Array<{
73-
label: string,
74-
value: string,
75-
}> = useMemo(() => [
76-
{ label: 'All Categories', orderIndex: -1, value: '' },
77-
...Object.keys(certsByCategory)
78-
.sort()
79-
.map(c => ({
80-
label: c,
81-
value: c,
82-
})),
83-
], [certsByCategory])
84-
8570
// create and sort the certificates groups
8671
const certificationsGroups: Array<string> = useMemo(() => orderBy(
8772
Object.keys(certsByCategory),
@@ -124,14 +109,6 @@ const WelcomePage: FC = () => {
124109

125110
<WhatTCACanDo />
126111

127-
<FilterBar
128-
certsCategoriesOptions={certsCategoriesOptions}
129-
onSelectCategory={onSelectCategory}
130-
selectedCategory={selectedCategory}
131-
/>
132-
133-
<PageDivider />
134-
135112
<TCCertifications
136113
certifications={allTCACertifications.certifications}
137114
progress={certsProgress}
@@ -146,6 +123,7 @@ const WelcomePage: FC = () => {
146123
certificationsGroups={certificationsGroups}
147124
selectedCategory={selectedCategory}
148125
certificationsProgresses={userCertsData.progresses}
126+
onSelectCategory={onSelectCategory}
149127
/>
150128
)}
151129
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
@include ltemd {
4646
flex-direction: column;
4747
align-items: flex-start;
48-
padding-bottom: 0;
48+
padding-bottom: $space-xxl;
4949

5050
h2 {
5151
margin: $space-md 0 $space-xxl;

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Dictionary } from 'lodash'
2-
import { FC, Fragment, ReactNode } from 'react'
2+
import { ChangeEvent, FC, Fragment, ReactNode, useMemo } from 'react'
33
import classNames from 'classnames'
44

55
import { LearnCertification, LearnUserCertificationProgress } from '../../learn-lib'
66
import { CoursesCard } from '../courses-card'
7+
import { FilterBar } from '../filter-bar'
78

89
import styles from './AvailableCoursesList.module.scss'
910

@@ -13,6 +14,7 @@ interface AvailableCoursesListProps {
1314
certificationsGroups: Array<string>
1415
selectedCategory: string
1516
certificationsProgresses: ReadonlyArray<LearnUserCertificationProgress>
17+
onSelectCategory: (e: ChangeEvent<HTMLInputElement>) => void
1618
}
1719

1820
const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCoursesListProps) => {
@@ -41,6 +43,20 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
4143
</Fragment>
4244
)
4345

46+
// compute all the available category dropdown options
47+
const certsCategoriesOptions: Array<{
48+
label: string,
49+
value: string,
50+
}> = useMemo(() => [
51+
{ label: 'All Categories', orderIndex: -1, value: '' },
52+
...Object.keys(props.certsByCategory)
53+
.sort()
54+
.map(c => ({
55+
label: c,
56+
value: c,
57+
})),
58+
], [props.certsByCategory])
59+
4460
return (
4561
<div className={styles.wrap}>
4662
<div className={styles.coursesListHeaderWrap}>
@@ -52,6 +68,11 @@ const AvailableCoursesList: FC<AvailableCoursesListProps> = (props: AvailableCou
5268
</span>
5369
</h2>
5470

71+
<FilterBar
72+
certsCategoriesOptions={certsCategoriesOptions}
73+
onSelectCategory={props.onSelectCategory}
74+
selectedCategory={props.selectedCategory}
75+
/>
5576
</div>
5677

5778
<div className={styles.teaseBanner}>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
.coursesListFilters {
44
display: flex;
55
margin-left: auto;
6-
margin-top: $space-xxxxl;
76

87
gap: $space-xxl;
98

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
display: flex;
55
flex-direction: column;
66
margin-bottom: $space-xxxxl;
7+
margin-top: $space-xxl;
78

89
@include ltemd {
910
margin-bottom: 0;

0 commit comments

Comments
 (0)