From 3a7ad779d3474965683d608da300247fd4a60b60 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Sun, 15 Sep 2024 21:20:13 -0700
Subject: [PATCH] fix: use of .sort() in Podcast templates (#618)

* fixing use of .sort() in Podcast templates

* fixing ts errors
---
 .../PodcastSeriesCarousel.vue                 | 64 ++++++++++++-------
 .../PageAudioDetail/PageAudioDetail.vue       |  1 +
 .../PageImageDetail/PageImageDetail.vue       | 49 ++++----------
 .../templates/www/PagePodcast/PagePodcast.vue |  4 +-
 packages/vue/tsconfig.json                    |  2 +-
 5 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue b/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue
index fc13889d..5737bc87 100644
--- a/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue
+++ b/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue
@@ -46,7 +46,7 @@
         :initial-slide="
           activeSeasonId === initialSeasonId && initialEpisodeIndex ? initialEpisodeIndex : 0
         "
-        :slides="activeTabData.episodes"
+        :slides="activeTabData.episodes as Partial<Slide>[]"
       />
     </keep-alive>
   </div>
@@ -61,9 +61,10 @@ import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
 
 const route = useRoute()
 
-interface ActiveTab {
+interface Slide {
+  url: string
   title: string
-  episodes: Episode[]
+  thumbnailImage: Partial<ImageObject>
 }
 
 interface Episode {
@@ -72,19 +73,25 @@ interface Episode {
   publicationDate: any
   thumbnailImage: Partial<ImageObject>
 }
+
+interface ActiveTab {
+  title?: string
+  episodes?: Episode[] | Season
+}
+
 interface Season {
   id: string
-  url: string
-  title: string
-  seasonNumber: number
-  episodes: Episode[]
+  url?: string
+  title?: string
+  seasonNumber?: number
+  episodes?: Episode[]
 }
 
 interface Series {
   id: string
-  title: string
-  url: string
-  seasons: Season[]
+  title?: string
+  url?: string
+  seasons?: Season[]
 }
 export default defineComponent({
   name: 'PodcastSeriesCarousel',
@@ -111,11 +118,17 @@ export default defineComponent({
     }
   },
   computed: {
-    sortedSeasons(): Season[] | null {
-      let seasons = null
+    sortedSeasons(): Season[] | undefined {
+      let seasons = undefined
       if (this.series && this.series.seasons) {
         seasons = this.series.seasons
-        return seasons.sort((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+        // @ts-expect-error seasons is an array
+        seasons = seasons.toSorted((a: Season, b: Season) => {
+          if (a.seasonNumber && b.seasonNumber) {
+            return a.seasonNumber - b.seasonNumber
+          }
+        })
+        return seasons
       }
       return seasons
     },
@@ -142,9 +155,9 @@ export default defineComponent({
       }
       return null
     },
-    activeTabData(): ActiveTab | undefined {
-      let season: Season | undefined = undefined
-      if (this.series?.seasons) {
+    activeTabData(): ActiveTab | Season | undefined {
+      let season
+      if (this.series?.seasons?.length) {
         if (this.activeSeasonId) {
           season = this.series.seasons.find((o: Season) => {
             return o.id === this.activeSeasonId
@@ -152,14 +165,21 @@ export default defineComponent({
         } else {
           season = this.series.seasons[0]
         }
-        if (season?.episodes) {
-          season.episodes.sort(
-            (a: Episode, b: Episode) =>
-              new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
-          )
+        if (season?.episodes?.length) {
+          let episodes: Episode[] = season.episodes
+          // @ts-expect-error episodes is an array
+          episodes = episodes.toSorted((a: Episode, b: Episode) => {
+            if (a.publicationDate && b.publicationDate) {
+              return new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
+            }
+          })
+          season = {
+            ...season,
+            episodes: episodes
+          }
         }
       }
-      return season ? season : undefined
+      return season
     }
   },
   methods: {
diff --git a/packages/vue/src/templates/PageAudioDetail/PageAudioDetail.vue b/packages/vue/src/templates/PageAudioDetail/PageAudioDetail.vue
index dbe7d719..cb5a4fa7 100644
--- a/packages/vue/src/templates/PageAudioDetail/PageAudioDetail.vue
+++ b/packages/vue/src/templates/PageAudioDetail/PageAudioDetail.vue
@@ -204,6 +204,7 @@
     </LayoutHelper>
 
     <PodcastSeriesCarousel
+      v-if="data?.series"
       :series="data.series"
       :initial-season-id="data.parent ? data.parent.id : null"
       class="mb-12 lg:mb-24"
diff --git a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
index 29198335..1c21aca7 100755
--- a/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
+++ b/packages/vue/src/templates/PageImageDetail/PageImageDetail.vue
@@ -215,9 +215,9 @@
     </LayoutHelper>
     <LayoutHelper
       v-if="
-        (data.keepExploringMission && data.keepExploringMission.length) ||
-        (data.keepExploringTarget && data.keepExploringTarget.length) ||
-        (data.keepExploringInstrument && data.keepExploringInstrument.length)
+        data.keepExploringMission?.length ||
+        data.keepExploringTarget?.length ||
+        data.keepExploringInstrument?.length
       "
       indent="col-2"
     >
@@ -228,12 +228,7 @@
       </h2>
       <ul class="TopicTabs flex flex-row flex-wrap justify-start pb-4 mb-5 list-none">
         <li
-          v-if="
-            data.relatedMission &&
-            data.relatedMission.length &&
-            data.keepExploringMission &&
-            data.keepExploringMission.length
-          "
+          v-if="data.relatedMission?.length && data.keepExploringMission?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -247,12 +242,7 @@
           </button>
         </li>
         <li
-          v-if="
-            data.targets &&
-            data.targets.length &&
-            data.keepExploringTarget &&
-            data.keepExploringTarget.length
-          "
+          v-if="data.targets?.length && data.keepExploringTarget?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -265,12 +255,7 @@
           </button>
         </li>
         <li
-          v-if="
-            data.instruments &&
-            data.instruments.length &&
-            data.keepExploringInstrument &&
-            data.keepExploringInstrument.length
-          "
+          v-if="data.instruments?.length && data.keepExploringInstrument?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -285,9 +270,7 @@
       </ul>
     </LayoutHelper>
     <keep-alive>
-      <template
-        v-if="openTab === 1 && data.keepExploringMission && data.keepExploringMission.length"
-      >
+      <template v-if="openTab === 1 && data.keepExploringMission?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -295,9 +278,7 @@
           :slides="data.keepExploringMission"
         />
       </template>
-      <template
-        v-else-if="openTab === 2 && data.keepExploringTarget && data.keepExploringTarget.length"
-      >
+      <template v-else-if="openTab === 2 && data.keepExploringTarget?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -305,11 +286,7 @@
           :slides="data.keepExploringTarget"
         />
       </template>
-      <template
-        v-else-if="
-          openTab === 3 && data.keepExploringInstrument && data.keepExploringInstrument.length
-        "
-      >
+      <template v-else-if="openTab === 3 && data.keepExploringInstrument?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -319,7 +296,7 @@
       </template>
     </keep-alive>
     <div
-      v-if="data.relatedTopics && data.relatedTopics.length"
+      v-if="data.relatedTopics?.length"
       class="bg-gray-light lg:py-24 py-12"
     >
       <BlockLinkCarousel
@@ -386,11 +363,11 @@ export default defineComponent({
   methods: {
     initExploreCarousels() {
       if (this.data) {
-        if (this.data.keepExploringMission && this.data.keepExploringMission.length) {
+        if (this.data.keepExploringMission?.length) {
           this.openTab = 1
-        } else if (this.data.keepExploringTarget && this.data.keepExploringTarget.length) {
+        } else if (this.data.keepExploringTarget?.length) {
           this.openTab = 2
-        } else if (this.data.keepExploringInstrument && this.data.keepExploringInstrument.length) {
+        } else if (this.data.keepExploringInstrument?.length) {
           this.openTab = 3
         }
       }
diff --git a/packages/vue/src/templates/www/PagePodcast/PagePodcast.vue b/packages/vue/src/templates/www/PagePodcast/PagePodcast.vue
index 6b707688..da029fbc 100755
--- a/packages/vue/src/templates/www/PagePodcast/PagePodcast.vue
+++ b/packages/vue/src/templates/www/PagePodcast/PagePodcast.vue
@@ -207,10 +207,10 @@ export default defineComponent({
       return this.defaultShowGridView
     },
     sortedSeasons() {
-      let seasons = null
+      let seasons = undefined
       if (this.data && this.data.seasons) {
         seasons = this.data.seasons
-        return seasons.sort((a, b) => a.seasonNumber - b.seasonNumber)
+        seasons = seasons.toSorted((a, b) => a.seasonNumber - b.seasonNumber)
       }
       return seasons
     }
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 37bc1c6c..bcceb5fd 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable", "ESNext.Array"],
     "skipLibCheck": true,
 
     /* Bundler mode */