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

feat: migrate experimental app to use react data router

Browse source
This commit is contained in:
Grady Hallenbeck 2023-10-06 20:26:00 -07:00
parent 06b991ddcf
commit 675f9625f2
8 changed files with 162 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/RootApp.tsx
View file

@ -4,42 +4,43 @@ import { History } from '@remix-run/router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';
import { useLocation } from 'react-router-dom';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
import AppHeader from 'components/AppHeader';
import Backdrop from 'components/Backdrop';
import { HistoryRouter } from 'components/router/HistoryRouter';
import { ApiProvider } from 'hooks/useApi';
import { WebConfigProvider } from 'hooks/useWebConfig';
import theme from 'themes/theme';
import { HistoryRouter } from 'components/router/HistoryRouter';
const DashboardApp = loadable(() => import('./apps/dashboard/App'));
const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
const StableApp = loadable(() => import('./apps/stable/App'));
const RootAppRouter = loadable(() => import('./RootAppRouter'));
const queryClient = new QueryClient();
const RootAppLayout = () => {
const RootAppLayout = ({ history }: { history: History }) => {
const layoutMode = localStorage.getItem('layout');
const isExperimentalLayout = layoutMode === 'experimental';
const location = useLocation();
const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
.some(path => location.pathname.startsWith(`/${path}`));
.some(path => window.location.pathname.startsWith(`/${path}`));
return (
<>
<Backdrop />
<AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
{
isExperimentalLayout ?
<ExperimentalApp /> :
{isExperimentalLayout ?
<RootAppRouter history={history} /> :
<HistoryRouter history={history}>
<StableApp />
</HistoryRouter>
}
<DashboardApp />
<HistoryRouter history={history}>
<DashboardApp />
</HistoryRouter>
</>
);
};
@ -49,9 +50,7 @@ const RootApp = ({ history }: { history: History }) => (
<ApiProvider>
<WebConfigProvider>
<ThemeProvider theme={theme}>
<HistoryRouter history={history}>
<RootAppLayout />
</HistoryRouter>
<RootAppLayout history={history} />
</ThemeProvider>
</WebConfigProvider>
</ApiProvider>