Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 04:04:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Disable infinite fetch on some elements of the home

Browse Source
This commit is contained in:
Zoe Roux 2023-10-25 01:43:01 +02:00
parent 8b102b083f
commit 76d0c53cc1
4 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/packages/ui/src/fetch-infinite.tsx
View File

@ -35,6 +35,7 @@ export const InfiniteFetchList = <Data, Props, _>({
Header, Header,
headerProps, headerProps,
getItemType, getItemType,
fetchMore = true,
...props ...props
}: { }: {
query: ReturnType<typeof useInfiniteFetch<_, Data>>; query: ReturnType<typeof useInfiniteFetch<_, Data>>;
@ -51,6 +52,7 @@ export const InfiniteFetchList = <Data, Props, _>({
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement; Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props; headerProps?: Props;
getItemType?: (item: Data, index: number) => string | number; getItemType?: (item: Data, index: number) => string | number;
fetchMore?: boolean;
}): JSX.Element | null => { }): JSX.Element | null => {
const { numColumns, size } = useBreakpointMap(layout); const { numColumns, size } = useBreakpointMap(layout);
const oldItems = useRef<Data[] | undefined>(); const oldItems = useRef<Data[] | undefined>();
@ -79,7 +81,7 @@ export const InfiniteFetchList = <Data, Props, _>({
keyExtractor={(item: any) => item.id?.toString()} keyExtractor={(item: any) => item.id?.toString()}
numColumns={numColumns} numColumns={numColumns}
estimatedItemSize={size} estimatedItemSize={size}
onEndReached={fetchNextPage} onEndReached={fetchMore ? fetchNextPage : undefined}
onEndReachedThreshold={0.5} onEndReachedThreshold={0.5}
onRefresh={refetch} onRefresh={refetch}
refreshing={isRefetching} refreshing={isRefetching}

7
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -42,6 +42,7 @@ const InfiniteScroll = <Props,>({
isFetching, isFetching,
Header, Header,
headerProps, headerProps,
fetchMore = true,
...props ...props
}: { }: {
children?: ReactElement | (ReactElement | null)[] | null; children?: ReactElement | (ReactElement | null)[] | null;
@ -52,12 +53,13 @@ const InfiniteScroll = <Props,>({
isFetching: boolean; isFetching: boolean;
Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement; Header?: ComponentType<Props & { children: JSX.Element }> | ReactElement;
headerProps?: Props; headerProps?: Props;
fetchMore?: boolean;
} & Stylable) => { } & Stylable) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const { css } = useYoshiki(); const { css } = useYoshiki();
const onScroll = useCallback(() => { const onScroll = useCallback(() => {
if (!ref.current || !hasMore || isFetching) return; if (!ref.current || !hasMore || isFetching || !fetchMore) return;
const scroll = const scroll =
layout.layout === "horizontal" layout.layout === "horizontal"
? ref.current.scrollWidth - ref.current.scrollLeft ? ref.current.scrollWidth - ref.current.scrollLeft
@ -66,7 +68,7 @@ const InfiniteScroll = <Props,>({
layout.layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight; layout.layout === "horizontal" ? ref.current.offsetWidth : ref.current.offsetHeight;
if (scroll <= offset * 1.2) loadMore(); if (scroll <= offset * 1.2) loadMore();
}, [hasMore, isFetching, layout, loadMore]); }, [hasMore, isFetching, layout, loadMore, fetchMore]);
const scrollProps = { ref, onScroll }; const scrollProps = { ref, onScroll };
// Automatically trigger a scroll check on start and after a fetch end in case the user is already // Automatically trigger a scroll check on start and after a fetch end in case the user is already
@ -158,6 +160,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement;
headerProps: HeaderProps; headerProps: HeaderProps;
getItemType?: (item: Data, index: number) => string | number; getItemType?: (item: Data, index: number) => string | number;
fetchMore?: boolean;
}): JSX.Element | null => { }): JSX.Element | null => {
const oldItems = useRef<Data[] | undefined>(); const oldItems = useRef<Data[] | undefined>();
const { items, error, fetchNextPage, hasNextPage, isFetching } = query; const { items, error, fetchNextPage, hasNextPage, isFetching } = query;

1
front/packages/ui/src/home/recommanded.tsx
View File

@ -166,6 +166,7 @@ export const Recommanded = () => {
<InfiniteFetch <InfiniteFetch
query={Recommanded.query()} query={Recommanded.query()}
layout={ItemDetails.layout} layout={ItemDetails.layout}
fetchMore={false}
{...css({ padding: 0 })} {...css({ padding: 0 })}
> >
{(x, i) => ( {(x, i) => (

1
front/packages/ui/src/home/vertical.tsx
View File

@ -37,6 +37,7 @@ export const VerticalRecommanded = () => {
<InfiniteFetch <InfiniteFetch
query={VerticalRecommanded.query()} query={VerticalRecommanded.query()}
layout={{ ...ItemList.layout, layout: "vertical" }} layout={{ ...ItemList.layout, layout: "vertical" }}
fetchMore={false}
> >
{(x, i) => ( {(x, i) => (
<ItemList <ItemList