From f1707db5fbeb76b319bcfb0672cbd916e0f18820 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Thu, 7 Mar 2024 00:36:47 +0100
Subject: [PATCH] Fix oidc links baseUrl

---
 front/packages/models/src/query.tsx        | 23 ++++++++++++++++------
 front/packages/models/src/traits/images.ts |  4 ++--
 front/packages/ui/src/login/oidc.tsx       |  7 ++++---
 front/packages/ui/src/login/server-url.tsx |  3 ++-
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx
index 455ca542..aac6d879 100644
--- a/front/packages/models/src/query.tsx
+++ b/front/packages/models/src/query.tsx
@@ -25,6 +25,7 @@ import {
 	QueryFunctionContext,
 	useInfiniteQuery,
 	useQuery,
+	useQueryClient,
 } from "@tanstack/react-query";
 import { z } from "zod";
 import { KyooErrors } from "./kyoo-errors";
@@ -32,6 +33,8 @@ import { Page, Paged } from "./page";
 import { getToken } from "./login";
 import { getCurrentApiUrl } from ".";
 
+export let lastUsedUrl: string = null!;
+
 export const queryFn = async <Parser extends z.ZodTypeAny>(
 	context: {
 		apiUrl?: string | null;
@@ -49,7 +52,9 @@ export const queryFn = async <Parser extends z.ZodTypeAny>(
 	type?: Parser,
 	token?: string | null,
 ): Promise<z.infer<Parser>> => {
-	const url = context.apiUrl === undefined ? getCurrentApiUrl() : context.apiUrl;
+	const url = context.apiUrl ?? getCurrentApiUrl();
+	lastUsedUrl = url!;
+
 	if (token === undefined && context.authenticated !== false) token = await getToken();
 	const path = [url]
 		.concat(
@@ -166,7 +171,6 @@ export type QueryIdentifier<T = unknown, Ret = T> = {
 
 	placeholderData?: T | (() => T);
 	enabled?: boolean;
-	apiUrl?: string;
 	options?: Partial<Parameters<typeof queryFn>[0]>;
 };
 
@@ -184,10 +188,10 @@ export type QueryPage<Props = {}, Items = unknown> = ComponentType<
 export const toQueryKey = (query: {
 	path: (string | undefined)[];
 	params?: { [query: string]: boolean | number | string | string[] | undefined };
-	apiUrl?: string;
+	options?: { apiUrl?: string | null };
 }) => {
 	return [
-		query.apiUrl,
+		query.options?.apiUrl,
 		...query.path,
 		query.params
 			? "?" +
@@ -203,7 +207,14 @@ export const useFetch = <Data,>(query: QueryIdentifier<Data>) => {
 	return useQuery<Data, KyooErrors>({
 		queryKey: toQueryKey(query),
 		queryFn: (ctx) =>
-			queryFn({ ...ctx, apiUrl: query.apiUrl ? null : undefined, ...query.options }, query.parser),
+			queryFn(
+				{
+					...ctx,
+					queryKey: toQueryKey({ ...query, options: {} }),
+					...query.options,
+				},
+				query.parser,
+			),
 		placeholderData: query.placeholderData as any,
 		enabled: query.enabled,
 	});
@@ -214,7 +225,7 @@ export const useInfiniteFetch = <Data, Ret>(query: QueryIdentifier<Data, Ret>) =
 		queryKey: toQueryKey(query),
 		queryFn: (ctx) =>
 			queryFn(
-				{ ...ctx, apiUrl: query.apiUrl ? null : undefined, ...query.options },
+				{ ...ctx, queryKey: toQueryKey({ ...query, options: {} }), ...query.options },
 				Paged(query.parser),
 			),
 		getNextPageParam: (page: Page<Data>) => page?.next || undefined,
diff --git a/front/packages/models/src/traits/images.ts b/front/packages/models/src/traits/images.ts
index 51228982..fc4db48d 100644
--- a/front/packages/models/src/traits/images.ts
+++ b/front/packages/models/src/traits/images.ts
@@ -20,10 +20,10 @@
 
 import { Platform } from "react-native";
 import { ZodObject, ZodRawShape, z } from "zod";
-import { getCurrentApiUrl } from "..";
+import { lastUsedUrl } from "..";
 
 export const imageFn = (url: string) =>
-	Platform.OS === "web" ? `/api${url}` : `${getCurrentApiUrl()!}${url}`;
+	Platform.OS === "web" ? `/api${url}` : `${lastUsedUrl}${url}`;
 
 export const baseAppUrl = () => (Platform.OS === "web" ? window.location.origin : "kyoo://");
 
diff --git a/front/packages/ui/src/login/oidc.tsx b/front/packages/ui/src/login/oidc.tsx
index 3362bcbb..43b38772 100644
--- a/front/packages/ui/src/login/oidc.tsx
+++ b/front/packages/ui/src/login/oidc.tsx
@@ -26,7 +26,7 @@ import {
 	oidcLogin,
 	useFetch,
 } from "@kyoo/models";
-import { Button, HR, P, Skeleton, ts } from "@kyoo/primitives";
+import { Button, HR, Link, P, Skeleton, ts } from "@kyoo/primitives";
 import { View, ImageBackground } from "react-native";
 import { percent, rem, useYoshiki } from "yoshiki/native";
 import { useTranslation } from "react-i18next";
@@ -48,7 +48,8 @@ export const OidcLogin = ({ apiUrl }: { apiUrl?: string }) => {
 			) : data ? (
 				Object.values(data.oidc).map((x) => (
 					<Button
-						href={apiUrl ? `${x.link}&apiUrl=${apiUrl}` : x.link}
+						as={Link}
+						href={{ pathname: x.link, query: { apiUrl } }}
 						key={x.displayName}
 						licon={
 							x.logoUrl != null && (
@@ -104,7 +105,7 @@ export const OidcCallbackPage: QueryPage<{
 		hasRun.current = true;
 
 		function onError(error: string) {
-			router.replace({pathname: "/login", query: { error, apiUrl }}, undefined, {
+			router.replace({ pathname: "/login", query: { error, apiUrl } }, undefined, {
 				experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
 			});
 		}
diff --git a/front/packages/ui/src/login/server-url.tsx b/front/packages/ui/src/login/server-url.tsx
index c4b40712..ccedcd94 100644
--- a/front/packages/ui/src/login/server-url.tsx
+++ b/front/packages/ui/src/login/server-url.tsx
@@ -42,11 +42,12 @@ const query: QueryIdentifier<ServerInfo> = {
 export const ServerUrlPage: QueryPage = () => {
 	const [_apiUrl, setApiUrl] = useState("");
 	const apiUrl = cleanApiUrl(_apiUrl);
-	const { data, error } = useFetch({ ...query, apiUrl });
+	const { data, error } = useFetch({ ...query, options: { apiUrl } });
 	const router = useRouter();
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
 
+
 	return (
 		<View
 			{...css({