Handle invalid users on mobile too

front/apps/web/src/pages/_app.tsx

@@ -55,7 +55,7 @@ import arrayShuffle from "array-shuffle";
 import { Tooltip } from "react-tooltip";
 import { getCurrentAccount, readCookie, updateAccount } from "@kyoo/models/src/account-internal";
 import { PortalProvider } from "@gorhom/portal";
-import { ConnectionError, ErrorContext } from "@kyoo/ui";
+import { ConnectionError } from "@kyoo/ui";
 
 const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
 
@@ -136,17 +136,7 @@ const WithLayout = ({ Component, ...props }: { Component: ComponentType }) => {
 	const layoutInfo = (Component as QueryPage).getLayout ?? (({ page }) => page);
 	const { Layout, props: layoutProps } =
 		typeof layoutInfo === "function" ? { Layout: layoutInfo, props: {} } : layoutInfo;
-	return (
-		<Layout
-			page={
-				<ErrorContext>
-					<Component {...props} />
-				</ErrorContext>
-			}
-			randomItems={[]}
-			{...layoutProps}
-		/>
-	);
+	return <Layout page={<Component {...props} />} randomItems={[]} {...layoutProps} />;
 };
 
 const App = ({ Component, pageProps }: AppProps) => {

front/packages/models/src/accounts.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode, createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { ReactNode, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ServerInfoP, User, UserP } from "./resources";
 import { z } from "zod";
 import { zdate } from "./utils";
@@ -69,7 +69,8 @@ export const ConnectionErrorContext = createContext<{
 	error: KyooErrors | null;
 	loading: boolean;
 	retry?: () => void;
-}>({ error: null, loading: true });
+	setError: (error: KyooErrors) => void;
+}>({ error: null, loading: true, setError: () => {} });
 
 /* eslint-disable react-hooks/rules-of-hooks */
 export const AccountProvider = ({
@@ -96,6 +97,7 @@ export const AccountProvider = ({
 						retry: () => {
 							queryClient.resetQueries({ queryKey: ["auth", "me"] });
 						},
+						setError: () => {},
 					}}
 				>
 					{children}
@@ -156,15 +158,18 @@ export const AccountProvider = ({
 		}
 	}, [selected, queryClient]);
 
+	const [permissionError, setPermissionError] = useState<KyooErrors | null>(null);
+
 	return (
 		<AccountContext.Provider value={accounts}>
 			<ConnectionErrorContext.Provider
 				value={{
-					error: selected ? initialSsrError.current ?? user.error : null,
+					error: selected ? initialSsrError.current ?? user.error ?? permissionError : null,
 					loading: user.isLoading,
 					retry: () => {
 						queryClient.invalidateQueries({ queryKey: ["auth", "me"] });
 					},
+					setError: setPermissionError,
 				}}
 			>
 				{children}

front/packages/ui/src/errors/connection.tsx

@@ -18,21 +18,49 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ConnectionErrorContext } from "@kyoo/models";
-import { Button, H1, P, ts } from "@kyoo/primitives";
+import { ConnectionErrorContext, useAccount } from "@kyoo/models";
+import { Button, H1, Icon, Link, P, ts } from "@kyoo/primitives";
 import { useRouter } from "solito/router";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
 import { DefaultLayout } from "../layout";
+import { ErrorView } from "./error";
+import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
 
 export const ConnectionError = () => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 	const router = useRouter();
 	const { error, retry } = useContext(ConnectionErrorContext);
+	const account = useAccount();
 
+	if (error && (error.status === 401 || error.status == 403)) {
+		if (!account) {
+			return (
+				<View
+					{...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}
+				>
+					<P>{t("errors.needAccount")}</P>
+					<Button
+						as={Link}
+						href={"/register"}
+						text={t("login.register")}
+						licon={<Icon icon={Register} {...css({ marginRight: ts(2) })} />}
+					/>
+				</View>
+			);
+		}
+		if (account.isVerified) return <ErrorView error={error} noBubble />;
+		return (
+			<View
+				{...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}
+			>
+				<P>{t("errors.needVerification")}</P>
+			</View>
+		);
+	}
 	return (
 		<View {...css({ padding: ts(2) })}>
 			<H1 {...css({ textAlign: "center" })}>{t("errors.connection")}</H1>

front/packages/ui/src/errors/error.tsx

@@ -18,19 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { KyooErrors, useAccount } from "@kyoo/models";
+import { ConnectionErrorContext, KyooErrors } from "@kyoo/models";
 import { P } from "@kyoo/primitives";
-import {
-	ReactElement,
-	createContext,
-	useContext,
-	useEffect,
-	useLayoutEffect,
-	useState,
-} from "react";
+import { useContext, useLayoutEffect } from "react";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
-import { PermissionError } from "./unauthorized";
 
 export const ErrorView = ({
 	error,
@@ -40,7 +32,7 @@ export const ErrorView = ({
 	noBubble?: boolean;
 }) => {
 	const { css } = useYoshiki();
-	const setError = useErrorContext();
+	const { setError } = useContext(ConnectionErrorContext);
 
 	useLayoutEffect(() => {
 		// if this is a permission error, make it go up the tree to have a whole page login screen.
@@ -65,22 +57,3 @@ export const ErrorView = ({
 		</View>
 	);
 };
-
-const ErrorCtx = createContext<(val: KyooErrors | null) => void>(null!);
-
-export const ErrorContext = ({ children }: { children: ReactElement }) => {
-	const [error, setError] = useState<KyooErrors | null>(null);
-	const account = useAccount();
-
-	useEffect(() => {
-		setError(null);
-	}, [account, children]);
-
-	if (error && (error.status === 401 || error.status === 403))
-		return <PermissionError error={error} />;
-	if (error) return <ErrorView error={error} noBubble />;
-	return <ErrorCtx.Provider value={setError}>{children}</ErrorCtx.Provider>;
-};
-export const useErrorContext = () => {
-	return useContext(ErrorCtx);
-};

front/packages/ui/src/errors/unauthorized.tsx

@@ -18,13 +18,10 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { KyooErrors, useAccount } from "@kyoo/models";
-import { Button, Icon, Link, P, ts } from "@kyoo/primitives";
+import { P } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
-import { rem, useYoshiki } from "yoshiki/native";
-import { ErrorView } from "./error";
-import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
+import { useYoshiki } from "yoshiki/native";
 
 export const Unauthorized = ({ missing }: { missing: string[] }) => {
 	const { t } = useTranslation();
@@ -43,31 +40,3 @@ export const Unauthorized = ({ missing }: { missing: string[] }) => {
 		</View>
 	);
 };
-
-export const PermissionError = ({ error }: { error: KyooErrors }) => {
-	const { t } = useTranslation();
-	const { css } = useYoshiki();
-	const account = useAccount();
-
-	if (!account) {
-		return (
-			<View
-				{...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}
-			>
-				<P>{t("errors.needAccount")}</P>
-				<Button
-					as={Link}
-					href={"/register"}
-					text={t("login.register")}
-					licon={<Icon icon={Register} {...css({ marginRight: ts(2) })} />}
-				/>
-			</View>
-		);
-	}
-	if (account.isVerified) return <ErrorView error={error} noBubble />;
-	return (
-		<View {...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}>
-			<P>{t("errors.needVerification")}</P>
-		</View>
-	);
-};