fixing use of .sort() in Podcast templates

nasa-jpl · Sep 15, 2024 · f2aecd6 · f2aecd6
1 parent 0268ca1
commit f2aecd6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 61 deletions.
diff --git a/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue b/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue
@@ -61,30 +61,31 @@ import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
 
 const route = useRoute()
 
-interface ActiveTab {
-  title: string
-  episodes: Episode[]
-}
-
 interface Episode {
   url: string
   title: string
   publicationDate: any
   thumbnailImage: Partial<ImageObject>
 }
+
+interface ActiveTab {
+  title?: string
+  episodes?: Episode[] | Season
+}
+
 interface Season {
-  id: string
-  url: string
-  title: string
-  seasonNumber: number
-  episodes: Episode[]
+  id?: string
+  url?: string
+  title?: string
+  seasonNumber?: number
+  episodes?: Episode[]
 }
 
 interface Series {
-  id: string
-  title: string
-  url: string
-  seasons: Season[]
+  id?: string
+  title?: string
+  url?: string
+  seasons?: Season[]
 }
 export default defineComponent({
   name: 'PodcastSeriesCarousel',
@@ -112,10 +113,11 @@ export default defineComponent({
   },
   computed: {
     sortedSeasons(): Season[] | null {
-      let seasons = null
+      let seasons = undefined
       if (this.series && this.series.seasons) {
         seasons = this.series.seasons
-        return seasons.sort((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+        seasons = seasons.toSorted((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+        return seasons
       }
       return seasons
     },
@@ -142,24 +144,29 @@ 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
           })
         } else {
           season = this.series.seasons[0]
         }
-        if (season?.episodes) {
-          season.episodes.sort(
+        if (season?.episodes?.length) {
+          let episodes: Episode[] = season.episodes
+          episodes = episodes.toSorted(
             (a: Episode, b: Episode) =>
               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
@@ -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
@@ -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,31 +270,23 @@
       </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"
           :aria-hidden="openTab === 1 ? 'false' : 'true'"
           :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"
           :aria-hidden="openTab === 2 ? 'false' : 'true'"
           :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
@@ -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
@@ -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 */