From 721d9937e0087b1b0fa32b17e069f139d554a663 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 10 Jan 2024 14:09:07 +0100
Subject: [PATCH] Create a refresh controller for the home page on android

---
 front/packages/ui/src/fetch-infinite.tsx |  2 +-
 front/packages/ui/src/home/index.tsx     | 30 +++++++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/front/packages/ui/src/fetch-infinite.tsx b/front/packages/ui/src/fetch-infinite.tsx
index edfb2b3e..e80128e7 100644
--- a/front/packages/ui/src/fetch-infinite.tsx
+++ b/front/packages/ui/src/fetch-infinite.tsx
@@ -137,7 +137,7 @@ export const InfiniteFetchList = <Data, Props, _, Kind extends number | string>(
 			estimatedItemSize={size}
 			onEndReached={fetchMore ? fetchNextPage : undefined}
 			onEndReachedThreshold={0.5}
-			onRefresh={refetch}
+			onRefresh={layout.layout !== "horizontal" ? refetch : null}
 			refreshing={isRefetching}
 			ItemSeparatorComponent={divider === true ? HR : divider || null}
 			ListHeaderComponent={Header}
diff --git a/front/packages/ui/src/home/index.tsx b/front/packages/ui/src/home/index.tsx
index b92e0b07..9aa85257 100644
--- a/front/packages/ui/src/home/index.tsx
+++ b/front/packages/ui/src/home/index.tsx
@@ -18,20 +18,44 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Genre, QueryPage } from "@kyoo/models";
+import { Genre, QueryPage, toQueryKey } from "@kyoo/models";
 import { Fetch } from "../fetch";
 import { Header } from "./header";
 import { DefaultLayout } from "../layout";
-import { ScrollView } from "react-native";
+import { RefreshControl, ScrollView } from "react-native";
 import { GenreGrid } from "./genre";
 import { Recommanded } from "./recommanded";
 import { VerticalRecommanded } from "./vertical";
 import { NewsList } from "./news";
 import { WatchlistList } from "./watchlist";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 
 export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
+	const queryClient = useQueryClient();
+	const [refreshing, setRefreshing] = useState(false);
+
 	return (
-		<ScrollView>
+		<ScrollView
+			refreshControl={
+				<RefreshControl
+					onRefresh={async () => {
+						setRefreshing(true);
+						await Promise.all(
+							HomePage.getFetchUrls!({}, randomItems).map((query) =>
+								queryClient.refetchQueries({
+									queryKey: toQueryKey(query),
+									type: "active",
+									exact: true,
+								}),
+							),
+						);
+						setRefreshing(false);
+					}}
+					refreshing={refreshing}
+				/>
+			}
+		>
 			<Fetch query={Header.query()}>
 				{(x) => (
 					<Header