fix: Discover page key collisions #581

- add uniqBy for jellyseerr results
- add missing key in MovieTvSlide.tsx
This commit is contained in:
herrrta
2025-03-02 13:07:14 -05:00
parent 9b1dd0923a
commit 951158bcd3
2 changed files with 20 additions and 11 deletions

View File

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

View File

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