From d5a839b3c612afc7b3d862b804cb5f08ff9c3b82 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sun, 10 Dec 2023 21:30:31 +0100
Subject: [PATCH] Use gap in android lists

---
 front/packages/ui/src/fetch-infinite.tsx     | 19 ++++++++++++++++---
 front/packages/ui/src/fetch-infinite.web.tsx |  2 +-
 front/packages/ui/src/fetch.tsx              |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index 89b164ad..79b71b30 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -23,6 +23,7 @@ import { useBreakpointMap, HR } from "@kyoo/primitives";
 import { FlashList } from "@shopify/flash-list";
 import { ComponentProps, ComponentType, isValidElement, ReactElement, useRef } from "react";
 import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
+import { View, DimensionValue } from "react-native";
 
 export const InfiniteFetchList = <Data, Props, _>({
 	query,
@@ -54,7 +55,7 @@ export const InfiniteFetchList = <Data, Props, _>({
 	getItemType?: (item: WithLoading<Data>, index: number) => string | number;
 	fetchMore?: boolean;
 }): JSX.Element | null => {
-	const { numColumns, size } = useBreakpointMap(layout);
+	const { numColumns, size, gap } = useBreakpointMap(layout);
 	const oldItems = useRef<Data[] | undefined>();
 	let { items, error, fetchNextPage, hasNextPage, isFetching, refetch, isRefetching } = query;
 	if (incremental && items) oldItems.current = items;
@@ -75,10 +76,22 @@ export const InfiniteFetchList = <Data, Props, _>({
 	if (headerProps && !isValidElement(Header)) Header = <Header {...headerProps} />;
 	return (
 		<FlashList
-			renderItem={({ item, index }) => children({ isLoading: false, ...item } as any, index)}
+			contentContainerStyle={{
+				paddingHorizontal: layout.layout !== "vertical" ? gap / 2 : 0,
+			}}
+			renderItem={({ item, index }) => (
+				<View
+					style={{
+						paddingHorizontal: layout.layout !== "vertical" ? gap / 2 : 0,
+						paddingVertical: layout.layout !== "horizontal" ? gap / 2 : 0,
+					}}
+				>
+					{children({ isLoading: false, ...item } as any, index)}
+				</View>
+			)}
 			data={hasNextPage || isFetching ? [...(items || []), ...placeholders] : items}
 			horizontal={layout.layout === "horizontal"}
-			keyExtractor={(item: any) => item.id?.toString()}
+			keyExtractor={(item: any) => item.id}
 			numColumns={numColumns}
 			estimatedItemSize={size}
 			onEndReached={fetchMore ? fetchNextPage : undefined}
diff --git a/front/packages/ui/src/fetch-infinite.web.tsx b/front/packages/ui/src/fetch-infinite.web.tsx
index 92a7b35a..f365c6e6 100644
--- a/front/packages/ui/src/fetch-infinite.web.tsx
+++ b/front/packages/ui/src/fetch-infinite.web.tsx
@@ -190,7 +190,7 @@ export const InfiniteFetchList = <Data, _, HeaderProps>({
 			{...props}
 		>
 			{(items ?? oldItems.current)?.map((item, i) => (
-				<Fragment key={(item as any).id?.toString()}>
+				<Fragment key={(item as any).id}>
 					{Divider && i !== 0 && (Divider === true ? <HR /> : <Divider />)}
 					{children({ ...item, isLoading: false } as any, i)}
 				</Fragment>
diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx
index 9cd15bb4..bd79d6f8 100644
--- a/front/packages/ui/src/fetch.tsx
+++ b/front/packages/ui/src/fetch.tsx
@@ -27,7 +27,7 @@ import { useYoshiki } from "yoshiki/native";
 export type Layout = {
 	numColumns: Breakpoint<number>;
 	size: Breakpoint<number>;
-	gap: Breakpoint<number | string>;
+	gap: Breakpoint<number>;
 	layout: "grid" | "horizontal" | "vertical";
 };