Fix item type calculation in lists

This commit is contained in:
Zoe Roux 2024-05-20 22:46:14 +02:00
parent 7b45b205a5
commit 5393f1bf97
No known key found for this signature in database
6 changed files with 9 additions and 10 deletions

View File

@ -150,7 +150,7 @@ export const EpisodeList = <Props,>({
divider
Header={Header}
headerProps={headerProps}
getItemType={(item) => (item.firstOfSeason ? "withHeader" : "normal")}
getItemType={(item) => (!item || item.firstOfSeason ? "withHeader" : "normal")}
contentContainerStyle={pageStyle}
placeholderCount={5}
Render={({ item }) => {

View File

@ -195,6 +195,7 @@ const downloadIcon = (status: State["status"]) => {
return Downloading;
case "FAILED":
return ErrorIcon;
case "PENDING":
case "PAUSED":
case "STOPPED":
return NotStarted;

View File

@ -30,7 +30,7 @@ import {
} from "react";
import { FlatList, View, type ViewStyle } from "react-native";
import { ErrorView } from "./errors";
import { EmptyView, type Layout, OfflineView, type WithLoading, addHeader } from "./fetch";
import { EmptyView, type Layout, OfflineView, addHeader } from "./fetch";
const emulateGap = (
layout: "grid" | "vertical" | "horizontal",
@ -90,7 +90,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
divider?: boolean | ComponentType;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props;
getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemType?: (item: Data | null, index: number) => Kind;
getItemSize?: (kind: Kind) => number;
fetchMore?: boolean;
nested?: boolean;
@ -139,7 +139,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
)}
data={data}
horizontal={layout.layout === "horizontal"}
keyExtractor={(item: any) => item.id}
keyExtractor={(item: any, index) => (item ? item.id : index)}
numColumns={layout.layout === "horizontal" ? 1 : numColumns}
estimatedItemSize={size}
onEndReached={fetchMore ? fetchNextPage : undefined}

View File

@ -33,7 +33,7 @@ import {
} from "react";
import { type Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki";
import { ErrorView } from "./errors";
import { EmptyView, type Layout, type WithLoading, addHeader } from "./fetch";
import { EmptyView, type Layout, addHeader } from "./fetch";
const InfiniteScroll = <Props,>({
children,
@ -167,7 +167,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps, Kind extends number | st
divider?: boolean | ComponentType;
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps;
getItemType?: (item: WithLoading<Data>, index: number) => Kind;
getItemType?: (item: Data | null, index: number) => Kind;
getItemSize?: (kind: Kind) => number;
fetchMore?: boolean;
contentContainerStyle?: ContentStyle;

View File

@ -36,7 +36,7 @@ export const NewsList = () => {
<InfiniteFetch
query={NewsList.query()}
layout={{ ...ItemGrid.layout, layout: "horizontal" }}
getItemType={(x, i) => (x.kind === "movie" || (x.isLoading && i % 2) ? "movie" : "episode")}
getItemType={(x, i) => (x?.kind === "movie" || (!x && i % 2) ? "movie" : "episode")}
getItemSize={(kind) => (kind === "episode" ? 2 : 1)}
empty={t("home.none")}
Render={({ item }) => {

View File

@ -62,9 +62,7 @@ export const WatchlistList = () => {
query={WatchlistList.query()}
layout={{ ...ItemGrid.layout, layout: "horizontal" }}
getItemType={(x, i) =>
(x.kind === "show" && x.watchStatus?.nextEpisode) || (x.isLoading && i % 2)
? "episode"
: "item"
(x?.kind === "show" && x.watchStatus?.nextEpisode) || (!x && i % 2) ? "episode" : "item"
}
getItemSize={(kind) => (kind === "episode" ? 2 : 1)}
empty={t("home.none")}