From 0d90f48f22980c8afbac87bbee16b018ec638579 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 14 Jun 2021 13:35:03 -0700
Subject: [PATCH] React Sublanding Fixes  (#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>
---
 .../context/ProductSubLandingContext.tsx       | 10 +++++-----
 components/sublanding/LearningTrack.tsx        | 18 +++++++++---------
 components/sublanding/LearningTracks.tsx       |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 0611a9cfd0..d701a9076f 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -6,7 +6,7 @@ export type FeaturedTrack = {
   title: string
   description: string
   guides?: Array<{ href: string; page: { type: string }; title: string; intro: string }>
-}
+} | null
 
 export type ArticleGuide = {
   href: string
@@ -45,12 +45,12 @@ export const getProductSubLandingContextFromRequest = (req: any): ProductSubLand
   return {
     ...pick(page, ['intro', 'allTopics']),
     title: req.context.productMap[req.context.currentProduct].name,
-    featuredTrack: {
+    featuredTrack: page.featuredTrack ? {
       ...pick(page.featuredTrack, ['title', 'description', 'trackName', 'guides']),
       guides: (page.featuredTrack?.guides || []).map((guide: any) => {
         return pick(guide, ['title', 'intro', 'href', 'page.type'])
-      }),
-    },
+      })
+    } : null,
     learningTracks: (page.learningTracks || []).map((track: any) => ({
       ...pick(track, ['title', 'description', 'trackName', 'guides']),
       guides: (track.guides || []).map((guide: any) => {
@@ -58,7 +58,7 @@ export const getProductSubLandingContextFromRequest = (req: any): ProductSubLand
       }),
     })),
     includeGuides: (page.includeGuides || []).map((guide: any) => {
-      return pick(guide, ['href', 'title', 'intro', 'type', 'topics'])
+      return pick(guide, ['href', 'title', 'intro', 'page.type', 'topics'])
     }),
   }
 }
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index 5341ca0c86..2e55420b1f 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -9,9 +9,9 @@ type Props = {
 
 const MAX_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
-  const [visibleGuides, setVisibleGuides] = useState(track.guides?.slice(0, 4))
+  const [visibleGuides, setVisibleGuides] = useState(track?.guides?.slice(0, 4))
   const showAll = () => {
-    setVisibleGuides(track.guides)
+    setVisibleGuides(track?.guides)
   }
   const { t } = useTranslation('product_sublanding')
 
@@ -21,16 +21,16 @@ export const LearningTrack = ({ track }: Props) => {
         <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
           <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
             <div className="my-xl-0 mr-xl-3">
-              <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track.title}</h5>
+              <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track?.title}</h5>
               <p className="color-text-inverse truncate-overflow-3 learning-track--description">
-                {track.description}
+                {track?.description}
               </p>
             </div>
           </div>
           <a
             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"
             role="button"
-            href={`${track.guides && track.guides[0].href}?learn=${track.trackName}`}
+            href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
           >
             {t('start')}
             <span className="mr-2">
@@ -42,10 +42,10 @@ export const LearningTrack = ({ track }: Props) => {
           <div>
             <a
               className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
-              href={`${guide.href}?learn=${track.trackName}`}
+              href={`${guide.href}?learn=${track?.trackName}`}
             >
               <div className="circle color-bg-tertiary d-inline-flex mr-4">
-                {track.guides && (
+                {track?.guides && (
                   <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">
                     {track.guides?.indexOf(guide) + 1}
                   </span>
@@ -56,7 +56,7 @@ export const LearningTrack = ({ track }: Props) => {
                 {t('guide_types')[guide.page.type]}
               </div>
             </a>
-            {track.guides && track.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
+            {track?.guides && track?.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
               <button
                 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"
                 onClick={showAll}
@@ -66,7 +66,7 @@ export const LearningTrack = ({ track }: Props) => {
                   style={{ bottom: '50px' }}
                 ></div>
                 <span>
-                  Show {track.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
+                  Show {track?.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
                 </span>
               </button>
             ) : (
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index dce7f0af00..96b9462066 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -8,7 +8,7 @@ export const LearningTracks = () => {
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
         {(learningTracks || []).map((track) => {
-          return <LearningTrack key={track.title} track={track} />
+          return <LearningTrack key={track?.title} track={track} />
         })}
       </div>
     </div>