wip: Rework home's watchlist

front/src/query/fetch-infinite.tsx

@@ -13,10 +13,12 @@ export type Layout = {
 	layout: "grid" | "horizontal" | "vertical";
 };
 
-export const InfiniteFetch = <Data,>({
+export const InfiniteFetch = <Data, Type extends string = string>({
 	query,
 	placeholderCount = 2,
 	incremental = false,
+	getItemType,
+	getItemSizeMult,
 	Render,
 	Loader,
 	layout,
@@ -31,6 +33,8 @@ export const InfiniteFetch = <Data,>({
 	placeholderCount?: number;
 	layout: Layout;
 	horizontal?: boolean;
+	getItemType?: (item: Data, index: number) => Type;
+	getItemSizeMult?: (item: Data, index: number, type: Type) => number;
 	Render: (props: { item: Data; index: number }) => ReactElement | null;
 	Loader: (props: { index: number }) => ReactElement | null;
 	Empty?: JSX.Element;
@@ -74,11 +78,17 @@ export const InfiniteFetch = <Data,>({
 		<LegendList
 			data={data}
 			recycleItems
+			getItemType={getItemType}
+			estimatedItemSize={getItemSizeMult ? undefined : size}
+			getEstimatedItemSize={
+				getItemSizeMult
+					? (idx, item, type) => getItemSizeMult(item, idx, type as Type) * size
+					: undefined
+			}
 			renderItem={({ item, index }) =>
 				item ? <Render index={index} item={item} /> : <Loader index={index} />
 			}
 			keyExtractor={(item: any, index) => (item ? item.id : index)}
-			estimatedItemSize={size}
 			horizontal={layout.layout === "horizontal"}
 			numColumns={layout.layout === "horizontal" ? 1 : numColumns}
 			onEndReached={fetchMore ? () => fetchNextPage() : undefined}

front/src/query/query.tsx

@@ -301,7 +301,7 @@ export const useMutation = <T = void, QueryRet = void>({
 	...queryParams
 }: MutationParams & {
 	compute?: (param: T) => MutationParams;
-	optimistic?: (param: T) => QueryRet;
+	optimistic?: (param: T, previous?: QueryRet) => QueryRet | undefined;
 	invalidate: string[] | null;
 }) => {
 	const { apiUrl, authToken } = useContext(AccountContext);
@@ -324,13 +324,15 @@ export const useMutation = <T = void, QueryRet = void>({
 		...(invalidate && optimistic
 			? {
 					onMutate: async (params) => {
-						const next = optimistic(params);
 						const queryKey = toQueryKey({ apiUrl, path: invalidate });
 						await queryClient.cancelQueries({
 							queryKey,
 						});
+
 						const previous = queryClient.getQueryData(queryKey);
+						const next = optimistic(params, previous as QueryRet);
 						queryClient.setQueryData(queryKey, next);
+
 						return { previous, next };
 					},
 					onError: (_, __, context) => {