Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-03 05:34:23 -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": "18.0.25",
"@types/react-dom": "18.0.9", "@types/react-dom": "18.0.9",
"copy-webpack-plugin": "^11.0.0", "copy-webpack-plugin": "^11.0.0",
"eslint": "^8.28.0", "eslint": "^8.30.0",
"eslint-config-next": "13.0.5", "eslint-config-next": "13.0.5",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"webpack": "^5.75.0" "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 NextApp, { AppContext, type AppProps } from "next/app";
import { createTheme, ThemeProvider as MTheme } from "@mui/material"; import { createTheme, ThemeProvider as MTheme } from "@mui/material";
import { Hydrate, QueryClientProvider } from "@tanstack/react-query"; 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 { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models";
import { useTheme, useMobileHover } from "yoshiki/web"; import { useTheme, useMobileHover } from "yoshiki/web";
import { useYoshiki } from "yoshiki/native";
import superjson from "superjson"; import superjson from "superjson";
import Head from "next/head"; import Head from "next/head";
import { withTranslations } from "../i18n"; import { withTranslations } from "../i18n";
@ -86,7 +92,7 @@ const GlobalCssTheme = () => {
const App = ({ Component, pageProps }: AppProps) => { const App = ({ Component, pageProps }: AppProps) => {
const [queryClient] = useState(() => createQueryClient()); const [queryClient] = useState(() => createQueryClient());
const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} }); 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(); useMobileHover();
@ -99,7 +105,7 @@ const App = ({ Component, pageProps }: AppProps) => {
<Hydrate state={queryState}> <Hydrate state={queryState}>
<ThemeSelector> <ThemeSelector>
<GlobalCssTheme /> <GlobalCssTheme />
{getLayout(<Component {...props} />)} <Layout page={<Component {...props} />} />
</ThemeSelector> </ThemeSelector>
</Hydrate> </Hydrate>
</QueryClientProvider> </QueryClientProvider>

2
front/package.json
View File

@ -23,7 +23,7 @@
"tsdoc": true "tsdoc": true
}, },
"devDependencies": { "devDependencies": {
"eslint": "8.28.0", "eslint": "8.30.0",
"eslint-config-next": "13.0.5", "eslint-config-next": "13.0.5",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-header": "^3.1.1", "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" : typeof window === "undefined"
? process.env.KYOO_URL ?? "http://localhost:5000" ? process.env.KYOO_URL ?? "http://localhost:5000"
: "/api"; : "/api";
if (!kyooUrl) console.error("Kyoo's url is not defined.") if (!kyooUrl) console.error("Kyoo's url is not defined.");
let resp; let resp;
try { try {
@ -108,7 +108,7 @@ export type QueryIdentifier<T = unknown> = {
export type QueryPage<Props = {}> = ComponentType<Props> & { export type QueryPage<Props = {}> = ComponentType<Props> & {
getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier[]; getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier[];
getLayout?: (page: ReactElement) => ReactNode; getLayout?: ({ page }: { page: ReactElement }) => JSX.Element;
}; };
const toQueryKey = <Data,>(query: QueryIdentifier<Data>) => { 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 { useYoshiki } from "yoshiki/native";
import { Main } from "@kyoo/primitives"; import { Main } from "@kyoo/primitives";
export const DefaultLayout = (page: ReactElement) => { export const DefaultLayout = ({ page }: { page: ReactElement }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
return ( return (
@ -43,7 +43,7 @@ export const DefaultLayout = (page: ReactElement) => {
}; };
DefaultLayout.getFetchUrls = () => [Navbar.query()]; DefaultLayout.getFetchUrls = () => [Navbar.query()];
export const TransparentLayout = (page: ReactElement) => { export const TransparentLayout = ({ page }: { page: ReactElement }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();
return ( return (