Skip to content

Commit 32deed8

Browse files
jkacheljkachel
committed
Update section component to work with the new version of the API
1 parent 1cf3a87 commit 32deed8

2 files changed

Lines changed: 92 additions & 93 deletions

File tree

‎frontends/api/src/mitxonline/test-utils/factories/pages.ts‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -164,12 +164,32 @@ const coursePageItem: PartialFactory<CoursePageItem> = (override) => {
164164
],
165165
video_url: faker.internet.url(),
166166
what_you_learn: makeHTMLList(5),
167-
hyl_choice_realworld_learning: true,
168-
hyl_choice_learn_by_doing: true,
169-
hyl_choice_learn_from_others: false,
170-
hyl_choice_learn_on_demand: false,
171-
hyl_choice_ai_enabled_support: true,
172-
hyl_choice_stackable_credentials: true,
167+
how_youll_learn: [
168+
{
169+
key: "learn_by_doing",
170+
icon: "IconComputerBulb",
171+
title: "Learn by doing",
172+
text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
173+
},
174+
{
175+
key: "realworld_learning",
176+
icon: "IconConnectedPeople",
177+
title: "Real-world learning",
178+
text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
179+
},
180+
{
181+
key: "learn_from_others",
182+
icon: "IconConnectedPeople",
183+
title: "Learn from others",
184+
text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
185+
},
186+
{
187+
key: "learn_on_demand",
188+
icon: "IconComputerBulb",
189+
title: "Learn on demand",
190+
text: "Access course materials anytime, anywhere, and learn at your own pace.",
191+
},
192+
],
173193
}
174194
return mergeOverrides<CoursePageItem>(defaults, override)
175195
}
@@ -221,12 +241,32 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
221241
faq_url: faker.internet.url(),
222242
about: makeHTMLParagraph(3),
223243
what_you_learn: makeHTMLList(5),
224-
hyl_choice_realworld_learning: true,
225-
hyl_choice_learn_by_doing: true,
226-
hyl_choice_learn_from_others: false,
227-
hyl_choice_learn_on_demand: false,
228-
hyl_choice_ai_enabled_support: true,
229-
hyl_choice_stackable_credentials: true,
244+
how_youll_learn: [
245+
{
246+
key: "learn_by_doing",
247+
icon: "IconComputerBulb",
248+
title: "Learn by doing",
249+
text: "Apply what you learn with interactive exercises, projects, and real-world case studies.",
250+
},
251+
{
252+
key: "realworld_learning",
253+
icon: "IconConnectedPeople",
254+
title: "Real-world learning",
255+
text: "Engage with real-world scenarios and examples to understand how concepts apply in practice.",
256+
},
257+
{
258+
key: "learn_from_others",
259+
icon: "IconConnectedPeople",
260+
title: "Learn from others",
261+
text: "Collaborate with peers and learn from their perspectives through group projects and discussions.",
262+
},
263+
{
264+
key: "learn_on_demand",
265+
icon: "IconComputerBulb",
266+
title: "Learn on demand",
267+
text: "Access course materials anytime, anywhere, and learn at your own pace.",
268+
},
269+
],
230270
feature_image: featureImage(),
231271
video_url: faker.datatype.boolean() ? faker.internet.url() : null,
232272
faculty_section_title: "Meet your instructors",

‎frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx‎

Lines changed: 40 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const HowYoullLearnHeader = styled.div({
5454
alignItems: "center",
5555
})
5656

