From 7b8d916685fb7d03b81230b14d1dd3a17c203e74 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Tue, 20 Dec 2022 00:56:15 +0900
Subject: [PATCH] Fix layout handling on the web via hoc

---
 front/apps/web/package.json         |  2 +-
 front/apps/web/src/pages/_app.tsx   | 12 +++++++++---
 front/package.json                  |  2 +-
 front/packages/models/src/query.tsx |  4 ++--
 front/packages/ui/src/layout.tsx    |  4 ++--
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index ae1ecfbb..c14a62e1 100644
--- a/front/apps/web/package.json
+++ b/front/apps/web/package.json
@@ -51,7 +51,7 @@
 		"@types/react": "18.0.25",
 		"@types/react-dom": "18.0.9",
 		"copy-webpack-plugin": "^11.0.0",
-		"eslint": "^8.28.0",
+		"eslint": "^8.30.0",
 		"eslint-config-next": "13.0.5",
 		"typescript": "^4.9.3",
 		"webpack": "^5.75.0"
diff --git a/front/apps/web/src/pages/_app.tsx b/front/apps/web/src/pages/_app.tsx
index c6339b2f..cdabab4d 100755
--- a/front/apps/web/src/pages/_app.tsx
+++ b/front/apps/web/src/pages/_app.tsx
@@ -24,9 +24,15 @@ import { ReactNode, useState } from "react";
 import NextApp, { AppContext, type AppProps } from "next/app";
 import { createTheme, ThemeProvider as MTheme } from "@mui/material";
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
-import { HiddenIfNoJs, SkeletonCss, ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
+import {
+	HiddenIfNoJs,
+	SkeletonCss,
+	ThemeSelector as KThemeSelector,
+	WebTooltip,
+} from "@kyoo/primitives";
 import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models";
 import { useTheme, useMobileHover } from "yoshiki/web";
+import { useYoshiki } from "yoshiki/native";
 import superjson from "superjson";
 import Head from "next/head";
 import { withTranslations } from "../i18n";
@@ -86,7 +92,7 @@ const GlobalCssTheme = () => {
 const App = ({ Component, pageProps }: AppProps) => {
 	const [queryClient] = useState(() => createQueryClient());
 	const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} });
-	const getLayout = (Component as QueryPage).getLayout ?? ((page) => page);
+	const Layout = (Component as QueryPage).getLayout ?? (({ page }) => page);
 
 	useMobileHover();
 
@@ -99,7 +105,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 				<Hydrate state={queryState}>
 					<ThemeSelector>
 						<GlobalCssTheme />
-						{getLayout(<Component {...props} />)}
+						<Layout page={<Component {...props} />} />
 					</ThemeSelector>
 				</Hydrate>
 			</QueryClientProvider>
diff --git a/front/package.json b/front/package.json
index 3d29287f..871230ef 100644
--- a/front/package.json
+++ b/front/package.json
@@ -23,7 +23,7 @@
 		"tsdoc": true
 	},
 	"devDependencies": {
-		"eslint": "8.28.0",
+		"eslint": "8.30.0",
 		"eslint-config-next": "13.0.5",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-header": "^3.1.1",
diff --git a/front/packages/models/src/query.tsx b/front/packages/models/src/query.tsx
index fc44df47..8800d5b7 100644
--- a/front/packages/models/src/query.tsx
+++ b/front/packages/models/src/query.tsx
@@ -41,7 +41,7 @@ const queryFn = async <Data,>(
 			: typeof window === "undefined"
 			? process.env.KYOO_URL ?? "http://localhost:5000"
 			: "/api";
-	if (!kyooUrl) console.error("Kyoo's url is not defined.")
+	if (!kyooUrl) console.error("Kyoo's url is not defined.");
 
 	let resp;
 	try {
@@ -108,7 +108,7 @@ export type QueryIdentifier<T = unknown> = {
 
 export type QueryPage<Props = {}> = ComponentType<Props> & {
 	getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier[];
-	getLayout?: (page: ReactElement) => ReactNode;
+	getLayout?: ({ page }: { page: ReactElement }) => JSX.Element;
 };
 
 const toQueryKey = <Data,>(query: QueryIdentifier<Data>) => {
diff --git a/front/packages/ui/src/layout.tsx b/front/packages/ui/src/layout.tsx
index b2e6f4b1..f96f11eb 100644
--- a/front/packages/ui/src/layout.tsx
+++ b/front/packages/ui/src/layout.tsx
@@ -23,7 +23,7 @@ import { Navbar } from "./navbar";
 import { useYoshiki } from "yoshiki/native";
 import { Main } from "@kyoo/primitives";
 
-export const DefaultLayout = (page: ReactElement) => {
+export const DefaultLayout = ({ page }: { page: ReactElement }) => {
 	const { css } = useYoshiki();
 
 	return (
@@ -43,7 +43,7 @@ export const DefaultLayout = (page: ReactElement) => {
 };
 DefaultLayout.getFetchUrls = () => [Navbar.query()];
 
-export const TransparentLayout = (page: ReactElement) => {
+export const TransparentLayout = ({ page }: { page: ReactElement }) => {
 	const { css } = useYoshiki();
 
 	return (