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

Merge pull request #5167 from thornbill/fix-routing-crash

Browse source 
Fix stable app crash due to missing nav components
This commit is contained in:
Bill Thornton 2024-02-07 00:55:01 -05:00 • committed by GitHub
commit 0d63bdc052
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 43 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/RootAppRouter.tsx
View file

@ -29,6 +29,10 @@ export default function RootAppRouter({ history }: Readonly<{ history: 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 RootAppLayout() {
return (
<>

9
src/apps/experimental/routes/routes.tsx
View file

@ -2,7 +2,6 @@ import React from 'react';
import { RouteObject, redirect } from 'react-router-dom';
import { REDIRECTS } from 'apps/dashboard/routes/_redirects';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
import ConnectionRequired from 'components/ConnectionRequired';
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
@ -32,11 +31,5 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
},
/* Redirects for old paths */
...REDIRECTS.map(toRedirectRoute),
/* Ignore dashboard routes */
...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
path: `/${path}/*`,
element: null
}))
...REDIRECTS.map(toRedirectRoute)
];

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

@ -1,24 +1,12 @@
import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Outlet } 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 (
<>
<Backdrop />
<AppHeader isHidden={isNewLayoutPath} />
<AppBody>
<Outlet />
</AppBody>
</>
<AppBody>
<Outlet />
</AppBody>
);
}

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

@ -1,18 +1,42 @@
import { History } from '@remix-run/router';
import React from 'react';
import { RouterProvider, createHashRouter } from 'react-router-dom';
import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
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';
const router = createHashRouter([
...STABLE_APP_ROUTES,
...DASHBOARD_APP_ROUTES
]);
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 (
<>
<Backdrop />
<AppHeader isHidden={isNewLayoutPath} />
<Outlet />
</>
);
}

17
src/apps/stable/routes/routes.tsx
View file

@ -1,12 +1,13 @@
import { RouteObject, redirect } from 'react-router-dom';
import React from 'react';
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
import ConnectionRequired from 'components/ConnectionRequired';
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
import { toRedirectRoute } from 'components/router/Redirect';
import AppLayout from '../AppLayout';
import { REDIRECTS } from './_redirects';
import { ASYNC_USER_ROUTES } from './asyncRoutes';
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
@ -27,20 +28,10 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
/* Public routes */
{ index: true, loader: () => redirect('/home.html') },
...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
/* Suppress warnings for unhandled routes */
{ path: '*', element: null }
...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
]
},
/* Redirects for old paths */
...REDIRECTS.map(toRedirectRoute),
/* Ignore dashboard routes */
...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
path: `/${path}/*`,
element: null
}))
...REDIRECTS.map(toRedirectRoute)
];