Allow user to change account when one server does not answer

front/apps/mobile/app/_layout.tsx

@@ -37,10 +37,7 @@ import { useEffect, useState } from "react";
 import { useColorScheme } from "react-native";
 import { initReactI18next } from "react-i18next";
 import { useTheme } from "yoshiki/native";
-import { Button, CircularProgress, H1, P, ts } from "@kyoo/primitives";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { useYoshiki } from "yoshiki/native";
+import { CircularProgress } from "@kyoo/primitives";
 import { useRouter } from "solito/router";
 import "intl-pluralrules";
 
@@ -60,24 +57,15 @@ i18next.use(initReactI18next).init({
 	},
 });
 
-export const ConnectionError = ({ error, retry }: { error?: string; retry: () => void }) => {
-	const { css } = useYoshiki();
-	const { t } = useTranslation();
+export const ConnectionError = () => {
 	const router = useRouter();
 
-	return (
-		<View {...css({ padding: ts(2) })}>
-			<H1 {...css({ textAlign: "center" })}>{t("errors.connection")}</H1>
-			<P>{error ?? t("error.unknown")}</P>
-			<P>{t("errors.connection-tips")}</P>
-			<Button onPress={retry} text={t("errors.try-again")} {...css({ m: ts(1) })} />
-			<Button
-				onPress={() => router.push("/login")}
-				text={t("errors.re-login")}
-				{...css({ m: ts(1) })}
-			/>
-		</View>
-	);
+	useEffect(() => {
+		router.replace("/connection-error", undefined, {
+			experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
+		});
+	}, [router]);
+	return null;
 };
 
 const ThemedStack = ({ onLayout }: { onLayout?: () => void }) => {
@@ -135,14 +123,9 @@ export default function Root() {
 					}}
 				>
 					<PortalProvider>
-						{info.type === "loading" && <CircularProgress />}
-						{info.type === "error" && <ConnectionError error={info.error} retry={info.retry} />}
-						{info.type === "ok" && (
-							<>
-								<ThemedStack />
-								<AuthGuard selected={info.selected} />
-							</>
-						)}
+						{info.type === "loading" ? <CircularProgress /> : <ThemedStack />}
+						{info.type === "error" && <ConnectionError />}
+						{info.type === "ok" && <AuthGuard selected={info.selected} />}
 					</PortalProvider>
 				</ThemeSelector>
 			</QueryClientProvider>

front/apps/mobile/app/connection-error.tsx

@@ -0,0 +1,50 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { AccountContext } from "@kyoo/models";
+import { Button, H1, P, ts } from "@kyoo/primitives";
+import { useRouter } from "expo-router";
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+
+const ConnectionError = () => {
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
+	const router = useRouter();
+	const { error, retry } = useContext(AccountContext);
+
+	return (
+		<View {...css({ padding: ts(2) })}>
+			<H1 {...css({ textAlign: "center" })}>{t("errors.connection")}</H1>
+			<P>{error ?? t("error.unknown")}</P>
+			<P>{t("errors.connection-tips")}</P>
+			<Button onPress={retry} text={t("errors.try-again")} {...css({ m: ts(1) })} />
+			<Button
+				onPress={() => router.push("/login")}
+				text={t("errors.re-login")}
+				{...css({ m: ts(1) })}
+			/>
+		</View>
+	);
+};
+
+export default ConnectionError;

front/packages/models/src/accounts.tsx

@@ -35,12 +35,17 @@ export const useAccounts = () => {
 	const [retryCount, setRetryCount] = useState(0);
 
 	const sel = getSecureItem("selected");
-	let [selected, setSelected] = useState<number | null>(
+	let [selected, _setSelected] = useState<number | null>(
 		sel ? parseInt(sel) : accounts.length > 0 ? 0 : null,
 	);
 	if (selected === null && accounts.length > 0) selected = 0;
 	if (accounts.length === 0) selected = null;
 
+	const setSelected = (selected: number) => {
+		_setSelected(selected);
+		setSecureItem("selected", selected.toString());
+	};
+
 	useEffect(() => {
 		async function check() {
 			setVerified({status: "loading"});
@@ -65,7 +70,10 @@ export const useAccounts = () => {
 	if (verified.status === "error") {
 		return {
 			type: "error",
+			accounts,
+			selected,
 			error: verified.error,
+			setSelected,
 			retry: () => {
 				setVerified({ status: "loading" });
 				setRetryCount((x) => x + 1);
@@ -76,10 +84,7 @@ export const useAccounts = () => {
 		type: "ok",
 		accounts,
 		selected,
-		setSelected: (selected: number) => {
-			setSelected(selected);
-			setSecureItem("selected", selected.toString());
-		},
+		setSelected,
 	} as const;
 };
 

front/packages/models/src/login.ts

@@ -45,6 +45,7 @@ const addAccount = (token: Token, apiUrl: string, username: string | null) => {
 	if (accounts.find((x) => x.username === username && x.apiUrl === apiUrl)) return;
 	accounts.push({ ...token, username: username!, apiUrl });
 	setSecureItem("accounts", JSON.stringify(accounts));
+	setSecureItem("selected", (accounts.length - 1).toString());
 };
 
 const setCurrentAccountToken = (token: Token) => {

front/packages/ui/src/navbar/index.tsx

@@ -132,7 +132,7 @@ export const NavbarProfile = () => {
 							label={`${x.username} - ${getDisplayUrl(x.apiUrl)}`}
 							left={<Avatar placeholder={x.username} />}
 							selected={selected === i}
-							onSelect={() => setSelected(i)}
+							onSelect={() => setSelected!(i)}
 						/>
 					))}
 					{accounts && accounts.length > 0 && <HR />}