Refresh jellyseerr page when media is requested

- refetch details when media request is successful
- fix key error on tags
- chore: update bun.lockb

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx

@@ -55,6 +55,7 @@ const Page: React.FC = () => {
     data: details,
     isFetching,
     isLoading,
+    refetch
   } = useQuery({
     enabled: !!jellyseerrApi && !!result && !!result.id,
     queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
@@ -63,6 +64,7 @@ const Page: React.FC = () => {
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retryOnMount: true,
+    refetchInterval: 0,
     queryFn: async () => {
       return result.mediaType === MediaType.MOVIE
         ? jellyseerrApi?.movieDetails(result.id!!)
@@ -94,15 +96,18 @@ const Page: React.FC = () => {
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
   const request = useCallback(
-    () =>
+    async () => {
       requestMedia(mediaTitle, {
-        mediaId: Number(result.id!!),
-        mediaType: result.mediaType!!,
-        tvdbId: details?.externalIds?.tvdbId,
-        seasons: (details as TvDetails)?.seasons
-          ?.filter?.((s) => s.seasonNumber !== 0)
-          ?.map?.((s) => s.seasonNumber),
-      }),
+          mediaId: Number(result.id!!),
+          mediaType: result.mediaType!!,
+          tvdbId: details?.externalIds?.tvdbId,
+          seasons: (details as TvDetails)?.seasons
+            ?.filter?.((s) => s.seasonNumber !== 0)
+            ?.map?.((s) => s.seasonNumber),
+        },
+        refetch
+      )
+    },
     [details, result, requestMedia]
   );
 
@@ -205,6 +210,7 @@ const Page: React.FC = () => {
                 isLoading={isLoading || isFetching}
                 result={result as TvResult}
                 details={details as TvDetails}
+                refetch={refetch}
               />
             )}
           </View>

components/GenreTags.tsx

@@ -26,7 +26,7 @@ export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-x
   return (
     <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
       {tags.map((tag, idx) => (
-        <View>
+        <View key={idx}>
           <Tag key={idx} textClass={textClass} text={tag}/>
         </View>
       ))}

components/series/JellyseerrSeasons.tsx

@@ -15,11 +15,12 @@ import { Ionicons } from "@expo/vector-icons";
 import { RoundButton } from "@/components/RoundButton";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { useQuery } from "@tanstack/react-query";
+import {QueryObserverResult, RefetchOptions, useQuery} from "@tanstack/react-query";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Image } from "expo-image";
 import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
 import { Loader } from "../Loader";
+import {MovieDetails} from "@/utils/jellyseerr/server/models/Movie";
 
 const JellyseerrSeasonEpisodes: React.FC<{
   details: TvDetails;
@@ -100,7 +101,8 @@ const JellyseerrSeasons: React.FC<{
   isLoading: boolean;
   result?: TvResult;
   details?: TvDetails;
-}> = ({ isLoading, result, details }) => {
+  refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
+}> = ({ isLoading, result, details, refetch }) => {
   if (!details) return null;
 
   const { jellyseerrApi, requestMedia } = useJellyseerr();
@@ -168,6 +170,21 @@ const JellyseerrSeasons: React.FC<{
     [requestAll]
   );
 
+  const requestSeason = useCallback(async (canRequest: Boolean, seasonNumber: number) => {
+    if (canRequest) {
+      requestMedia(
+        `${result?.name!!}, Season ${seasonNumber}`,
+        {
+          mediaId: details.id,
+          mediaType: MediaType.TV,
+          tvdbId: details.externalIds?.tvdbId,
+          seasons: [seasonNumber],
+        },
+        refetch
+      )
+    }
+  }, [requestMedia]);
+
   if (isLoading)
     return (
       <View>
@@ -231,22 +248,7 @@ const JellyseerrSeasons: React.FC<{
                 return (
                   <JellyseerrIconStatus
                     key={0}
-                    onPress={
-                      canRequest
-                        ? () =>
-                            requestMedia(
-                              `${result?.name!!}, Season ${
-                                season.seasonNumber
-                              }`,
-                              {
-                                mediaId: details.id,
-                                mediaType: MediaType.TV,
-                                tvdbId: details.externalIds?.tvdbId,
-                                seasons: [season.seasonNumber],
-                              }
-                            )
-                        : undefined
-                    }
+                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
                     className={canRequest ? "bg-gray-700/40" : undefined}
                     mediaStatus={
                       seasons?.find(

hooks/useJellyseerr.ts

@@ -337,12 +337,13 @@ export const useJellyseerr = () => {
   }, []);
 
   const requestMedia = useCallback(
-    (title: string, request: MediaRequestBody) => {
+    (title: string, request: MediaRequestBody, onSuccess?: () => void) => {
       jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
         switch (mediaRequest.status) {
           case MediaRequestStatus.PENDING:
           case MediaRequestStatus.APPROVED:
             toast.success(`Requested ${title}!`);
+            onSuccess?.()
             break;
           case MediaRequestStatus.DECLINED:
             toast.error(`You don't have permission to request!`);