Basic Jellyseerr discover page

components/GenreTags.tsx

@@ -8,14 +8,26 @@ interface TagProps {
   textClass?: ViewProps["className"]
 }
 
+export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
+  text,
+  textClass,
+  ...props
+}) => {
+  return (
+    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
+      <Text className={textClass}>{text}</Text>
+    </View>
+  );
+};
+
 export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-xs", ...props }) => {
   if (!tags || tags.length === 0) return null;
 
   return (
     <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
-      {tags.map((genre, idx) => (
-        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1">
-          <Text className={textClass}>{genre}</Text>
+      {tags.map((tag, idx) => (
+        <View>
+          <Tag key={idx} textClass={textClass} text={tag}/>
         </View>
       ))}
     </View>

components/Ratings.tsx

@@ -55,7 +55,9 @@ export const JellyserrRatings: React.FC<{result: MovieResult | TvResult}> = ({ r
         ? jellyseerrApi?.movieRatings(result.id)
         : jellyseerrApi?.tvRatings(result.id)
     },
-    enabled: !!jellyseerrApi
+    staleTime: (5).minutesToMilliseconds(),
+    retry: false,
+    enabled: !!jellyseerrApi,
   });
 
   return (isLoading || !!result.voteCount ||

components/jellyseerr/DiscoverSlide.tsx

@@ -0,0 +1,75 @@
+import React, {useMemo} from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {DiscoverEndpoint, Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
+import {useInfiniteQuery} from "@tanstack/react-query";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import {Text} from "@/components/common/Text";
+import {FlashList} from "@shopify/flash-list";
+
+interface Props {
+  slide: DiscoverSlider
+}
+const DiscoverSlide: React.FC<Props> = ({slide}) => {
+  const {jellyseerrApi} = useJellyseerr();
+
+  const {data, isFetching, fetchNextPage, hasNextPage} = useInfiniteQuery({
+    queryKey: ["jellyseerr", "discover", slide.id],
+    queryFn: async ({ pageParam }) => {
+      let endpoint: DiscoverEndpoint | undefined = undefined;
+      let params: any = {
+        page: Number(pageParam)
+      }
+
+      switch (slide.type) {
+        case DiscoverSliderType.TRENDING:
+          endpoint = Endpoints.DISCOVER_TRENDING;
+          break;
+        case DiscoverSliderType.POPULAR_MOVIES:
+        case DiscoverSliderType.UPCOMING_MOVIES:
+          endpoint = Endpoints.DISCOVER_MOVIES
+          if (slide.type === DiscoverSliderType.UPCOMING_MOVIES)
+            params = { ...params, primaryReleaseDateGte: new Date().toISOString().split('T')[0]}
+          break;
+        case DiscoverSliderType.POPULAR_TV:
+        case DiscoverSliderType.UPCOMING_TV:
+          endpoint = Endpoints.DISCOVER_TV
+          if (slide.type === DiscoverSliderType.UPCOMING_TV)
+            params = {...params, firstAirDateGte: new Date().toISOString().split('T')[0]}
+          break;
+      }
+
+      return endpoint ? jellyseerrApi?.discover(endpoint, params) : null;
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, pages) => ((lastPage?.page || pages?.findLast(p => p?.results.length)?.page) || 1) + 1,
+    enabled: !!jellyseerrApi,
+    staleTime: 0
+  });
+
+  const flatData = useMemo(() => data?.pages?.filter(p => p?.results.length).flatMap(p => p?.results), [data])
+
+  return (
+    (flatData && flatData?.length > 0) && <>
+      <Text className="font-bold text-lg mb-2">{DiscoverSliderType[slide.type].toString().toTitle()}</Text>
+      <FlashList
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={item => item!!.id.toString()}
+        estimatedItemSize={250}
+        data={flatData}
+        onEndReachedThreshold={1}
+        onEndReached={() => {
+          if (hasNextPage)
+            fetchNextPage()
+        }}
+        renderItem={({item}) =>
+          (item ? <JellyseerrPoster item={item as MovieResult | TvResult} /> : <></>)
+      }
+      />
+    </>
+  )
+}
+
+export default DiscoverSlide;