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

Unify app routers

This commit is contained in:
Bill Thornton 2024-07-24 14:59:16 -04:00
parent b6844e61e2
commit 3235e2e594
4 changed files with 18 additions and 58 deletions

View file

@ -1,4 +1,3 @@
import loadable from '@loadable/component';
import { History } from '@remix-run/router'; import { History } from '@remix-run/router';
import { QueryClientProvider } from '@tanstack/react-query'; import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@ -8,21 +7,14 @@ import { ApiProvider } from 'hooks/useApi';
import { WebConfigProvider } from 'hooks/useWebConfig'; import { WebConfigProvider } from 'hooks/useWebConfig';
import { queryClient } from 'utils/query/queryClient'; import { queryClient } from 'utils/query/queryClient';
const StableAppRouter = loadable(() => import('./apps/stable/AppRouter')); import RootAppRouter from './RootAppRouter';
const RootAppRouter = loadable(() => import('./RootAppRouter'));
const RootApp = ({ history }: Readonly<{ history: History }>) => { const RootApp = ({ history }: Readonly<{ history: History }>) => {
const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental';
return ( return (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ApiProvider> <ApiProvider>
<WebConfigProvider> <WebConfigProvider>
{isExperimentalLayout ? <RootAppRouter history={history} />
<RootAppRouter history={history} /> :
<StableAppRouter history={history} />
}
</WebConfigProvider> </WebConfigProvider>
</ApiProvider> </ApiProvider>
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />

View file

@ -4,21 +4,26 @@ import React from 'react';
import { import {
RouterProvider, RouterProvider,
createHashRouter, createHashRouter,
Outlet Outlet,
useLocation
} from 'react-router-dom'; } from 'react-router-dom';
import { DASHBOARD_APP_PATHS, 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 { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
import AppHeader from 'components/AppHeader'; import AppHeader from 'components/AppHeader';
import Backdrop from 'components/Backdrop'; import Backdrop from 'components/Backdrop';
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync'; import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
import UserThemeProvider from 'themes/UserThemeProvider'; import UserThemeProvider from 'themes/UserThemeProvider';
const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental';
const router = createHashRouter([ const router = createHashRouter([
{ {
element: <RootAppLayout />, element: <RootAppLayout />,
children: [ children: [
...EXPERIMENTAL_APP_ROUTES, ...(isExperimentalLayout ? EXPERIMENTAL_APP_ROUTES : STABLE_APP_ROUTES),
...DASHBOARD_APP_ROUTES ...DASHBOARD_APP_ROUTES
] ]
} }
@ -35,10 +40,14 @@ export default function RootAppRouter({ history }: Readonly<{ history: History}>
* NOTE: The app will crash if these get removed from the DOM. * NOTE: The app will crash if these get removed from the DOM.
*/ */
function RootAppLayout() { function RootAppLayout() {
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
return ( return (
<UserThemeProvider> <UserThemeProvider>
<Backdrop /> <Backdrop />
<AppHeader isHidden /> <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
<Outlet /> <Outlet />
</UserThemeProvider> </UserThemeProvider>

View file

@ -6,11 +6,13 @@ import ConnectionRequired from 'components/ConnectionRequired';
import { toAsyncPageRoute } from 'components/router/AsyncRoute'; import { toAsyncPageRoute } from 'components/router/AsyncRoute';
import { toViewManagerPageRoute } from 'components/router/LegacyRoute'; import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
import { toRedirectRoute } from 'components/router/Redirect'; import { toRedirectRoute } from 'components/router/Redirect';
import AppLayout from '../AppLayout';
import { ASYNC_USER_ROUTES } from './asyncRoutes'; import { ASYNC_USER_ROUTES } from './asyncRoutes';
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes'; import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
import VideoPage from './video'; import VideoPage from './video';
import loadable from '@loadable/component';
const AppLayout = loadable(() => import('../AppLayout'));
export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
{ {

View file

@ -1,43 +0,0 @@
import { History } from '@remix-run/router';
import React from 'react';
import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
import { STABLE_APP_ROUTES } from './routes/routes';
import Backdrop from 'components/Backdrop';
import AppHeader from 'components/AppHeader';
import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
import UserThemeProvider from 'themes/UserThemeProvider';
const router = createHashRouter([{
element: <StableAppLayout />,
children: [
...STABLE_APP_ROUTES,
...DASHBOARD_APP_ROUTES
]
}]);
export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
useLegacyRouterSync({ router, history });
return <RouterProvider router={router} />;
}
/**
* Layout component that renders legacy components required on all pages.
* NOTE: The app will crash if these get removed from the DOM.
*/
function StableAppLayout() {
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
return (
<UserThemeProvider>
<Backdrop />
<AppHeader isHidden={isNewLayoutPath} />
<Outlet />
</UserThemeProvider>
);
}