From af9a7aafae499a378ff040531a9bb9a4184e093b Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 3 Dec 2022 17:24:24 -0600
Subject: [PATCH] Add:Podcast latest page

---
 pages/bookshelf.vue        |  5 +++-
 pages/bookshelf/latest.vue | 53 +++++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/pages/bookshelf.vue b/pages/bookshelf.vue
index fc0d5478..10f4d215 100644
--- a/pages/bookshelf.vue
+++ b/pages/bookshelf.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full">
     <home-bookshelf-nav-bar />
-    <home-bookshelf-toolbar v-show="!isHome" />
+    <home-bookshelf-toolbar v-show="!isHome && !isLatest" />
     <div id="bookshelf-wrapper" class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
       <nuxt-child />
     </div>
@@ -16,6 +16,9 @@ export default {
   computed: {
     isHome() {
       return this.$route.name === 'bookshelf'
+    },
+    isLatest() {
+      return this.$route.name === 'bookshelf-latest'
     }
   }
 }
diff --git a/pages/bookshelf/latest.vue b/pages/bookshelf/latest.vue
index 0970d92d..23188a5b 100644
--- a/pages/bookshelf/latest.vue
+++ b/pages/bookshelf/latest.vue
@@ -1,14 +1,59 @@
 <template>
-  <div>Latest</div>
+  <div class="w-full p-4">
+    <h1 class="text-xl mb-2 font-semibold">Latest Episodes</h1>
+
+    <template v-for="episode in recentEpisodes">
+      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="episode.libraryItemId" :local-library-item-id="null" :is-local="isLocal" :key="episode.id" @addToPlaylist="addEpisodeToPlaylist" />
+    </template>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      processing: false,
+      recentEpisodes: [],
+      totalEpisodes: 0,
+      currentPage: 0,
+      localEpisodeMap: {},
+      isLocal: false
+    }
   },
   watch: {},
-  computed: {},
-  methods: {}
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async addEpisodeToPlaylist(episode) {
+      const libraryItem = await this.$axios.$get(`/api/items/${episode.libraryItemId}`).catch((error) => {
+        console.error('Failed to get library item', error)
+        this.$toast.error('Failed to get library item')
+        return null
+      })
+      if (!libraryItem) return
+
+      this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem, episode }])
+      this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
+    },
+    async loadRecentEpisodes(page = 0) {
+      this.processing = true
+      const episodePayload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
+        console.error('Failed to get recent episodes', error)
+        this.$toast.error('Failed to get recent episodes')
+        return null
+      })
+      this.processing = false
+      console.log('Episodes', episodePayload)
+      this.recentEpisodes = episodePayload.episodes || []
+      this.totalEpisodes = episodePayload.total
+      this.currentPage = page
+    }
+  },
+  mounted() {
+    this.loadRecentEpisodes()
+  }
 }
 </script>
\ No newline at end of file