Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-09 03:04:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix Yoshiki ssr mismatch

Browse Source
This commit is contained in:
Zoe Roux 2023-01-26 22:43:49 +09:00 committed by Zoe Roux
parent bc878a2e90
commit 91289c8588
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@ import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo
import { useState } from "react";
import NextApp, { AppContext, type AppProps } from "next/app";
import { Poppins } from "@next/font/google";
import { useTheme, useMobileHover } from "yoshiki/web";
import { useTheme, useMobileHover, useStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
import superjson from "superjson";
import Head from "next/head";
import { withTranslations } from "../i18n";
@ -80,6 +80,12 @@ const GlobalCssTheme = () => {
);
};
const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
if (typeof window === "undefined") return children;
const registry = useStyleRegistry();
return <StyleRegistryProvider registry={registry}>{children}</StyleRegistryProvider>;
};
const App = ({ Component, pageProps }: AppProps) => {
const [queryClient] = useState(() => createQueryClient());
const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} });
@ -90,19 +96,21 @@ const App = ({ Component, pageProps }: AppProps) => {
useMobileHover();
return (
<>
<Head>
<title>Kyoo</title>
</Head>
<QueryClientProvider client={queryClient}>
<Hydrate state={queryState}>
<ThemeSelector theme="auto" font={{ normal: "inherit" }}>
<GlobalCssTheme />
<Layout page={<Component {...props} />} {...layoutProps} />
</ThemeSelector>
</Hydrate>
</QueryClientProvider>
</>
<YoshikiDebug>
<>
<Head>
<title>Kyoo</title>
</Head>
<QueryClientProvider client={queryClient}>
<Hydrate state={queryState}>
<ThemeSelector theme="auto" font={{ normal: "inherit" }}>
<GlobalCssTheme />
<Layout page={<Component {...props} />} {...layoutProps} />
</ThemeSelector>
</Hydrate>
</QueryClientProvider>
</>
</YoshikiDebug>
);
};