From 93decb02af4d2a348f13fec9705f77a832da6e50 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Fri, 8 Mar 2024 23:11:09 +0100
Subject: [PATCH] Fix ssr issue

---
 front/apps/web/src/pages/_app.tsx           | 23 +++++++++++++++++----
 front/packages/models/src/accounts.tsx      |  6 ++++--
 front/packages/models/src/query.tsx         |  4 ++--
 front/packages/models/src/resources/user.ts |  2 +-
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx
index a82c952a..7043cc5f 100755
--- a/front/apps/web/src/pages/_app.tsx
+++ b/front/apps/web/src/pages/_app.tsx
@@ -20,7 +20,7 @@
 
 import "../polyfill";
 
-import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
+import { HydrationBoundary, QueryClientProvider, dehydrate } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
 	HiddenIfNoJs,
@@ -39,6 +39,8 @@ import {
 	getTokenWJ,
 	QueryIdentifier,
 	QueryPage,
+	ServerInfoP,
+	setSsrApiUrl,
 	UserP,
 	useUserTheme,
 } from "@kyoo/models";
@@ -54,6 +56,7 @@ import { Tooltip } from "react-tooltip";
 import { getCurrentAccount, readCookie, updateAccount } from "@kyoo/models/src/account-internal";
 import { PortalProvider } from "@gorhom/portal";
 import { ConnectionError } from "@kyoo/ui";
+import { getDefaultStore } from "jotai";
 
 const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
 
@@ -206,15 +209,27 @@ App.getInitialProps = async (ctx: AppContext) => {
 	const urls: QueryIdentifier[] = [
 		...(getUrl ? getUrl(ctx.router.query as any, items) : []),
 		...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any, items) : []),
+		// always include server info for guest permissions.
+		{ path: ["info"], parser: ServerInfoP },
 	];
 
+	setSsrApiUrl();
+
 	const account = readCookie(ctx.ctx.req?.headers.cookie, "account", AccountP);
 	if (account) urls.push({ path: ["auth", "me"], parser: UserP });
 	const [authToken, token, error] = await getTokenWJ(account);
 	if (error) appProps.pageProps.ssrError = error;
-	else appProps.pageProps.queryState = await fetchQuery(urls, authToken);
-	appProps.pageProps.token = token;
-	appProps.pageProps.account = account;
+	else {
+		const client = (await fetchQuery(urls, authToken))!;
+		appProps.pageProps.queryState = dehydrate(client);
+		appProps.pageProps.token = token;
+		appProps.pageProps.account = {
+			...client.getQueryData(["auth", "me"]),
+			...account,
+		};
+	}
+	// TODO: return account from /auth/me and not the one from cookies,
+	// do not forget to leave apiUrl and selected intact
 	appProps.pageProps.theme = readCookie(ctx.ctx.req?.headers.cookie, "theme") ?? "auto";
 
 	return { pageProps: superjson.serialize(appProps.pageProps) };
diff --git a/front/packages/models/src/accounts.tsx b/front/packages/models/src/accounts.tsx
index 51b01dd0..06838193 100644
--- a/front/packages/models/src/accounts.tsx
+++ b/front/packages/models/src/accounts.tsx
@@ -59,6 +59,10 @@ export const getCurrentApiUrl = () => {
 export const useCurrentApiUrl = () => {
 	return useAtomValue(currentApiUrl);
 };
+export const setSsrApiUrl = () => {
+	const store = getDefaultStore();
+	store.set(currentApiUrl, process.env.KYOO_URL ?? "http://localhost:5000");
+};
 
 const AccountContext = createContext<(Account & { select: () => void; remove: () => void })[]>([]);
 export const ConnectionErrorContext = createContext<{
@@ -83,8 +87,6 @@ export const AccountProvider = ({
 			? [{ ...ssrAccount, selected: true, select: () => {}, remove: () => {} }]
 			: [];
 
-		setApiUrl(process.env.KYOO_URL ?? "http://localhost:5000");
-
 		return (
 			<AccountContext.Provider value={accs}>
 				<ConnectionErrorContext.Provider
diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx
index 5d0a43b6..7ed0f64b 100644
--- a/front/packages/models/src/query.tsx
+++ b/front/packages/models/src/query.tsx
@@ -247,7 +247,7 @@ export const useInfiniteFetch = <Data, Ret>(query: QueryIdentifier<Data, Ret>) =
 export const fetchQuery = async (queries: QueryIdentifier[], authToken?: string | null) => {
 	// we can't put this check in a function because we want build time optimizations
 	// see https://github.com/vercel/next.js/issues/5354 for details
-	if (typeof window !== "undefined") return {};
+	if (typeof window !== "undefined") return null;
 
 	const client = createQueryClient();
 	await Promise.all(
@@ -266,5 +266,5 @@ export const fetchQuery = async (queries: QueryIdentifier[], authToken?: string
 			}
 		}),
 	);
-	return dehydrate(client);
+	return client;
 };
diff --git a/front/packages/models/src/resources/user.ts b/front/packages/models/src/resources/user.ts
index 90b7f049..ca70aad5 100644
--- a/front/packages/models/src/resources/user.ts
+++ b/front/packages/models/src/resources/user.ts
@@ -72,7 +72,7 @@ export const UserP = ResourceP("user")
 				z.string(),
 				z.object({
 					id: z.string(),
-					username: z.string().optional(),
+					username: z.string().nullable().default(""),
 					profileUrl: z.string().nullable(),
 				}),
 			)