Skip to content

Commit 0d90f48

Browse files
graceparkheiskr
andauthored
React Sublanding Fixes (github#19894)
* fixing a couple issue with the sublanding - nulls and page.type * learning track null error fix Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>
1 parent f0a083d commit 0d90f48

3 files changed

Lines changed: 15 additions & 15 deletions

File tree

‎components/context/ProductSubLandingContext.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export type FeaturedTrack = {
66
title: string
77
description: string
88
guides?: Array<{ href: string; page: { type: string }; title: string; intro: string }>
9-
}
9+
} | null
1010

1111
export type ArticleGuide = {
1212
href: string
@@ -45,20 +45,20 @@ export const getProductSubLandingContextFromRequest = (req: any): ProductSubLand
4545
return {
4646
...pick(page, ['intro', 'allTopics']),
4747
title: req.context.productMap[req.context.currentProduct].name,
48-
featuredTrack: {
48+
featuredTrack: page.featuredTrack ? {
4949
...pick(page.featuredTrack, ['title', 'description', 'trackName', 'guides']),
5050
guides: (page.featuredTrack?.guides || []).map((guide: any) => {
5151
return pick(guide, ['title', 'intro', 'href', 'page.type'])
52-
}),
53-
},
52+
})
53+
} : null,
5454
learningTracks: (page.learningTracks || []).map((track: any) => ({
5555
...pick(track, ['title', 'description', 'trackName', 'guides']),
5656
guides: (track.guides || []).map((guide: any) => {
5757
return pick(guide, ['title', 'intro', 'href', 'page.type'])
5858
}),
5959
})),
6060
includeGuides: (page.includeGuides || []).map((guide: any) => {
61-
return pick(guide, ['href', 'title', 'intro', 'type', 'topics'])
61+
return pick(guide, ['href', 'title', 'intro', 'page.type', 'topics'])
6262
}),
6363
}
6464
}

‎components/sublanding/LearningTrack.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ type Props = {
99

1010
const MAX_VISIBLE_GUIDES = 4
1111
export const LearningTrack = ({ track }: Props) => {
12-
const [visibleGuides, setVisibleGuides] = useState(track.guides?.slice(0, 4))
12+
const [visibleGuides, setVisibleGuides] = useState(track?.guides?.slice(0, 4))
1313
const showAll = () => {
14-
setVisibleGuides(track.guides)
14+
setVisibleGuides(track?.guides)
1515
}
1616
const { t } = useTranslation('product_sublanding')
1717

@@ -21,16 +21,16 @@ export const LearningTrack = ({ track }: Props) => {
2121
<div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
2222
<div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
2323
<div className="my-xl-0 mr-xl-3">
24-
<h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track.title}</h5>
24+
<h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track?.title}</h5>
2525
<p className="color-text-inverse truncate-overflow-3 learning-track--description">
26-
{track.description}
26+
{track?.description}
2727
</p>
2828
</div>
2929
</div>
3030
<a
3131
className="d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0"
3232
role="button"
33-
href={`${track.guides && track.guides[0].href}?learn=${track.trackName}`}
33+
href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
3434
>
3535
{t('start')}
3636
<span className="mr-2">
@@ -42,10 +42,10 @@ export const LearningTrack = ({ track }: Props) => {
4242
<div>
4343
<a
4444
className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
45-
href={`${guide.href}?learn=${track.trackName}`}
45+
href={`${guide.href}?learn=${track?.trackName}`}
4646
>
4747
<div className="circle color-bg-tertiary d-inline-flex mr-4">
48-
{track.guides && (
48+
{track?.guides && (
4949
<span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">
5050
{track.guides?.indexOf(guide) + 1}
5151
</span>
@@ -56,7 +56,7 @@ export const LearningTrack = ({ track }: Props) => {
5656
{t('guide_types')[guide.page.type]}
5757
</div>
5858
</a>
59-
{track.guides && track.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
59+
{track?.guides && track?.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
6060
<button
6161
className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
6262
onClick={showAll}
@@ -66,7 +66,7 @@ export const LearningTrack = ({ track }: Props) => {
6666
style={{ bottom: '50px' }}
6767
></div>
6868
<span>
69-
Show {track.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
69+
Show {track?.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
7070
</span>
7171
</button>
7272
) : (

‎components/sublanding/LearningTracks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const LearningTracks = () => {
88
<div>
99
<div className="d-flex flex-wrap flex-items-start my-5 gutter">
1010
{(learningTracks || []).map((track) => {
11-
return <LearningTrack key={track.title} track={track} />
11+
return <LearningTrack key={track?.title} track={track} />
1212
})}
1313
</div>
1414
</div>

0 commit comments

Comments
 (0)