feat: [Jellyseerr] Show recent requests #324

- Added recent requests slide
- updated JellyseerrPoster.tsx to handle more options

components/jellyseerr/discover/Discover.tsx

@@ -8,6 +8,7 @@ import {View} from "react-native";
 import {networks} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
 import {studios} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
 import GenreSlide from "@/components/jellyseerr/discover/GenreSlide";
+import RecentRequestsSlide from "@/components/jellyseerr/discover/RecentRequestsSlide";
 
 interface Props {
   sliders?: DiscoverSlider[];
@@ -25,6 +26,8 @@ const Discover: React.FC<Props> = ({ sliders }) => {
     <View className="flex flex-col space-y-4 mb-8">
       {sortedSliders.map(slide => {
         switch (slide.type) {
+          case DiscoverSliderType.RECENT_REQUESTS:
+            return <RecentRequestsSlide key={slide.id} slide={slide} />
           case DiscoverSliderType.NETWORKS:
             return <CompanySlide key={slide.id} slide={slide} data={networks}/>
           case DiscoverSliderType.STUDIOS:

components/jellyseerr/discover/RecentRequestsSlide.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {useQuery} from "@tanstack/react-query";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {ViewProps} from "react-native";
+import MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import {NonFunctionProperties} from "@/utils/jellyseerr/server/interfaces/api/common";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+
+const RequestCard: React.FC<{request: MediaRequest}> = ({request}) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const { data: details, isLoading, isError } = useQuery({
+    queryKey: ["jellyseerr", "detail", request.media.mediaType, request.media.tmdbId],
+    queryFn: async () => {
+
+      return request.media.mediaType == MediaType.MOVIE
+        ? jellyseerrApi?.movieDetails(request.media.tmdbId)
+        : jellyseerrApi?.tvDetails(request.media.tmdbId);
+    },
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    staleTime: 0,
+  });
+
+  const { data: refreshedRequest } = useQuery({
+    queryKey: ["jellyseerr", "requests", request.media.mediaType, request.id],
+    queryFn: async () => jellyseerrApi?.getRequest(request.id),
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    refetchInterval: 5000,
+    staleTime: 0,
+  });
+
+  return (
+    details && <JellyseerrPoster horizontal showDownloadInfo item={details} mediaRequest={refreshedRequest} />
+  )
+}
+
+const RecentRequestsSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const { data: requests, isLoading, isError } = useQuery({
+    queryKey: ["jellyseerr", "recent_requests"],
+    queryFn: async () =>  jellyseerrApi?.requests(),
+    enabled: !!jellyseerrApi,
+    refetchOnMount: true,
+    staleTime: 0,
+  });
+
+  return (
+    requests &&
+    requests.results.length > 0 &&
+    !isError && (
+      <Slide
+        {...props}
+        slide={slide}
+        data={requests.results}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={(item: NonFunctionProperties<MediaRequest>) => (
+          <RequestCard request={item}/>
+        )}
+      />
+    )
+  )
+};
+
+export default RecentRequestsSlide;