Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-04 22:24:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add optimistic mutations on settings page

Browse Source
This commit is contained in:
Zoe Roux 2024-01-31 15:23:00 +01:00
parent 7c56ec8285
commit 885b784f92
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/packages/models/src/accounts.tsx
View File

@ -99,11 +99,8 @@ export const AccountProvider = ({
// update user's data from kyoo un startup, it could have changed. // update user's data from kyoo un startup, it could have changed.
const selected = useMemo(() => accounts.find((x) => x.selected), [accounts]); const selected = useMemo(() => accounts.find((x) => x.selected), [accounts]);
const controller = useMemo(() => { const controller = new AbortController();
const ret = new AbortController(); setTimeout(() => controller.abort(), 5_000);
setTimeout(() => ret.abort(), 5_000);
return ret;
}, [selected]);
const user = useFetch({ const user = useFetch({
path: ["auth", "me"], path: ["auth", "me"],
parser: UserP, parser: UserP,

10
front/packages/ui/src/settings/base.tsx
View File

@ -122,6 +122,16 @@ export const useSetting = <Setting extends keyof User["settings"]>(setting: Sett
method: "PATCH", method: "PATCH",
body: { settings: { ...account!.settings, ...update } }, 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"] }), onSettled: async () => await queryClient.invalidateQueries({ queryKey: ["auth", "me"] }),
}); });