feat(search): implement search page

dvcol · dvcol · commit 4c92c54c118d · 2024-03-24T21:26:42.000+01:00
diff --git a/src/components/common/list/ListItem.vue b/src/components/common/list/ListItem.vue
@@ -80,8 +80,16 @@ const emit = defineEmits<{
 
 const i18n = useI18n('list', 'item');
 
-const { item, noHeader, nextHasHeader, poster, episode, hideDate, scrollIntoView } =
-  toRefs(props);
+const {
+  item,
+  noHeader,
+  nextHasHeader,
+  poster,
+  episode,
+  hideDate,
+  scrollIntoView,
+  height,
+} = toRefs(props);
 
 const onHover = (_hover: boolean) => {
   emit('onHover', { item: item?.value, hover: _hover });
@@ -153,6 +161,8 @@ onBeforeUnmount(() => {
   });
 });
 
+const itemHeight = computed(() => (height?.value ? `${height.value}px` : undefined));
+
 const ListScrollItemTypeLocal = ListScrollItemType;
 </script>
 
@@ -167,7 +177,7 @@ const ListScrollItemTypeLocal = ListScrollItemType;
       'show-date': !hideDate,
     }"
     :style="{
-      '--list-item-height': height ? `${height}px` : undefined,
+      '--list-item-height': itemHeight,
     }"
     :data-key="item.id"
     :data-index="item.index"
@@ -222,7 +232,10 @@ const ListScrollItemTypeLocal = ListScrollItemType;
           <NImage
             alt="poster-image"
             class="poster"
-            :class="{ episode, loading: !imgLoaded }"
+            :class="{
+              episode,
+              loading: !imgLoaded,
+            }"
             :object-fit="objectFit"
             width="100%"
             lazy
diff --git a/src/components/common/list/ListScroll.model.ts b/src/components/common/list/ListScroll.model.ts
@@ -2,6 +2,7 @@ import type { NVirtualList, TagProps, VirtualListInst } from 'naive-ui';
 
 import type { Ref } from 'vue';
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
+import type { TraktList } from '~/models/trakt/trakt-list.model';
 import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
 import type { TraktPerson } from '~/models/trakt/trakt-people.model';
 import type { TraktSeason } from '~/models/trakt/trakt-season.model';
@@ -30,6 +31,7 @@ export type ListScrollSourceItem = {
   season?: TraktSeason<'short'>;
   episode?: TraktEpisode<'short'>;
   person?: TraktPerson<'short'>;
+  list?: TraktList<'short'>;
 };
 
 export type ListScrollItemTag = {
@@ -46,6 +48,7 @@ export const ListScrollItemType = {
   season: 'season',
   episode: 'episode',
   person: 'person',
+  list: 'list',
   loading: 'loading',
   loadMore: 'load-more',
   placeholder: 'placeholder',
diff --git a/src/components/common/list/use-list-scroll.ts b/src/components/common/list/use-list-scroll.ts
@@ -51,6 +51,7 @@ export const getDate = <D extends string, T extends ListScrollSourceItemWithDate
   const _date = typeof dateFn === 'function' ? dateFn(media) : media[dateFn];
   if (!_date) return;
   const date: ListScrollItem['date'] = { current: new Date(_date) };
+  if (date.current.toString() === 'Invalid Date') return;
   const previous = typeof dateFn === 'function' ? dateFn(array[index - 1]) : array[index - 1]?.[dateFn];
   if (index > 0 && previous) date.previous = new Date(previous);
   const next = typeof dateFn === 'function' ? dateFn(array[index + 1]) : array[index + 1]?.[dateFn];
@@ -84,9 +85,9 @@ export const getPosterQuery =
     } satisfies ImageQuery;
   };
 
