fix(panel): simplify show fetching

Author: dvcol

src/components/views/panel/ShowPanel.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { NFlex, NSkeleton } from 'naive-ui';
-import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
-
-import type {
-  TraktEpisodeExtended,
-  TraktEpisodeShort,
-} from '~/models/trakt/trakt-episode.model';
-import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
+import { computed, onMounted, toRefs, watch } from 'vue';
 
 import TitleLink from '~/components/common/buttons/TitleLink.vue';
 import PanelPoster from '~/components/views/panel/PanelPoster.vue';
@@ -16,7 +10,7 @@ import ShowPanelOverview from '~/components/views/panel/ShowPanelOverview.vue';
 import ShowPanelPicker from '~/components/views/panel/ShowPanelPicker.vue';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useListsStoreRefs, useListStore } from '~/stores/data/list.store';
-import { type ShowSeasons, useShowStore } from '~/stores/data/show.store';
+import { useShowStore } from '~/stores/data/show.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils';
 import { deCapitalise } from '~/utils/string.utils';
@@ -36,14 +30,17 @@ const props = defineProps({
   },
 });
 
-const show = ref<TraktShowExtended>();
-const seasons = ref<ShowSeasons>();
-const episodes = ref<TraktEpisodeShort[]>();
-const episode = ref<TraktEpisodeExtended>();
-
 const { showId, seasonNumber, episodeNumber } = toRefs(props);
 
 const {
+  getShow,
+  fetchShow,
+  getShowSeasons,
+  fetchShowSeasons,
+  getShowSeasonEpisodes,
+  fetchShowSeasonEpisodes,
+  getShowEpisode,
+  fetchShowEpisode,
   getShowWatchedProgress,
   getShowCollectionProgress,
   getShowProgressLoading,
@@ -92,6 +89,31 @@ const panelType = computed<'show' | 'season' | 'episode'>(() => {
   return 'show';
 });
 
+const show = computed(() => {
+  if (!showId?.value) return;
+  return getShow(showId.value).value;
+});
+
+const seasons = computed(() => {
+  if (!showId?.value) return;
+  return getShowSeasons(showId.value).value;
+});
+
+const episodes = computed(() => {
+  if (!showId?.value || seasonNb?.value === undefined) return;
+  return getShowSeasonEpisodes(showId.value, seasonNb.value).value;
+});
+
+const episode = computed(() => {
+  if (!showId?.value || seasonNb?.value === undefined || episodeNb?.value === undefined)
+    return;
+  return getShowEpisode({
+    id: showId.value,
+    season: seasonNb.value,
+    episode: episodeNb.value,
+  }).value;
+});
+
 const season = computed(() => {
   if (seasonNb?.value === undefined) return;
   return seasons.value?.[seasonNb.value];
@@ -162,66 +184,25 @@ const titleUrl = computed(() => {
   });
 });
 
-const subscriptions = new Set<() => void>();
-
-const { getShowRef, getShowSeasonsRef, getShowSeasonEpisodesRef, getShowEpisodeRef } =
-  useShowStore();
-
-const watchData = () =>
+onMounted(() => {
   watch(
     [showId, seasonNb, episodeNb],
-    (next, prev) => {
-      // show changes
-      if (next.at(0) !== prev?.at(0)) {
-        show.value = undefined;
-        seasons.value = undefined;
-        episodes.value = undefined;
-        episode.value = undefined;
-      }
-      // season changes
-      else if (next.at(1) !== prev?.at(1)) {
-        episode.value = undefined;
-        episodes.value = undefined;
-      }
-      // episode changes
-      else if (next.at(2) !== prev?.at(2)) {
-        episode.value = undefined;
-      }
+    ([_showId, _seasonNb, _episodeNb]) => {
+      if (_showId !== undefined) {
+        fetchShow(_showId);
+        fetchShowSeasons(_showId);
 
-      if (showId?.value) {
-        subscriptions.add(getShowRef(showId.value, show).unsub);
-        subscriptions.add(getShowSeasonsRef(showId.value, seasons).unsub);
-
-        if (seasonNb?.value !== undefined) {
-          subscriptions.add(
-            getShowSeasonEpisodesRef(showId.value, seasonNb?.value, episodes).unsub,
-          );
+        if (_seasonNb !== undefined) {
+          fetchShowSeasonEpisodes(_showId, _seasonNb);
         }
 
-        if (seasonNb?.value !== undefined && episodeNb?.value !== undefined) {
-          subscriptions.add(
-            getShowEpisodeRef(
-              {
-                id: showId.value,
-                season: seasonNb.value,
-                episode: episodeNb.value,
-              },
-              episode,
-            ).unsub,
-          );
+        if (_seasonNb !== undefined && _episodeNb !== undefined) {
+          fetchShowEpisode(_showId, _seasonNb, _episodeNb);
         }
       }
     },
     { immediate: true },
   );
-
-onMounted(() => {
-  subscriptions.add(watchData());
-});
-
-onUnmounted(() => {
-  subscriptions.forEach(unsub => unsub());
-  subscriptions.clear();
 });
 
 const { openTab } = useExtensionSettingsStore();

src/stores/data/show.store.ts

@@ -1,6 +1,6 @@
 import { defineStore, storeToRefs } from 'pinia';
 
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive } from 'vue';
 
 import type { TraktEpisodeExtended, TraktEpisodeShort } from '~/models/trakt/trakt-episode.model';
 import type { TraktCollectionProgress, TraktWatchedProgress } from '~/models/trakt/trakt-progress.model';
@@ -10,7 +10,6 @@ import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
 import { type ShowProgress, ShowProgressType } from '~/models/list-scroll.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
-import { asyncRefGetter } from '~/utils/vue.utils';
 
 export type ShowSeasons = Record<number, TraktSeasonExtended>;
 
@@ -206,42 +205,33 @@ export const useShowStore = defineStore('data.show', () => {
   };
 
   const getShowLoading = (id: number | string) => computed(() => showsLoading[id.toString()]);
-  const getShow = async (id: number | string) => {
-    if (!shows[id.toString()] && !showsLoading[id.toString()]) await fetchShow(id.toString());
-    return shows[id.toString()];
-  };
-  const getShowRef = (id: number | string, response = ref<TraktShowExtended>()) => asyncRefGetter(() => getShow(id), getShowLoading(id), response);
+  const getShow = (id: number | string) =>
+    computed(() => {
+      if (showsLoading[id.toString()]) return undefined;
+      return shows[id.toString()];
+    });
 
   const getSeasonsLoading = (id: number | string) => computed(() => showsSeasonsLoading[id.toString()]);
-  const getShowSeasons = async (id: number | string) => {
-    if (!showsSeasons[id.toString()] && !showsSeasonsLoading[id.toString()]) await fetchShowSeasons(id.toString());
-    return showsSeasons[id.toString()];
-  };
-  const getShowSeasonsRef = (id: number | string, response = ref<ShowSeasons>()) =>
-    asyncRefGetter(() => getShowSeasons(id), getSeasonsLoading(id), response);
+  const getShowSeasons = (id: number | string) =>
+    computed(() => {
+      if (showsSeasonsLoading[id.toString()]) return undefined;
+      return showsSeasons[id.toString()];
+    });
 
   const getSeasonEpisodesLoading = (id: number | string, season: number) => computed(() => showsSeasonEpisodesLoading[id.toString()]?.[season]);
-  const getShowSeasonEpisodes = async (id: number | string, season: number) => {
-    if (!showsSeasonEpisodes[id.toString()]?.[season] && !showsSeasonEpisodesLoading[id.toString()]?.[season]) {
-      await fetchShowSeasonEpisodes(id.toString(), season);
-    }
-    return showsSeasonEpisodes[id.toString()]?.[season];
-  };
-  const getShowSeasonEpisodesRef = (id: number | string, season: number, response = ref<TraktEpisodeShort[]>()) =>
-    asyncRefGetter(() => getShowSeasonEpisodes(id, season), getSeasonEpisodesLoading(id, season), response);
+  const getShowSeasonEpisodes = (id: number | string, season: number) =>
+    computed(() => {
+      if (showsSeasonEpisodesLoading[id.toString()]?.[season]) return undefined;
+      return showsSeasonEpisodes[id.toString()]?.[season];
+    });
 
   const getEpisodesLoading = (id: number | string, season: number, episode: number) =>
     computed(() => showsEpisodesLoading[id.toString()]?.[season]?.[episode]);
-  const getShowEpisode = async ({ id, season, episode }: { id: number | string; season: number; episode: number }) => {
-    if (!showsEpisodes[id.toString()]?.[season]?.[episode] && !showsEpisodesLoading[id.toString()]?.[season]?.[episode]) {
-      await fetchShowEpisode(id.toString(), season, episode);
-    }
-    return showsEpisodes[id.toString()]?.[season]?.[episode];
-  };
-  const getShowEpisodeRef = (
-    { id, season, episode }: { id: number | string; season: number; episode: number },
-    response = ref<TraktEpisodeExtended>(),
-  ) => asyncRefGetter(() => getShowEpisode({ id, season, episode }), getEpisodesLoading(id, season, episode), response);
+  const getShowEpisode = ({ id, season, episode }: { id: number | string; season: number; episode: number }) =>
+    computed(() => {
+      if (showsEpisodesLoading[id.toString()]?.[season]?.[episode]) return undefined;
+      return showsEpisodes[id.toString()]?.[season]?.[episode];
+    });
 
   const getShowProgressLoading = (id: number | string) => computed(() => showWatchedProgressLoading[id.toString()]);
   const getShowWatchedProgress = (id: number | string) => {
@@ -267,16 +257,16 @@ export const useShowStore = defineStore('data.show', () => {
   return {
     clearState,
     getShow,
-    getShowRef,
+    fetchShow,
     getShowLoading,
     getShowSeasons,
-    getShowSeasonsRef,
+    fetchShowSeasons,
     getSeasonsLoading,
     getShowSeasonEpisodes,
-    getShowSeasonEpisodesRef,
+    fetchShowSeasonEpisodes,
     getSeasonEpisodesLoading,
     getShowEpisode,
-    getShowEpisodeRef,
+    fetchShowEpisode,
     getEpisodesLoading,
     getShowWatchedProgress,
     getShowProgressLoading,