Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 04:04:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix accounts infinite rerender loop

Browse Source
This commit is contained in:
Zoe Roux 2024-05-19 18:20:02 +02:00
parent a937e445de
commit e0935d7faa
No known key found for this signature in database
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,19 +133,31 @@ export const AccountProvider = ({
setApiUrl(selected?.apiUrl ?? defaultApiUrl); setApiUrl(selected?.apiUrl ?? defaultApiUrl);
}, [selected, setApiUrl]); }, [selected, setApiUrl]);
const user = useFetch({ const {
isSuccess: userIsSuccess,
isError: userIsError,
isLoading: userIsLoading,
isPlaceholderData: userIsPlaceholder,
data: user,
error: userError,
} = useFetch({
path: ["auth", "me"], path: ["auth", "me"],
parser: UserP, parser: UserP,
placeholderData: selected as User, placeholderData: selected as User,
enabled: !!selected, enabled: !!selected,
}); });
// Use a ref here because we don't want the effect to trigger when the selected
// value has changed, only when the fetch result changed
// If we trigger the effect when the selected value change, we enter an infinite render loop
const selectedRef = useRef(selected);
selectedRef.current = selected;
useEffect(() => { useEffect(() => {
if (!selected || !user.isSuccess || user.isPlaceholderData) return; if (!selectedRef.current || !userIsSuccess || userIsPlaceholder) return;
// The id is different when user is stale data, we need to wait for the use effect to invalidate the query. // The id is different when user is stale data, we need to wait for the use effect to invalidate the query.
if (user.data.id !== selected.id) return; if (user.id !== selectedRef.current.id) return;
const nUser = { ...selected, ...user.data }; const nUser = { ...selectedRef.current, ...user };
if (!Object.is(selected, nUser)) updateAccount(nUser.id, nUser); updateAccount(nUser.id, nUser);
}, [selected, user]); }, [user]);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const oldSelected = useRef<{ id: string; token: string } | null>( const oldSelected = useRef<{ id: string; token: string } | null>(
@ -154,7 +166,6 @@ export const AccountProvider = ({
const [permissionError, setPermissionError] = useState<KyooErrors | null>(null); const [permissionError, setPermissionError] = useState<KyooErrors | null>(null);
const userIsError = user.isError;
useEffect(() => { useEffect(() => {
// if the user change account (or connect/disconnect), reset query cache. // if the user change account (or connect/disconnect), reset query cache.
if ( if (
@ -180,8 +191,8 @@ export const AccountProvider = ({
<AccountContext.Provider value={accounts}> <AccountContext.Provider value={accounts}>
<ConnectionErrorContext.Provider <ConnectionErrorContext.Provider
value={{ value={{
error: (selected ? initialSsrError.current ?? user.error : null) ?? permissionError, error: (selected ? initialSsrError.current ?? userError : null) ?? permissionError,
loading: user.isLoading, loading: userIsLoading,
retry: () => { retry: () => {
queryClient.invalidateQueries({ queryKey: ["auth", "me"] }); queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
}, },

2
front/packages/primitives/src/menu.tsx
View File

@ -68,7 +68,7 @@ const Menu = <AsProps,>({
const [isOpen, setOpen] = const [isOpen, setOpen] =
outerOpen !== undefined && outerSetOpen ? [outerOpen, outerSetOpen] : useState(false); outerOpen !== undefined && outerSetOpen ? [outerOpen, outerSetOpen] : useState(false);
// deos the same as a useMemo but for props. // does the same as a useMemo but for props.
const memoRef = useRef({ onMenuOpen, onMenuClose }); const memoRef = useRef({ onMenuOpen, onMenuClose });
memoRef.current = { onMenuOpen, onMenuClose }; memoRef.current = { onMenuOpen, onMenuClose };
useEffect(() => { useEffect(() => {

9
front/packages/primitives/src/themes/theme.tsx
View File

@ -20,19 +20,14 @@
import type { Property } from "csstype"; import type { Property } from "csstype";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { Platform } from "react-native"; import { Platform, type TextStyle } from "react-native";
import { type Theme, ThemeProvider, useAutomaticTheme } from "yoshiki"; import { type Theme, ThemeProvider, useAutomaticTheme } from "yoshiki";
import "yoshiki"; import "yoshiki";
import { useTheme, useYoshiki } from "yoshiki/native"; import { useTheme, useYoshiki } from "yoshiki/native";
import "yoshiki/native"; import "yoshiki/native";
import { catppuccin } from "./catppuccin"; import { catppuccin } from "./catppuccin";
type FontList = Partial< type FontList = Partial<Record<Exclude<TextStyle["fontWeight"], null | undefined>, string>>;
Record<
"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900",
string
>
>;
type Mode = { type Mode = {
mode: "light" | "dark" | "auto"; mode: "light" | "dark" | "auto";