diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx index c8af037c..7f38c94f 100644 --- a/front/packages/models/src/query.tsx +++ b/front/packages/models/src/query.tsx @@ -129,7 +129,7 @@ export const queryFn = async ( if (!type) return data; const parsed = await type.safeParseAsync(data); if (!parsed.success) { - console.log("Parse error: ", parsed.error); + console.log("Path: ", path, " Response: ", resp.status, " Parse error: ", parsed.error); throw { errors: [ "Invalid response from kyoo. Possible version mismatch between the server and the application.", diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx index b4882b10..d801f456 100644 --- a/front/packages/ui/src/fetch-infinite.web.tsx +++ b/front/packages/ui/src/fetch-infinite.web.tsx @@ -108,7 +108,7 @@ const InfiniteScroll = ({ ); }; -export const InfiniteFetch = ({ +export const InfiniteFetch = ({ query, incremental = false, placeholderCount = 15, @@ -118,6 +118,7 @@ export const InfiniteFetch = ({ empty, divider: Divider = false, Header, + headerProps, getItemType, ...props }: { @@ -132,7 +133,8 @@ export const InfiniteFetch = ({ ) => ReactElement | null; empty?: string | JSX.Element; divider?: boolean | ComponentType; - Header?: ComponentType<{ children: JSX.Element }> | ReactElement; + Header?: ComponentType<{ children: JSX.Element } & HeaderProps> | ReactElement; + headerProps: HeaderProps, getItemType?: (item: Data, index: number) => string | number; }): JSX.Element | null => { if (!query.infinite) console.warn("A non infinite query was passed to an InfiniteFetch."); @@ -145,7 +147,7 @@ export const InfiniteFetch = ({ if (incremental && items) oldItems.current = items; - if (error) return addHeader(Header, ); + if (error) return addHeader(Header, , headerProps); if (empty && items && items.length === 0) { if (typeof empty !== "string") return empty; return ; @@ -164,6 +166,7 @@ export const InfiniteFetch = ({ ))} Header={Header} + headerProps={headerProps} {...props} > {(items ?? oldItems.current)?.map((item, i) => ( @@ -176,13 +179,15 @@ export const InfiniteFetch = ({ ); }; -const addHeader = ( - Header: ComponentType<{ children: JSX.Element }> | ReactElement | undefined, +const addHeader = ( + Header: ComponentType<{ children: JSX.Element } & Props> | ReactElement | undefined, children: ReactElement, + headerProps?: Props ) => { if (!Header) return children; - return typeof Header === "function" ? ( -
{children}
+ return !isValidElement(Header) ? ( + // @ts-ignore +
{children}
) : ( <> {Header}