Make accounts switch while having a permission error work

This commit is contained in:
Zoe Roux 2024-03-10 16:26:09 +01:00
parent 08f3e9c06b
commit 5f936d36b1
3 changed files with 12 additions and 5 deletions

View File

@ -139,7 +139,7 @@ const WithLayout = ({ Component, ...props }: { Component: ComponentType }) => {
return ( return (
<Layout <Layout
page={ page={
<ErrorContext key={Component as any}> <ErrorContext>
<Component {...props} /> <Component {...props} />
</ErrorContext> </ErrorContext>
} }

View File

@ -94,7 +94,7 @@ export const AccountProvider = ({
error: ssrError || null, error: ssrError || null,
loading: false, loading: false,
retry: () => { retry: () => {
queryClient.invalidateQueries({ queryKey: ["auth", "me"] }); queryClient.resetQueries({ queryKey: ["auth", "me"] });
}, },
}} }}
> >
@ -144,7 +144,7 @@ export const AccountProvider = ({
// if the user change account (or connect/disconnect), reset query cache. // if the user change account (or connect/disconnect), reset query cache.
if (selected?.id !== oldSelectedId.current) { if (selected?.id !== oldSelectedId.current) {
initialSsrError.current = undefined; initialSsrError.current = undefined;
queryClient.invalidateQueries(); queryClient.resetQueries();
} }
oldSelectedId.current = selected?.id; oldSelectedId.current = selected?.id;

View File

@ -18,9 +18,9 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { KyooErrors } from "@kyoo/models"; import { KyooErrors, useAccount } from "@kyoo/models";
import { P } from "@kyoo/primitives"; import { P } from "@kyoo/primitives";
import { ReactElement, createContext, useContext, useLayoutEffect, useState } from "react"; import { ReactElement, createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
import { View } from "react-native"; import { View } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { PermissionError } from "./unauthorized"; import { PermissionError } from "./unauthorized";
@ -60,8 +60,15 @@ export const ErrorView = ({
}; };
const ErrorCtx = createContext<(val: KyooErrors | null) => void>(null!); const ErrorCtx = createContext<(val: KyooErrors | null) => void>(null!);
export const ErrorContext = ({ children }: { children: ReactElement }) => { export const ErrorContext = ({ children }: { children: ReactElement }) => {
const [error, setError] = useState<KyooErrors | null>(null); const [error, setError] = useState<KyooErrors | null>(null);
const account = useAccount();
useEffect(() => {
setError(null);
}, [account, children]);
if (error && (error.status === 401 || error.status === 403)) if (error && (error.status === 401 || error.status === 403))
return <PermissionError error={error} />; return <PermissionError error={error} />;
if (error) return <ErrorView error={error} noBubble />; if (error) return <ErrorView error={error} noBubble />;