57-
const HowYoullLearnIcon = styled(Image)({
57+
const HowYoullLearnIconImage = styled(Image)({
5858
width: "80px",
5959
height: "50px",
6060
flexShrink: 0,
@@ -74,105 +74,65 @@ const HowYoullLearnDescription = styled.p(({ theme }) => ({
7474
},
7575
}))
7676

77-
// These fields come from the CMS page types. Once @mitodl/mitxonline-api-axios
78-
// is published with these fields, this can be replaced with:
79-
// Extract<keyof CoursePageItem & keyof ProgramPageItem, `hyl_choice_${string}`>
80-
type HylChoiceKey =
81-
| "hyl_choice_realworld_learning"
82-
| "hyl_choice_learn_by_doing"
83-
| "hyl_choice_learn_from_others"
84-
| "hyl_choice_learn_on_demand"
85-
| "hyl_choice_ai_enabled_support"
86-
| "hyl_choice_stackable_credentials"
77+
const HowYoullLearnIcon: React.FC<{
78+
src: string
79+
width: number
80+
height: number
81+
alt: string
82+
}> = ({ src, width, height, alt }) => {
83+
let iconSrc: typeof IconBrains | null = null
84+
switch (src) {
85+
case "IconBrains":
86+
iconSrc = IconBrains
87+
break
88+
case "IconCertificate":
89+
iconSrc = IconCertificate
90+
break
91+
case "IconComputerBulb":
92+
iconSrc = IconComputerBulb
93+
break
94+
case "IconConnectedPeople":
95+
iconSrc = IconConnectedPeople
96+
break
97+
default:
98+
console.warn(`Unknown how_youll_learn icon: ${src}`)
99+
}
87100

88-
type HowYoullLearnItemData = {
89-
icon: typeof IconComputerBulb
90-
title: string
91-
text: string
92-
}
93-
type HowYoullLearnOption = {
94-
name: HylChoiceKey
95-
data: HowYoullLearnItemData
101+
return (
102+
iconSrc && (
103+
<HowYoullLearnIconImage
104+
src={iconSrc}
105+
width={width}
106+
height={height}
107+
alt={alt}
108+
/>
109+
)
110+
)
96111
}
97112

98-
const HOW_YOULL_LEARN_OPTIONS: HowYoullLearnOption[] = [
99-
{
100-
name: "hyl_choice_realworld_learning",
101-
data: {
102-
icon: IconConnectedPeople,
103-
title: "Real-World Learning",
104-
text: "Learn from MIT faculty and experts who ground their teaching in real-world cases rather than mathematical models, making the material approachable for all.",
105-
},
106-
},
107-
{
108-
name: "hyl_choice_learn_by_doing",
109-
data: {
110-
icon: IconBrains,
111-
title: "Practical Application",
112-
text: "Apply your new knowledge with hands-on, practical exercises drawn from healthcare, sports, finance, sustainability, and more.",
113-
},
114-
},
115-
{
116-
name: "hyl_choice_learn_from_others",
117-
data: {
118-
icon: IconBrains,
119-
title: "Learn From Others",
120-
text: "Connect with an international community of professionals working on real-world projects.",
121-
},
122-
},
123-
{
124-
name: "hyl_choice_learn_on_demand",
125-
data: {
126-
icon: IconBrains,
127-
title: "Learn On Demand",
128-
text: "Access all course content online with complete flexibility to study at your own pace.",
129-
},
130-
},
131-
{
132-
name: "hyl_choice_ai_enabled_support",
133-
data: {
134-
icon: IconComputerBulb,
135-
title: "AI-Enabled Support",
136-
text: "Deepen your understanding of the course material and get help on assignments from AskTIM, the AI assistant built by MIT researchers.",
137-
},
138-
},
139-
{
140-
name: "hyl_choice_stackable_credentials",
141-
data: {
142-
icon: IconCertificate,
143-
title: "Stackable Credentials",
144-
text: "Earn an MIT Open Learning certificate at each milestone—module, course, and program—demonstrating your AI expertise. Available in paid courses only.",
145-
},
146-
},
147-
]
148-
149113
const HowYoullLearnSection: React.FC<{
150114
page: CoursePageItem | ProgramPageItem
151115
}> = ({ page }) => {
152-
const filteredOptions = HOW_YOULL_LEARN_OPTIONS.filter(
153-
(option) =>
154-
(page as Record<HylChoiceKey, boolean | undefined>)[option.name] === true,
155-
)
116+
const filteredOptions = page.how_youll_learn ? page.how_youll_learn : []
117+
156118
return filteredOptions.length > 0 ? (
157119
<HowYoullLearnRoot aria-labelledby={HeadingIds.How}>
158120
<Typography variant="h4" component="h2" id={HeadingIds.How}>
159121
How you'll learn
160122
</Typography>
161123
<HowYoullLearnGrid>
162124
{filteredOptions.map((option) => (
163-
<HowYoullLearnItem key={option.name}>
125+
<HowYoullLearnItem key={option.key}>
164126
<HowYoullLearnHeader>
165127
<HowYoullLearnIcon
166-
src={option.data.icon}
128+
src={option.icon}
167129
width={80}
168130
height={50}
169131
alt=""
170132
/>
171-
<HowYoullLearnTitle>{option.data.title}</HowYoullLearnTitle>
133+
<HowYoullLearnTitle>{option.title}</HowYoullLearnTitle>
172134
</HowYoullLearnHeader>
173-
<HowYoullLearnDescription>
174-
{option.data.text}
175-
</HowYoullLearnDescription>
135+
<HowYoullLearnDescription>{option.text}</HowYoullLearnDescription>
176136
</HowYoullLearnItem>
177137
))}
178138
</HowYoullLearnGrid>
@@ -181,4 +141,3 @@ const HowYoullLearnSection: React.FC<{
181141
}
182142

183143
export default HowYoullLearnSection
184-
export type { HowYoullLearnItemData }

0 commit comments

Comments
 (0)