From 027c69bb7ee7f41cd8e0e7a5bebf5f266555591a Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Thu, 3 Oct 2024 21:37:20 +0200 Subject: [PATCH] fix: refactor --- app/(auth)/(tabs)/(home)/index.tsx | 215 +++++++++++------------------ 1 file changed, 83 insertions(+), 132 deletions(-) diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx index 7f564c85..43b23978 100644 --- a/app/(auth)/(tabs)/(home)/index.tsx +++ b/app/(auth)/(tabs)/(home)/index.tsx @@ -20,33 +20,30 @@ import { getUserViewsApi, } from "@jellyfin/sdk/lib/utils/api"; import NetInfo from "@react-native-community/netinfo"; -import { useQuery, useQueryClient } from "@tanstack/react-query"; +import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query"; import { useRouter } from "expo-router"; import { useAtom } from "jotai"; import { useCallback, useEffect, useMemo, useState } from "react"; import { ActivityIndicator, RefreshControl, - SafeAreaView, ScrollView, View, } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; -type BaseSection = { - title: string; - queryKey: (string | undefined)[]; -}; - -type ScrollingCollectionListSection = BaseSection & { +type ScrollingCollectionListSection = { type: "ScrollingCollectionList"; - queryFn: () => Promise; + title?: string; + queryKey: (string | undefined | null)[]; + queryFn: QueryFunction; orientation?: "horizontal" | "vertical"; }; -type MediaListSection = BaseSection & { +type MediaListSection = { type: "MediaListSection"; - queryFn: () => Promise; + queryKey: (string | undefined)[]; + queryFn: QueryFunction; }; type Section = ScrollingCollectionListSection | MediaListSection; @@ -142,109 +139,95 @@ export default function index() { const refetch = useCallback(async () => { setLoading(true); - await queryClient.refetchQueries({ queryKey: ["userViews"] }); - await queryClient.refetchQueries({ queryKey: ["resumeItems"] }); - await queryClient.refetchQueries({ queryKey: ["nextUp-all"] }); - await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] }); - await queryClient.refetchQueries({ queryKey: ["recentlyAddedInTVShows"] }); - await queryClient.refetchQueries({ queryKey: ["suggestions"] }); - await queryClient.refetchQueries({ - queryKey: ["sf_promoted"], - }); - await queryClient.refetchQueries({ - queryKey: ["sf_carousel"], - }); + await queryClient.invalidateQueries(); setLoading(false); }, [queryClient, user?.Id]); - type queryKey = (string | undefined)[]; - const createCollectionConfig = ( - title: string, - queryKey: queryKey, - includeItemTypes: BaseItemKind[], - parentId: string | undefined - ): ScrollingCollectionListSection => ({ - title, - queryKey, - queryFn: async () => { - if (!api) return []; - return ( - ( - await getUserLibraryApi(api).getLatestMedia({ - userId: user?.Id, - limit: 50, - fields: ["PrimaryImageAspectRatio", "Path"], - imageTypeLimit: 1, - enableImageTypes: ["Primary", "Backdrop", "Thumb"], - includeItemTypes, - parentId, - }) - ).data || [] - ); - }, - type: "ScrollingCollectionList", - }); + const createCollectionConfig = useCallback( + ( + title: string, + queryKey: string[], + includeItemTypes: BaseItemKind[], + parentId: string | undefined + ): ScrollingCollectionListSection => ({ + title, + queryKey, + queryFn: async () => { + if (!api) return []; + return ( + ( + await getUserLibraryApi(api).getLatestMedia({ + userId: user?.Id, + limit: 50, + fields: ["PrimaryImageAspectRatio", "Path"], + imageTypeLimit: 1, + enableImageTypes: ["Primary", "Backdrop", "Thumb"], + includeItemTypes, + parentId, + }) + ).data || [] + ); + }, + type: "ScrollingCollectionList", + }), + [api, user?.Id] + ); const sections = useMemo(() => { if (!api || !user?.Id) return []; - const latestMediaViews: ScrollingCollectionListSection[] = collections.map( - (c) => { - const includeItemTypes: BaseItemKind[] = - c.CollectionType === "tvshows" ? ["Series"] : ["Movie"]; - const title = "Recently Added in " + c.Name; - const query: queryKey = [ - "recentlyAddedIn" + c.CollectionType, - user?.Id, - c.Id, - ]; - return createCollectionConfig( - title || "", - query, - includeItemTypes, - c.Id - ); - } - ); + const latestMediaViews = collections.map((c) => { + const includeItemTypes: BaseItemKind[] = + c.CollectionType === "tvshows" ? ["Series"] : ["Movie"]; + const title = "Recently Added in " + c.Name; + const queryKey = ["recentlyAddedIn" + c.CollectionType, user?.Id!, c.Id!]; + return createCollectionConfig( + title || "", + queryKey, + includeItemTypes, + c.Id + ); + }); const ss: Section[] = [ - // { - // title: "Continue Watching", - // queryKey: ["resumeItems", user.Id], - // queryFn: async () => - // ( - // await getItemsApi(api).getResumeItems({ - // userId: user.Id, - // enableImageTypes: ["Primary", "Backdrop", "Thumb"], - // }) - // ).data.Items || [], - // type: "ScrollingCollectionList", - // orientation: "horizontal", - // }, - // { - // title: "Next Up", - // queryKey: ["nextUp-all", user?.Id], - // queryFn: async () => - // ( - // await getTvShowsApi(api).getNextUp({ - // userId: user?.Id, - // fields: ["MediaSourceCount"], - // limit: 20, - // enableImageTypes: ["Primary", "Backdrop", "Thumb"], - // }) - // ).data.Items || [], - // type: "ScrollingCollectionList", - // orientation: "horizontal", - // }, + { + title: "Continue Watching", + queryKey: ["resumeItems", user.Id], + queryFn: async () => + ( + await getItemsApi(api).getResumeItems({ + userId: user.Id, + enableImageTypes: ["Primary", "Backdrop", "Thumb"], + }) + ).data.Items || [], + type: "ScrollingCollectionList", + orientation: "horizontal", + }, + { + title: "Next Up", + queryKey: ["nextUp-all", user?.Id], + queryFn: async () => + ( + await getTvShowsApi(api).getNextUp({ + userId: user?.Id, + fields: ["MediaSourceCount"], + limit: 20, + enableImageTypes: ["Primary", "Backdrop", "Thumb"], + }) + ).data.Items || [], + type: "ScrollingCollectionList", + orientation: "horizontal", + }, ...latestMediaViews, ...(mediaListCollections?.map( (ml) => ({ - title: ml.Name || "", - queryKey: ["mediaList", ml.Id], + title: ml.Name, + queryKey: ["mediaList", ml.Id!], queryFn: async () => ml, type: "MediaListSection", - } as MediaListSection) + orientation: "vertical", + } as Section) ) || []), { title: "Suggested Movies", @@ -283,7 +266,7 @@ export default function index() { }, ]; return ss; - }, [api, user?.Id, collections.map((c) => c.Id), mediaListCollections]); + }, [api, user?.Id, collections, mediaListCollections]); if (isConnected === false) { return ( @@ -362,38 +345,6 @@ export default function index() { > - - ( - await getTvShowsApi(api).getNextUp({ - userId: user?.Id, - fields: ["MediaSourceCount"], - limit: 20, - enableImageTypes: ["Primary", "Backdrop", "Thumb"], - }) - ).data.Items || [] - } - orientation={"horizontal"} - /> - - - ( - await getItemsApi(api).getResumeItems({ - userId: user?.Id, - enableImageTypes: ["Primary", "Backdrop", "Thumb"], - }) - ).data.Items || [] - } - orientation={"horizontal"} - /> - {sections.map((section, index) => { if (section.type === "ScrollingCollectionList") { return (