Fix circular import of account context

front/src/providers/account-context.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import type { Account, Token } from "~/models";
+
+export const AccountContext = createContext<{
+	apiUrl: string;
+	authToken: Token | null;
+	selectedAccount: Account | null;
+	accounts: (Account & { select: () => void; remove: () => void })[];
+}>({ apiUrl: "api", authToken: null, selectedAccount: null, accounts: [] });

front/src/providers/account-provider.tsx

@@ -1,20 +1,13 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { type ReactNode, createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { type ReactNode, useContext, useEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { z } from "zod";
-import { type Account, AccountP, type Token, UserP } from "~/models";
+import { AccountP, UserP } from "~/models";
 import { useFetch } from "~/query";
 import { removeAccounts, updateAccount } from "./account-store";
 import { useSetError } from "./error-provider";
 import { useStoreValue } from "./settings";
 
-export const AccountContext = createContext<{
-	apiUrl: string;
-	authToken: Token | null;
-	selectedAccount: Account | null;
-	accounts: (Account & { select: () => void; remove: () => void })[];
-}>({ apiUrl: "/api", authToken: null, selectedAccount: null, accounts: [] });
-
 export const AccountProvider = ({ children }: { children: ReactNode }) => {
 	const [setError, clearError] = useSetError("account");
 	const accounts = useStoreValue("accounts", z.array(AccountP)) ?? [];
@@ -63,6 +56,7 @@ export const AccountProvider = ({ children }: { children: ReactNode }) => {
 		updateAccount(nUser.id, nUser);
 	}, [user, userIsSuccess, userIsPlaceholder]);
 
+	const queryClient = useQueryClient();
 	useEffect(() => {
 		if (!userError) return clearError();
 		setError({
@@ -71,11 +65,11 @@ export const AccountProvider = ({ children }: { children: ReactNode }) => {
 				queryClient.resetQueries();
 			},
 		});
-	}, [userError]);
+	}, [userError, queryClient, setError, clearError]);
 
-	const queryClient = useQueryClient();
 	const selectedId = ret.selectedAccount?.id;
 	useEffect(() => {
+		selectedId;
 		// if the user change account (or connect/disconnect), reset query cache.
 		queryClient.resetQueries();
 	}, [selectedId, queryClient]);

front/src/query/query.tsx

@@ -4,7 +4,7 @@ import { useContext } from "react";
 import { Platform } from "react-native";
 import type { z } from "zod";
 import { type KyooError, type Page, Paged } from "~/models";
-import { AccountContext } from "~/providers/account-provider";
+import { AccountContext } from "~/providers/account-context";
 
 const ssrApiUrl = process.env.KYOO_URL ?? "http://back/api";
 

front/src/ui/login/login.tsx

@@ -25,6 +25,13 @@ export const LoginPage: QueryPage<{ apiUrl?: string; error?: string }> = ({
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
 
+	useEffect(() => {
+		if (!apiUrl && Platform.OS !== "web")
+			router.replace("/server-url", undefined, {
+				experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
+			});
+	}, [apiUrl, router]);
+
 	return (
 		<FormPage apiUrl={apiUrl}>
 			<H1>{t("login.login")}</H1>

front/vite.config.ts

@@ -1,7 +1,7 @@
+import { resolvePath } from "@vxrn/resolve";
 import { one } from "one/vite";
 import type { UserConfig } from "vite";
 import svgr from "vite-plugin-svgr";
-import { resolvePath } from '@vxrn/resolve'
 
 export default {
 	ssr: {
@@ -12,7 +12,9 @@ export default {
 	},
 	resolve: {
 		alias: {
-			'@react-native/assets-registry/registry': resolvePath('react-native-web/dist/modules/AssetRegistry/index.js'),
+			"@react-native/assets-registry/registry": resolvePath(
+				"react-native-web/dist/modules/AssetRegistry/index.js",
+			),
 		},
 	},
 	plugins: [
@@ -43,5 +45,6 @@ export default {
 				rewrite: (path) => path.replace(/^\/api/, ""),
 			},
 		},
+		allowedHosts: true,
 	},
 } satisfies UserConfig;