From 951158bcd3be33dadb2e1a1d415eaf80e57c12d2 Mon Sep 17 00:00:00 2001
From: herrrta <73949927+herrrta@users.noreply.github.com>
Date: Sun, 2 Mar 2025 13:07:14 -0500
Subject: [PATCH] fix: Discover page key collisions #581

- add uniqBy for jellyseerr results
- add missing key in MovieTvSlide.tsx
---
 components/jellyseerr/JellyseerrIndexPage.tsx | 22 +++++++++++--------
 .../jellyseerr/discover/MovieTvSlide.tsx      |  9 ++++++--
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/components/jellyseerr/JellyseerrIndexPage.tsx b/components/jellyseerr/JellyseerrIndexPage.tsx
index cd093deb..55b45b80 100644
--- a/components/jellyseerr/JellyseerrIndexPage.tsx
+++ b/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]
   );
 
diff --git a/components/jellyseerr/discover/MovieTvSlide.tsx b/components/jellyseerr/discover/MovieTvSlide.tsx
index 723658c8..c3d9d690 100644
--- a/components/jellyseerr/discover/MovieTvSlide.tsx
+++ b/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}/>
       }
       />
     )