diff --git a/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx b/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx index 9b7db729..2758010b 100644 --- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx +++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx @@ -1,10 +1,8 @@ -import { Text } from "@/components/common/Text"; +import { AddToFavorites } from "@/components/AddToFavorites"; import { DownloadItems } from "@/components/DownloadItem"; import { ParallaxScrollView } from "@/components/ParallaxPage"; -import { Ratings } from "@/components/Ratings"; import { NextUp } from "@/components/series/NextUp"; import { SeasonPicker } from "@/components/series/SeasonPicker"; -import { ItemActions } from "@/components/series/SeriesActions"; import { SeriesHeader } from "@/components/series/SeriesHeader"; import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl"; @@ -38,7 +36,6 @@ const page: React.FC = () => { userId: user?.Id, itemId: seriesId, }), - enabled: !!seriesId && !!api, staleTime: 60 * 1000, }); @@ -81,10 +78,13 @@ const page: React.FC = () => { navigation.setOptions({ headerRight: () => !isLoading && + item && allEpisodes && allEpisodes.length > 0 && ( + ( @@ -101,7 +101,7 @@ const page: React.FC = () => { ), }); - }, [allEpisodes, isLoading]); + }, [allEpisodes, isLoading, item]); if (!item || !backdropUrl) return null; diff --git a/components/AddToFavorites.tsx b/components/AddToFavorites.tsx index b2672b10..050c612a 100644 --- a/components/AddToFavorites.tsx +++ b/components/AddToFavorites.tsx @@ -9,9 +9,10 @@ import { RoundButton } from "./RoundButton"; interface Props extends ViewProps { item: BaseItemDto; + type: "item" | "series"; } -export const AddToFavorites: React.FC = ({ item, ...props }) => { +export const AddToFavorites: React.FC = ({ item, type, ...props }) => { const queryClient = useQueryClient(); const [api] = useAtom(apiAtom); const [user] = useAtom(userAtom); @@ -20,6 +21,20 @@ export const AddToFavorites: React.FC = ({ item, ...props }) => { return item.UserData?.IsFavorite; }, [item.UserData?.IsFavorite]); + const updateItemInQueries = (newData: Partial) => { + queryClient.setQueryData( + [type, item.Id], + (old) => { + if (!old) return old; + return { + ...old, + ...newData, + UserData: { ...old.UserData, ...newData.UserData }, + }; + } + ); + }; + const markFavoriteMutation = useMutation({ mutationFn: async () => { if (api && user) { @@ -30,22 +45,22 @@ export const AddToFavorites: React.FC = ({ item, ...props }) => { } }, onMutate: async () => { - await queryClient.cancelQueries({ queryKey: ["item", item.Id] }); + await queryClient.cancelQueries({ queryKey: [type, item.Id] }); const previousItem = queryClient.getQueryData([ - "item", + type, item.Id, ]); - queryClient.setQueryData(["item", item.Id], (old) => ({ - ...old!, - UserData: { ...old!.UserData, IsFavorite: true }, - })); + updateItemInQueries({ UserData: { IsFavorite: true } }); + return { previousItem }; }, onError: (err, variables, context) => { - queryClient.setQueryData(["item", item.Id], context?.previousItem); + if (context?.previousItem) { + queryClient.setQueryData([type, item.Id], context.previousItem); + } }, onSettled: () => { - queryClient.invalidateQueries({ queryKey: ["item", item.Id] }); + queryClient.invalidateQueries({ queryKey: [type, item.Id] }); }, }); @@ -59,22 +74,22 @@ export const AddToFavorites: React.FC = ({ item, ...props }) => { } }, onMutate: async () => { - await queryClient.cancelQueries({ queryKey: ["item", item.Id] }); + await queryClient.cancelQueries({ queryKey: [type, item.Id] }); const previousItem = queryClient.getQueryData([ - "item", + type, item.Id, ]); - queryClient.setQueryData(["item", item.Id], (old) => ({ - ...old!, - UserData: { ...old!.UserData, IsFavorite: false }, - })); + updateItemInQueries({ UserData: { IsFavorite: false } }); + return { previousItem }; }, onError: (err, variables, context) => { - queryClient.setQueryData(["item", item.Id], context?.previousItem); + if (context?.previousItem) { + queryClient.setQueryData([type, item.Id], context.previousItem); + } }, onSettled: () => { - queryClient.invalidateQueries({ queryKey: ["item", item.Id] }); + queryClient.invalidateQueries({ queryKey: [type, item.Id] }); }, }); diff --git a/components/ItemContent.tsx b/components/ItemContent.tsx index b17ee483..402f3171 100644 --- a/components/ItemContent.tsx +++ b/components/ItemContent.tsx @@ -91,7 +91,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo( - + )}