refactor: extract reusable component

src/hooks/useFetchItems.ts

@@ -1,5 +1,5 @@
 import { AxiosRequestConfig } from 'axios';
-import type { ItemsApiGetItemsRequest, PlaylistsApiMoveItemRequest } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto, ItemsApiGetItemsRequest, PlaylistsApiMoveItemRequest } from '@jellyfin/sdk/lib/generated-client';
 import type { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
@@ -16,6 +16,8 @@ import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import datetime from 'scripts/datetime';
+import globalize from 'scripts/globalize';
 
 import { JellyfinApiContext, useApi } from './useApi';
 import { getAlphaPickerQuery, getFieldsQuery, getFiltersQuery, getLimitQuery } from 'utils/items';
@@ -197,7 +199,7 @@ const fetchGetItemsBySuggestionsType = async (
                             ],
                             parentId: parentId ?? undefined,
                             imageTypeLimit: 1,
-                            enableImageTypes: [ImageType.Primary],
+                            enableImageTypes: [ ImageType.Primary, ImageType.Thumb ],
                             ...sections.parametersOptions
                         },
                         {
@@ -258,7 +260,7 @@ export const useGetItemsBySectionType = (
 
 const fetchGetGenres = async (
     currentApi: JellyfinApiContext,
-    itemType: BaseItemKind,
+    itemType: BaseItemKind[],
     parentId: ParentId,
     options?: AxiosRequestConfig
 ) => {
@@ -269,7 +271,7 @@ const fetchGetGenres = async (
                 userId: user.Id,
                 sortBy: [ItemSortBy.SortName],
                 sortOrder: [SortOrder.Ascending],
-                includeItemTypes: [itemType],
+                includeItemTypes: itemType,
                 enableTotalRecordCount: false,
                 parentId: parentId ?? undefined
             },
@@ -281,7 +283,7 @@ const fetchGetGenres = async (
     }
 };
 
-export const useGetGenres = (itemType: BaseItemKind, parentId: ParentId) => {
+export const useGetGenres = (itemType: BaseItemKind[], parentId: ParentId) => {
     const currentApi = useApi();
     return useQuery({
         queryKey: ['Genres', parentId],
@@ -531,3 +533,91 @@ export const usePlaylistsMoveItemMutation = () => {
             fetchPlaylistsMoveItem(currentApi, requestParameters )
     });
 };
+
+type GroupsUpcomingEpisodes = {
+    name: string;
+    items: BaseItemDto[];
+};
+
+function groupsUpcomingEpisodes(items: BaseItemDto[]) {
+    const groups: GroupsUpcomingEpisodes[] = [];
+    let currentGroupName = '';
+    let currentGroup: BaseItemDto[] = [];
+
+    for (const item of items) {
+        let dateText = '';
+
+        if (item.PremiereDate) {
+            try {
+                const premiereDate = datetime.parseISO8601Date(
+                    item.PremiereDate,
+                    true
+                );
+                dateText = datetime.isRelativeDay(premiereDate, -1) ?
+                    globalize.translate('Yesterday') :
+                    datetime.toLocaleDateString(premiereDate, {
+                        weekday: 'long',
+                        month: 'short',
+                        day: 'numeric'
+                    });
+            } catch (err) {
+                console.error('error parsing timestamp for upcoming tv shows');
+            }
+        }
+
+        if (dateText != currentGroupName) {
+            if (currentGroup.length) {
+                groups.push({
+                    name: currentGroupName,
+                    items: currentGroup
+                });
+            }
+
+            currentGroupName = dateText;
+            currentGroup = [item];
+        } else {
+            currentGroup.push(item);
+        }
+    }
+    return groups;
+}
+
+const fetchGetGroupsUpcomingEpisodes = async (
+    currentApi: JellyfinApiContext,
+    parentId: ParentId,
+    options?: AxiosRequestConfig
+) => {
+    const { api, user } = currentApi;
+    if (api && user?.Id) {
+        const response = await getTvShowsApi(api).getUpcomingEpisodes(
+            {
+                userId: user.Id,
+                limit: 25,
+                fields: [ItemFields.AirTime],
+                parentId: parentId ?? undefined,
+                imageTypeLimit: 1,
+                enableImageTypes: [
+                    ImageType.Primary,
+                    ImageType.Backdrop,
+                    ImageType.Thumb
+                ]
+            },
+            {
+                signal: options?.signal
+            }
+        );
+        const items = response.data.Items ?? [];
+
+        return groupsUpcomingEpisodes(items);
+    }
+};
+
+export const useGetGroupsUpcomingEpisodes = (parentId: ParentId) => {
+    const currentApi = useApi();
+    return useQuery({
+        queryKey: ['GroupsUpcomingEpisodes', parentId],
+        queryFn: ({ signal }) =>
+            fetchGetGroupsUpcomingEpisodes(currentApi, parentId, { signal }),
+        enabled: !!parentId
+    });
+};