fix: add favorite to series

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 && (
           <View className="flex flex-row items-center space-x-2">
+            <AddToFavorites item={item} type="series" />
             <DownloadItems
+              size="large"
               title="Download Series"
               items={allEpisodes || []}
               MissingDownloadIconComponent={() => (
@@ -101,7 +101,7 @@ const page: React.FC = () => {
           </View>
         ),
     });
-  }, [allEpisodes, isLoading]);
+  }, [allEpisodes, isLoading, item]);
 
   if (!item || !backdropUrl) return null;
 

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<Props> = ({ item, ...props }) => {
+export const AddToFavorites: React.FC<Props> = ({ item, type, ...props }) => {
   const queryClient = useQueryClient();
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
@@ -20,6 +21,20 @@ export const AddToFavorites: React.FC<Props> = ({ item, ...props }) => {
     return item.UserData?.IsFavorite;
   }, [item.UserData?.IsFavorite]);
 
+  const updateItemInQueries = (newData: Partial<BaseItemDto>) => {
+    queryClient.setQueryData<BaseItemDto | undefined>(
+      [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<Props> = ({ item, ...props }) => {
       }
     },
     onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: ["item", item.Id] });
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
       const previousItem = queryClient.getQueryData<BaseItemDto>([
-        "item",
+        type,
         item.Id,
       ]);
-      queryClient.setQueryData<BaseItemDto>(["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<Props> = ({ item, ...props }) => {
       }
     },
     onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: ["item", item.Id] });
+      await queryClient.cancelQueries({ queryKey: [type, item.Id] });
       const previousItem = queryClient.getQueryData<BaseItemDto>([
-        "item",
+        type,
         item.Id,
       ]);
-      queryClient.setQueryData<BaseItemDto>(["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] });
     },
   });
 

components/ItemContent.tsx

@@ -91,7 +91,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                 <View className="flex flex-row items-center space-x-2">
                   <DownloadSingleItem item={item} size="large" />
                   <PlayedStatus item={item} />
-                  <AddToFavorites item={item} />
+                  <AddToFavorites item={item} type="item" />
                 </View>
               )}
             </View>