mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

chore: clean up react app layouts

Browse source
This commit is contained in:
Grady Hallenbeck 2023-10-06 20:45:37 -07:00
parent 68b21bbb04
commit 48524332dc
4 changed files with 55 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/RootApp.tsx
View file

@ -5,9 +5,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react'; import React from 'react';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
import AppHeader from 'components/AppHeader';
import Backdrop from 'components/Backdrop';
import { ApiProvider } from 'hooks/useApi'; import { ApiProvider } from 'hooks/useApi';
import { WebConfigProvider } from 'hooks/useWebConfig'; import { WebConfigProvider } from 'hooks/useWebConfig';
import theme from 'themes/theme'; import theme from 'themes/theme';
@ -17,37 +14,25 @@ const RootAppRouter = loadable(() => import('./RootAppRouter'));
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const RootAppLayout = ({ history }: { history: History }) => { const RootApp = ({ history }: Readonly<{ history: History }>) => {
const layoutMode = localStorage.getItem('layout'); const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental'; const isExperimentalLayout = layoutMode === 'experimental';
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => window.location.pathname.startsWith(`/${path}`));
return ( return (
<> <QueryClientProvider client={queryClient}>
<Backdrop /> <ApiProvider>
<AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} /> <WebConfigProvider>
<ThemeProvider theme={theme}>
{isExperimentalLayout ? {isExperimentalLayout ?
<RootAppRouter history={history} /> : <RootAppRouter history={history} /> :
<StableAppRouter history={history} /> <StableAppRouter history={history} />
} }
</> </ThemeProvider>
</WebConfigProvider>
</ApiProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
); );
}; };
const RootApp = ({ history }: { history: History }) => (
<QueryClientProvider client={queryClient}>
<ApiProvider>
<WebConfigProvider>
<ThemeProvider theme={theme}>
<RootAppLayout history={history} />
</ThemeProvider>
</WebConfigProvider>
</ApiProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
export default RootApp; export default RootApp;

29
src/RootAppRouter.tsx
View file

@ -3,20 +3,39 @@ import { History } from '@remix-run/router';
import React from 'react'; import React from 'react';
import { import {
RouterProvider, RouterProvider,
createHashRouter createHashRouter,
Outlet
} from 'react-router-dom'; } from 'react-router-dom';
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes'; import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
import AppHeader from 'components/AppHeader';
import Backdrop from 'components/Backdrop';
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync'; import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
const router = createHashRouter([ const router = createHashRouter([
...EXPERIMENTAL_APP_ROUTES, {
...DASHBOARD_APP_ROUTES element: <RootAppLayout />,
children: [
...EXPERIMENTAL_APP_ROUTES,
...DASHBOARD_APP_ROUTES
]
}
]); ]);
export default function RootAppRouter({ history }: { history: History}) { export default function RootAppRouter({ history }: Readonly<{ history: History}>) {
useLegacyRouterSync({ router, history }); useLegacyRouterSync({ router, history });
return <RouterProvider router={router} />; return <RouterProvider router={router} />;
} }
function RootAppLayout() {
return (
<>
<Backdrop />
<AppHeader isHidden />
<Outlet />
</>
);
}

20
src/apps/stable/AppLayout.tsx
View file

@ -1,12 +1,24 @@
import React from 'react'; import React from 'react';
import { Outlet } from 'react-router-dom'; import { Outlet, useLocation } from 'react-router-dom';
import AppBody from 'components/AppBody'; import AppBody from 'components/AppBody';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
import Backdrop from 'components/Backdrop';
import AppHeader from 'components/AppHeader';
export default function AppLayout() { export default function AppLayout() {
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
return ( return (
<AppBody> <>
<Outlet /> <Backdrop />
</AppBody> <AppHeader isHidden={isNewLayoutPath} />
<AppBody>
<Outlet />
</AppBody>
</>
); );
} }

2
src/apps/stable/AppRouter.tsx
View file

@ -11,7 +11,7 @@ const router = createHashRouter([
...DASHBOARD_APP_ROUTES ...DASHBOARD_APP_ROUTES
]); ]);
export default function StableAppRouter({ history }: { history: History }) { export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
useLegacyRouterSync({ router, history }); useLegacyRouterSync({ router, history });
return <RouterProvider router={router} />; return <RouterProvider router={router} />;