-export const useListScroll = <D extends string, T extends ListScrollSourceItemWithDate<D>>(
+export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
   items: Ref<T[]>,
-  dateFn?: D | ((item: T) => ListScrollSourceItemWithDate<D>[D]),
+  dateFn?: D | ((item: T) => T[D]),
 ) => {
   return computed<ListScrollItem[]>(() => {
     const array = items.value;
@@ -122,7 +123,7 @@ export const useListScrollEvents = (
     pagination,
     loading,
     belowThreshold,
-  }: { data: Ref<ListScrollItem[]>; pagination: Ref<TraktClientPagination | undefined>; loading: Ref<boolean>; belowThreshold: Ref<boolean> },
+  }: { data: Ref<ListScrollItem[]>; pagination: Ref<TraktClientPagination | undefined>; loading: Ref<boolean>; belowThreshold?: Ref<boolean> },
 ) => {
   const onScroll: OnScroll = async listRef => {
     const key = data.value[data.value.length - 1].id;
@@ -142,7 +143,7 @@ export const useListScrollEvents = (
    */
   const onUpdated: OnUpdated = listRef => {
     const { scrollHeight, clientHeight } = listRef.value?.$el?.firstElementChild ?? {};
-    if (scrollHeight !== clientHeight || !belowThreshold.value || loading.value) return;
+    if (scrollHeight !== clientHeight || !belowThreshold?.value || loading.value) return;
 
     return onLoadMore();
   };
diff --git a/src/components/views/search/SearchComponent.vue b/src/components/views/search/SearchComponent.vue
@@ -1,11 +1,66 @@
 <script lang="ts" setup>
-// TODO
+import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
+import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
+import ListScroll from '~/components/common/list/ListScroll.vue';
+
+import {
+  useListScroll,
+  useListScrollEvents,
+} from '~/components/common/list/use-list-scroll';
+import {
+  type SearchResult,
+  useSearchStore,
+  useSearchStoreRefs,
+} from '~/stores/data/search.store';
+import { useI18n } from '~/utils';
+import { watchUserChange } from '~/utils/store.utils';
+
+const i18n = useI18n('search');
+
+const { searchResults, loading, pagination } = useSearchStoreRefs();
+const { fetchSearchResults, clearState } = useSearchStore();
+
+watchUserChange({
+  fetch: fetchSearchResults,
+  clear: clearState,
+});
+
+const list = useListScroll<SearchResult>(searchResults);
+
+const { onScroll } = useListScrollEvents(fetchSearchResults, {
+  data: list,
+  pagination,
+  loading,
+});
+
+const { scrolled, listRef, onClick } = useBackToTop();
 </script>
 
 <template>
-  <span>This is a search component</span>
+  <div class="container">
+    <ListScroll
+      ref="listRef"
+      hide-date
+      :items="list"
+      :loading="loading"
+      :scroll-threshold="300"
+      @on-scroll="scrolled = true"
+      @on-scroll-bottom="onScroll"
+    >
+      <template #default>
+        <!-- TODO buttons here-->
+      </template>
+    </ListScroll>
+
+    <FloatingButton :show="scrolled" @on-click="onClick">
+      {{ i18n('back_to_top', 'common', 'button') }}
+    </FloatingButton>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-// TODO
+.container {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/components/views/search/SearchNavbar.vue b/src/components/views/search/SearchNavbar.vue
@@ -13,6 +13,7 @@ import { type Component, computed, defineProps, h, ref } from 'vue';
 
 import type { TraktSearchType } from '~/models/trakt/trakt-search.model';
 
+import NavbarPageSizeSelect from '~/components/common/navbar/NavbarPageSizeSelect.vue';
 import IconAccount from '~/components/icons/IconAccount.vue';
 import IconChevronDown from '~/components/icons/IconChevronDownSmall.vue';
 import IconChevronUp from '~/components/icons/IconChevronUpSmall.vue';
@@ -22,20 +23,18 @@ import IconMovie from '~/components/icons/IconMovie.vue';
 import IconScreen from '~/components/icons/IconScreen.vue';
 import IconYoutube from '~/components/icons/IconYoutube.vue';
 
+import { SupportedSearchType, useSearchStoreRefs } from '~/stores/data/search.store';
 import { useI18n } from '~/utils';
 import { debounce } from '~/utils/debounce.utils';
 import { useDebouncedSearch } from '~/utils/store.utils';
 
 const i18n = useI18n('navbar', 'search');
 
-const DefaultSearchType: TraktSearchType[] = ['episode', 'show', 'movie', 'person'];
+const { search, types, query, pageSize, loading } = useSearchStoreRefs();
 
-const search = ref('');
-const escape = ref(false);
-const types = ref<TraktSearchType[]>(DefaultSearchType);
-const typeOptions = ref<TraktSearchType[]>(DefaultSearchType);
+const typeOptions = ref<TraktSearchType[]>(SupportedSearchType);
 
-const debouncedSearch = useDebouncedSearch(search);
+const debouncedSearch = useDebouncedSearch(search, 800);
 
 defineProps({
   parentElement: {
@@ -155,8 +154,7 @@ const hideTooltip = () => {
       placement="bottom"
       trigger="focus"
       :show-arrow="false"
-      ò
-      :disabled="!escape"
+      :disabled="!query"
       :delay="100"
       :to="parentElement"
       @mouseenter="showTooltip()"
@@ -166,13 +164,15 @@ const hideTooltip = () => {
       <NFlex class="list" vertical>
         <NFlex v-for="{ key, value } in specials" :key="key" :cols="2" :wrap="false">
           <span class="value">{{ value }}</span>
-          <span>{{ i18n(`tooltip_${ key }`) }}</span>
+          <span>{{ i18n('tooltip_' + key) }}</span>
         </NFlex>
       </NFlex>
       <template #trigger>
         <NInput
           v-model:value="debouncedSearch"
           class="search-input"
+          :loading="loading"
+          :disabled="loading"
           :placeholder="i18n('search', 'navbar')"
           autosize
           clearable
@@ -184,8 +184,10 @@ const hideTooltip = () => {
       </template>
     </NTooltip>
 
+    <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
     <NSwitch
-      v-model:value="escape"
+      v-if="false"
+      v-model:value="query"
       class="search-switch"
       :theme-overrides="{
         buttonColor: 'var(--search-switch-button-color)',
diff --git a/src/components/views/watchlist/WatchlistComponent.vue b/src/components/views/watchlist/WatchlistComponent.vue
@@ -28,7 +28,7 @@ watchUserChange({
   clear: clearState,
 });
 
-const list = useListScroll<AnyListDateTypes, AnyList>(
+const list = useListScroll<AnyList, AnyListDateTypes>(
   filteredListItems,
   anyListDateGetter,
 );
diff --git a/src/models/trakt/trakt-search.model.ts b/src/models/trakt/trakt-search.model.ts
@@ -1,12 +1,11 @@
 import type { TraktApiExtended, TraktApiParams, TraktApiParamsExtended, TraktApiParamsPagination } from '~/models/trakt/trakt-client.model';
-import type { Any, EntityTypes } from '~/models/trakt/trakt-entity.model';
+import type { Any, EntityTypes, Short } from '~/models/trakt/trakt-entity.model';
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktList } from '~/models/trakt/trakt-list.model';
 import type { TraktMovie } from '~/models/trakt/trakt-movie.model';
 import type { TraktPerson } from '~/models/trakt/trakt-people.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
 import type { TraktApiCommonFilters } from '~/services/trakt-client/api/trakt-api.filters';
-import type { RequireAtLeastOne } from '~/utils/typescript.utils';
 
 export type TraktSearchField = {
   movie: 'title' | 'overview' | 'aliases' | 'people' | 'translations' | 'tagline';
@@ -53,7 +52,7 @@ type BaseTraktSearchResultItem<I extends EntityTypes = Any> = {
  *
  * @see [search]{@link https://trakt.docs.apiary.io/#reference/search}
  */
-export type TraktSearchResult<T extends 'movie' | 'show' | 'episode' | 'person' | 'list' | Any = Any, I extends EntityTypes = Any> = {
+export type TraktSearchResult<T extends 'movie' | 'show' | 'episode' | 'person' | 'list' | Any = Any, I extends EntityTypes = Short> = {
   score: number;
   type: T extends Any ? 'movie' | 'show' | 'episode' | 'person' | 'list' : T;
 } & (T extends 'movie'
@@ -66,7 +65,7 @@ export type TraktSearchResult<T extends 'movie' | 'show' | 'episode' | 'person'
         ? Pick<BaseTraktSearchResultItem<I>, 'person'>
         : T extends 'list'
           ? Pick<BaseTraktSearchResultItem<I>, 'list'>
-          : { show: TraktShow<I>; episode: TraktEpisode<I> } | RequireAtLeastOne<Omit<BaseTraktSearchResultItem<I>, 'episode'>>);
+          : Partial<BaseTraktSearchResultItem<I>>);
 
 export type TraktIdLookupType = 'trakt' | 'imdb' | 'tmdb' | 'tvdb';
 
diff --git a/src/services/trakt.service.ts b/src/services/trakt.service.ts
@@ -261,7 +261,7 @@ export class TraktService {
   }
 
   static async search(query: TraktSearch) {
-    const response = await this.traktClient.search.text(query);
-    return response.json();
+    const response = await this.traktClient.search.text.cached(query, undefined, { retention: CacheRetention.Day });
+    return { data: await response.json(), pagination: response.pagination };
   }
 }
diff --git a/src/stores/data/image.store.ts b/src/stores/data/image.store.ts
@@ -103,8 +103,8 @@ export const useImageStore = defineStore('data.image', () => {
   };
 
   const getKeyAndType = ({ id, season, episode, type }: ImageQuery): { key: string; type: ImageQuery['type'] } => {
-    if (type === 'episode' && season && episode) return { key: `${type}-${id}-${season}-${episode}`, type };
-    if (['episode', 'season'].includes(type) && season) return { key: `${type}-${id}-${season}`, type: 'season' };
+    if (type === 'episode' && season !== undefined && episode !== undefined) return { key: `${type}-${id}-${season}-${episode}`, type };
+    if (['episode', 'season'].includes(type) && season !== undefined) return { key: `${type}-${id}-${season}`, type: 'season' };
     if (['episode', 'season', 'show'].includes(type)) return { key: `${type}-${id}`, type: 'show' };
     return { key: `${type}-${id}`, type };
   };
@@ -118,13 +118,16 @@ export const useImageStore = defineStore('data.image', () => {
       payload = await queueRequest(key, () => TraktService.posters.movie(id));
     } else if (type === 'person') {
       payload = await queueRequest(key, () => TraktService.posters.person(id));
-    } else if (type === 'episode' && season && episode) {
+    } else if (type === 'episode' && season !== undefined && episode !== undefined) {
       payload = await queueRequest(key, () => TraktService.posters.episode(id, season, episode));
-    } else if (type === 'season' && season) {
+    } else if (type === 'season' && season !== undefined) {
       payload = await queueRequest(key, () => TraktService.posters.season(id, season));
     } else if (type === 'show') {
       payload = await queueRequest(key, () => TraktService.posters.show(id));
-    } else throw new Error('Unsupported type or missing parameters for fetchImageUrl');
+    } else {
+      console.error('Unsupported type or missing parameters for fetchImageUrl', { key, id, season, episode, type });
+      throw new Error('Unsupported type or missing parameters for fetchImageUrl');
+    }
 
     if ((type === 'episode' && !payload.stills?.length) || (type === 'season' && !payload.posters?.length)) {
       const sType = 'show';
diff --git a/src/stores/data/list.store.ts b/src/stores/data/list.store.ts
@@ -14,7 +14,7 @@ import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 
-export type AnyList = TraktListItem | TraktWatchlist | TraktFavoriteItem | (TraktCollection & { id: number });
+export type AnyList = TraktListItem | TraktWatchlist | TraktFavoriteItem | (TraktCollection & { id: number | string; type?: 'loading' });
 export type ListType = {
   type: 'list' | 'collaboration' | 'collection' | 'watchlist' | 'favorites';
   name: string;
@@ -196,13 +196,13 @@ export const useListStore = defineStore('data.list', () => {
       }
       const newData = response.data.map((item, index) => {
         if ('id' in item) return item;
-        return { ...item, id: index };
+        return { ...item, id: `${page}-${index}` };
       });
       pagination.value = response.pagination;
-      listItems.value = page ? [...listItems.value.filter(l => l.id >= 0), ...newData] : newData;
+      listItems.value = page ? [...listItems.value.filter(l => l.type !== 'loading'), ...newData] : newData;
     } catch (e) {
       console.error('Failed to fetch list');
-      listItems.value = listItems.value.filter(l => l.id >= 0);
+      listItems.value = listItems.value.filter(l => l.type !== 'loading');
       throw e;
     } finally {
       clearTimeout(timeout);
diff --git a/src/stores/data/search.store.ts b/src/stores/data/search.store.ts
diff --git a/src/utils/math.utils.ts b/src/utils/math.utils.ts
diff --git a/src/utils/store.utils.ts b/src/utils/store.utils.ts

Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,7 @@ export class TraktService {`
`261`	`261`	`}`
`262`	`262`
`263`	`263`	`static async search(query: TraktSearch) {`
`264`		`- const response = await this.traktClient.search.text(query);`
`265`		`- return response.json();`
	`264`	`+ const response = await this.traktClient.search.text.cached(query, undefined, { retention: CacheRetention.Day });`
	`265`	`+ return { data: await response.json(), pagination: response.pagination };`
`266`	`266`	`}`
`267`	`267`	`}`