fix: Discover page key collisions #581

- add uniqBy for jellyseerr results
- add missing key in MovieTvSlide.tsx

components/jellyseerr/JellyseerrIndexPage.tsx

@@ -21,6 +21,7 @@ import { LoadingSkeleton } from "../search/LoadingSkeleton";
 import { SearchItemWrapper } from "../search/SearchItemWrapper";
 import PersonPoster from "./PersonPoster";
 import { useTranslation } from "react-i18next";
+import {uniqBy} from "lodash";
 
 interface Props extends ViewProps {
   searchQuery: string;
@@ -77,25 +78,28 @@ export const JellyserrIndexPage: React.FC<Props> = ({ searchQuery }) => {
 
   const jellyseerrMovieResults = useMemo(
     () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.MOVIE
-      ) as MovieResult[],
+      uniqBy(
+        jellyseerrResults?.filter((r) => r.mediaType === MediaType.MOVIE) as MovieResult[],
+        "id"
+      ),
     [jellyseerrResults]
   );
 
   const jellyseerrTvResults = useMemo(
     () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.TV
-      ) as TvResult[],
+      uniqBy(
+        jellyseerrResults?.filter((r) => r.mediaType === MediaType.TV) as TvResult[],
+        "id"
+      ),
     [jellyseerrResults]
   );
 
   const jellyseerrPersonResults = useMemo(
     () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === "person"
-      ) as PersonResult[],
+      uniqBy(
+        jellyseerrResults?.filter((r) => r.mediaType === "person") as PersonResult[],
+        "id"
+      ),
     [jellyseerrResults]
   );
 

components/jellyseerr/discover/MovieTvSlide.tsx

@@ -10,6 +10,7 @@ import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
 import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
 import {ViewProps} from "react-native";
+import {uniqBy} from "lodash";
 
 const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
   const { jellyseerrApi } = useJellyseerr();
@@ -57,7 +58,11 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) =>
   });
 
   const flatData = useMemo(
-    () => data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
+    () =>
+      uniqBy(
+        data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
+        "id"
+      ),
     [data]
   );
 
@@ -74,7 +79,7 @@ const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) =>
             fetchNextPage()
         }}
         renderItem={(item) =>
-          <JellyseerrPoster item={item as MovieResult | TvResult} />
+          <JellyseerrPoster item={item as MovieResult | TvResult} key={item?.id}/>
       }
       />
     )