Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2026-05-23 23:52:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update biome

Browse Source
This commit is contained in:
Zoe Roux
2025-06-22 17:39:41 +02:00
parent e63e3605c6
commit 4ff0a1fe09
8 changed files with 64 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/query/fetch-infinite.tsx
+13 -24
View File
@@ -1,5 +1,5 @@
import { LegendList } from "@legendapp/list";
import { type ComponentProps, type ComponentType, type ReactElement, useRef } from "react";
import { type ComponentType, type ReactElement, useRef } from "react";
import { type Breakpoint, HR, useBreakpointMap } from "~/primitives";
import { useSetError } from "~/providers/error-provider";
import { type QueryIdentifier, useInfiniteFetch } from "~/query";
@@ -12,7 +12,7 @@ export type Layout = {
layout: "grid" | "horizontal" | "vertical";
};
export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>({
export const InfiniteFetch = <Data, Props, _, Kind extends number | string>({
query,
placeholderCount = 2,
incremental = false,
@@ -29,7 +29,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
nested = false,
...props
}: {
query: ReturnType<typeof useInfiniteFetch<_, Data>>;
query: QueryIdentifier<Data>;
placeholderCount?: number;
layout: Layout;
horizontal?: boolean;
@@ -48,9 +48,12 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
const { numColumns, size, gap } = useBreakpointMap(layout);
const [setOffline, clearOffline] = useSetError("offline");
const oldItems = useRef<Data[] | undefined>(undefined);
let { items, isPaused, error, fetchNextPage, isFetching, refetch, isRefetching } = query;
let { items, isPaused, error, fetchNextPage, isFetching, refetch, isRefetching } =
useInfiniteFetch(query);
if (incremental && items) oldItems.current = items;
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
if (isPaused) setOffline();
else clearOffline();
@@ -58,9 +61,9 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
if (incremental) items ??= oldItems.current;
const count = items ? numColumns - (items.length % numColumns) : placeholderCount;
console.log(numColumns, count);
const placeholders = [...Array(count === 0 ? numColumns : count)].fill(null);
const data = isFetching || !items ? [...(items || []), ...placeholders] : items;
return (
<LegendList
data={data}
@@ -68,36 +71,22 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
renderItem={({ item, index }) =>
item ? <Render index={index} item={item} /> : <Loader index={index} />
}
keyExtractor={(item: any, index) => (item ? item.id : index)}
estimatedItemSize={size}
// keyExtractor={(item: any, index) => (item ? item.id : index)}
// estimatedItemSize={size}
horizontal={layout.layout === "horizontal"}
numColumns={layout.layout === "horizontal" ? 1 : numColumns}
onEndReached={fetchMore ? () => fetchNextPage() : undefined}
onEndReachedThreshold={0.5}
onRefresh={layout.layout !== "horizontal" ? refetch: undefined}
onRefresh={layout.layout !== "horizontal" ? refetch : undefined}
refreshing={isRefetching}
ListHeaderComponent={Header}
ItemSeparatorComponent={divider === true ? HR : divider as any || undefined}
ItemSeparatorComponent={divider === true ? HR : (divider as any) || undefined}
ListEmptyComponent={Empty}
contentContainerStyle={{gap}}
contentContainerStyle={{ gap, margin: gap }}
{...props}
/>
);
};
export const InfiniteFetch = <Data, Props, _, Kind extends number | string>({
query,
...props
}: {
query: QueryIdentifier<_, Data>;
} & Omit<ComponentProps<typeof InfiniteFetchList<Data, Props, _, Kind>>, "query">) => {
if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch.");
const ret = useInfiniteFetch(query);
return <InfiniteFetchList query={ret} {...props} />;
};