Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix layout handling on the web via hoc

Browse Source
This commit is contained in:
Zoe Roux 2022-12-20 00:56:15 +09:00
parent 3c447f5708
commit 7b8d916685
5 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/apps/web/package.json
View File

@ -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"

12
front/apps/web/src/pages/_app.tsx
View File

@ -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>

2
front/package.json
View File

@ -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",

4
front/packages/models/src/query.tsx
View File

@ -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>) => {

4
front/packages/ui/src/layout.tsx
View File

@ -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 (