From 885b784f92828d91ddcdc2d7dfb3281dd5b5b195 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 31 Jan 2024 15:23:00 +0100
Subject: [PATCH] Add optimistic mutations on settings page

---
 front/packages/models/src/accounts.tsx  |  7 ++-----
 front/packages/ui/src/settings/base.tsx | 10 ++++++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/front/packages/models/src/accounts.tsx b/front/packages/models/src/accounts.tsx
index f3d89c19..d3413da2 100644
--- a/front/packages/models/src/accounts.tsx
+++ b/front/packages/models/src/accounts.tsx
@@ -99,11 +99,8 @@ export const AccountProvider = ({
 
 	// update user's data from kyoo un startup, it could have changed.
 	const selected = useMemo(() => accounts.find((x) => x.selected), [accounts]);
-	const controller = useMemo(() => {
-		const ret = new AbortController();
-		setTimeout(() => ret.abort(), 5_000);
-		return ret;
-	}, [selected]);
+	const controller = new AbortController();
+	setTimeout(() => controller.abort(), 5_000);
 	const user = useFetch({
 		path: ["auth", "me"],
 		parser: UserP,
diff --git a/front/packages/ui/src/settings/base.tsx b/front/packages/ui/src/settings/base.tsx
index 7b67ff61..8a9e3265 100644
--- a/front/packages/ui/src/settings/base.tsx
+++ b/front/packages/ui/src/settings/base.tsx
@@ -122,6 +122,16 @@ export const useSetting = <Setting extends keyof User["settings"]>(setting: Sett
 				method: "PATCH",
 				body: { settings: { ...account!.settings, ...update } },
 			}),
+		onMutate: async (newSettings) => {
+			const next = { ...account!, settings: { ...account!.settings, ...newSettings } };
+			await queryClient.cancelQueries({ queryKey: ["auth", "me"] });
+			const previous = queryClient.getQueryData(["auth", "me"]);
+			queryClient.setQueryData(["auth", "me"], next);
+			return { previous, next };
+		},
+		onError: (_, __, context) => {
+			queryClient.setQueryData(["auth", "me"], context!.previous);
+		},
 		onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["auth", "me"] }),
 	});