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 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 { WebConfigProvider } from 'hooks/useWebConfig';
import theme from 'themes/theme';
@ -17,37 +14,25 @@ const RootAppRouter = loadable(() => import('./RootAppRouter'));
const queryClient = new QueryClient();
const RootAppLayout = ({ history }: { history: History }) => {
const RootApp = ({ history }: Readonly<{ history: History }>) => {
const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental';
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => window.location.pathname.startsWith(`/${path}`));
return (
<>
<Backdrop />
<AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
{isExperimentalLayout ?
<RootAppRouter history={history} /> :
<StableAppRouter history={history} />
}
</>
<QueryClientProvider client={queryClient}>
<ApiProvider>
<WebConfigProvider>
<ThemeProvider theme={theme}>
{isExperimentalLayout ?
<RootAppRouter 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;

29
src/RootAppRouter.tsx
View file

@ -3,20 +3,39 @@ import { History } from '@remix-run/router';
import React from 'react';
import {
RouterProvider,
createHashRouter
createHashRouter,
Outlet
} from 'react-router-dom';
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/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 { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
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 });
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 { Outlet } from 'react-router-dom';
import { Outlet, useLocation } from 'react-router-dom';
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() {
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
return (
<AppBody>
<Outlet />
</AppBody>
<>
<Backdrop />
<AppHeader isHidden={isNewLayoutPath} />
<AppBody>
<Outlet />
</AppBody>
</>
);
}

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

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