mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #4834 from grhallenbeck/dev-react-router
Migrate React Router to React Data Router pattern
This commit is contained in:
commit
35429ca61f
17 changed files with 346 additions and 302 deletions
|
@ -1,66 +0,0 @@
|
|||
import loadable from '@loadable/component';
|
||||
import React from 'react';
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
|
||||
import ConnectionRequired from 'components/ConnectionRequired';
|
||||
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
||||
import { AsyncPageProps, AsyncRoute, toAsyncPageRoute } from 'components/router/AsyncRoute';
|
||||
import { toRedirectRoute } from 'components/router/Redirect';
|
||||
import ServerContentPage from 'components/ServerContentPage';
|
||||
|
||||
import AppLayout from './AppLayout';
|
||||
import { REDIRECTS } from './routes/_redirects';
|
||||
import { ASYNC_ADMIN_ROUTES } from './routes/_asyncRoutes';
|
||||
import { LEGACY_ADMIN_ROUTES } from './routes/_legacyRoutes';
|
||||
|
||||
const DashboardAsyncPage = loadable(
|
||||
(props: { page: string }) => import(/* webpackChunkName: "[request]" */ `./routes/${props.page}`),
|
||||
{ cacheKey: (props: AsyncPageProps) => props.page }
|
||||
);
|
||||
|
||||
const toDashboardAsyncPageRoute = (route: AsyncRoute) => (
|
||||
toAsyncPageRoute({
|
||||
...route,
|
||||
element: DashboardAsyncPage
|
||||
})
|
||||
);
|
||||
|
||||
export const DASHBOARD_APP_PATHS = {
|
||||
Dashboard: 'dashboard',
|
||||
MetadataManager: 'metadata',
|
||||
PluginConfig: 'configurationpage'
|
||||
};
|
||||
|
||||
const DashboardApp = () => (
|
||||
<Routes>
|
||||
<Route element={<ConnectionRequired isAdminRequired />}>
|
||||
<Route element={<AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />}>
|
||||
<Route path={DASHBOARD_APP_PATHS.Dashboard}>
|
||||
{ASYNC_ADMIN_ROUTES.map(toDashboardAsyncPageRoute)}
|
||||
{LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)}
|
||||
</Route>
|
||||
|
||||
{/* NOTE: The metadata editor might deserve a dedicated app in the future */}
|
||||
{toViewManagerPageRoute({
|
||||
path: DASHBOARD_APP_PATHS.MetadataManager,
|
||||
pageProps: {
|
||||
controller: 'edititemmetadata',
|
||||
view: 'edititemmetadata.html'
|
||||
}
|
||||
})}
|
||||
|
||||
<Route path={DASHBOARD_APP_PATHS.PluginConfig} element={
|
||||
<ServerContentPage view='/web/configurationpage' />
|
||||
} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Suppress warnings for unhandled routes */}
|
||||
<Route path='*' element={null} />
|
||||
|
||||
{/* Redirects for old paths */}
|
||||
{REDIRECTS.map(toRedirectRoute)}
|
||||
</Routes>
|
||||
);
|
||||
|
||||
export default DashboardApp;
|
|
@ -1,12 +1,12 @@
|
|||
import type { AsyncRoute } from 'components/router/AsyncRoute';
|
||||
import { AsyncRouteType, type AsyncRoute } from 'components/router/AsyncRoute';
|
||||
|
||||
export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
|
||||
{ path: 'activity' },
|
||||
{ path: 'notifications' },
|
||||
{ path: 'users' },
|
||||
{ path: 'users/access' },
|
||||
{ path: 'users/add' },
|
||||
{ path: 'users/parentalcontrol' },
|
||||
{ path: 'users/password' },
|
||||
{ path: 'users/profile' }
|
||||
{ path: 'activity', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'notifications', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/access', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/add', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/parentalcontrol', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/password', type: AsyncRouteType.Dashboard },
|
||||
{ path: 'users/profile', type: AsyncRouteType.Dashboard }
|
||||
];
|
||||
|
|
49
src/apps/dashboard/routes/routes.tsx
Normal file
49
src/apps/dashboard/routes/routes.tsx
Normal file
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
import { RouteObject } from 'react-router-dom';
|
||||
import AppLayout from '../AppLayout';
|
||||
import ConnectionRequired from 'components/ConnectionRequired';
|
||||
import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
|
||||
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
|
||||
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
||||
import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
|
||||
import ServerContentPage from 'components/ServerContentPage';
|
||||
|
||||
export const DASHBOARD_APP_PATHS = {
|
||||
Dashboard: 'dashboard',
|
||||
MetadataManager: 'metadata',
|
||||
PluginConfig: 'configurationpage'
|
||||
};
|
||||
|
||||
export const DASHBOARD_APP_ROUTES: RouteObject[] = [
|
||||
{
|
||||
element: <ConnectionRequired isAdminRequired />,
|
||||
children: [
|
||||
{
|
||||
element: <AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />,
|
||||
children: [
|
||||
{
|
||||
path: DASHBOARD_APP_PATHS.Dashboard,
|
||||
children: [
|
||||
...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
|
||||
...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
|
||||
]
|
||||
},
|
||||
|
||||
/* NOTE: The metadata editor might deserve a dedicated app in the future */
|
||||
toViewManagerPageRoute({
|
||||
path: DASHBOARD_APP_PATHS.MetadataManager,
|
||||
pageProps: {
|
||||
controller: 'edititemmetadata',
|
||||
view: 'edititemmetadata.html'
|
||||
}
|
||||
}),
|
||||
|
||||
{
|
||||
path: DASHBOARD_APP_PATHS.PluginConfig,
|
||||
element: <ServerContentPage view='/web/configurationpage' />
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
|
@ -1,48 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
|
||||
import { REDIRECTS } from 'apps/stable/routes/_redirects';
|
||||
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 { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
|
||||
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
|
||||
|
||||
const ExperimentalApp = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path='/*' element={<AppLayout />}>
|
||||
{/* User routes */}
|
||||
<Route element={<ConnectionRequired />}>
|
||||
{ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
|
||||
{LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
|
||||
</Route>
|
||||
|
||||
{/* Public routes */}
|
||||
<Route element={<ConnectionRequired isUserRequired={false} />}>
|
||||
<Route index element={<Navigate replace to='/home.html' />} />
|
||||
|
||||
{LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Redirects for old paths */}
|
||||
{REDIRECTS.map(toRedirectRoute)}
|
||||
|
||||
{/* Ignore dashboard routes */}
|
||||
{Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
|
||||
<Route
|
||||
key={key}
|
||||
path={`/${path}/*`}
|
||||
element={null}
|
||||
/>
|
||||
))}
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExperimentalApp;
|
42
src/apps/experimental/routes/routes.tsx
Normal file
42
src/apps/experimental/routes/routes.tsx
Normal file
|
@ -0,0 +1,42 @@
|
|||
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';
|
||||
import { toRedirectRoute } from 'components/router/Redirect';
|
||||
import AppLayout from '../AppLayout';
|
||||
import { ASYNC_USER_ROUTES } from './asyncRoutes';
|
||||
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
|
||||
|
||||
export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
|
||||
{
|
||||
path: '/*',
|
||||
element: <AppLayout />,
|
||||
children: [
|
||||
{
|
||||
/* User routes: Any child route of this layout is authenticated */
|
||||
element: <ConnectionRequired isUserRequired />,
|
||||
children: [
|
||||
...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
|
||||
...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
|
||||
]
|
||||
},
|
||||
|
||||
/* Public routes */
|
||||
{ index: true, loader: () => redirect('/home.html') },
|
||||
...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
|
||||
}))
|
||||
];
|
|
@ -1,55 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import { DASHBOARD_APP_PATHS } from 'apps/dashboard/App';
|
||||
import AppBody from 'components/AppBody';
|
||||
import ConnectionRequired from 'components/ConnectionRequired';
|
||||
import { toAsyncPageRoute } from 'components/router/AsyncRoute';
|
||||
import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
|
||||
import { toRedirectRoute } from 'components/router/Redirect';
|
||||
|
||||
import { ASYNC_USER_ROUTES } from './routes/asyncRoutes';
|
||||
import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './routes/legacyRoutes';
|
||||
import { REDIRECTS } from './routes/_redirects';
|
||||
|
||||
const Layout = () => (
|
||||
<AppBody>
|
||||
<Outlet />
|
||||
</AppBody>
|
||||
);
|
||||
|
||||
const StableApp = () => (
|
||||
<Routes>
|
||||
<Route element={<Layout />}>
|
||||
{/* User routes */}
|
||||
<Route path='/' element={<ConnectionRequired />}>
|
||||
{ASYNC_USER_ROUTES.map(toAsyncPageRoute)}
|
||||
{LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
|
||||
</Route>
|
||||
|
||||
{/* Public routes */}
|
||||
<Route path='/' element={<ConnectionRequired isUserRequired={false} />}>
|
||||
<Route index element={<Navigate replace to='/home.html' />} />
|
||||
|
||||
{LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
|
||||
</Route>
|
||||
|
||||
{/* Suppress warnings for unhandled routes */}
|
||||
<Route path='*' element={null} />
|
||||
</Route>
|
||||
|
||||
{/* Redirects for old paths */}
|
||||
{REDIRECTS.map(toRedirectRoute)}
|
||||
|
||||
{/* Ignore dashboard routes */}
|
||||
{Object.entries(DASHBOARD_APP_PATHS).map(([ key, path ]) => (
|
||||
<Route
|
||||
key={key}
|
||||
path={`/${path}/*`}
|
||||
element={null}
|
||||
/>
|
||||
))}
|
||||
</Routes>
|
||||
);
|
||||
|
||||
export default StableApp;
|
24
src/apps/stable/AppLayout.tsx
Normal file
24
src/apps/stable/AppLayout.tsx
Normal file
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
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 (
|
||||
<>
|
||||
<Backdrop />
|
||||
<AppHeader isHidden={isNewLayoutPath} />
|
||||
|
||||
<AppBody>
|
||||
<Outlet />
|
||||
</AppBody>
|
||||
</>
|
||||
);
|
||||
}
|
18
src/apps/stable/AppRouter.tsx
Normal file
18
src/apps/stable/AppRouter.tsx
Normal file
|
@ -0,0 +1,18 @@
|
|||
import { History } from '@remix-run/router';
|
||||
import React from 'react';
|
||||
import { RouterProvider, createHashRouter } 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';
|
||||
|
||||
const router = createHashRouter([
|
||||
...STABLE_APP_ROUTES,
|
||||
...DASHBOARD_APP_ROUTES
|
||||
]);
|
||||
|
||||
export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
|
||||
useLegacyRouterSync({ router, history });
|
||||
|
||||
return <RouterProvider router={router} />;
|
||||
}
|
46
src/apps/stable/routes/routes.tsx
Normal file
46
src/apps/stable/routes/routes.tsx
Normal file
|
@ -0,0 +1,46 @@
|
|||
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';
|
||||
|
||||
export const STABLE_APP_ROUTES: RouteObject[] = [
|
||||
{
|
||||
path: '/*',
|
||||
element: <AppLayout />,
|
||||
children: [
|
||||
{
|
||||
/* User routes */
|
||||
element: <ConnectionRequired isUserRequired />,
|
||||
children: [
|
||||
...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
|
||||
...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
|
||||
]
|
||||
},
|
||||
|
||||
/* Public routes */
|
||||
{ index: true, loader: () => redirect('/home.html') },
|
||||
...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
|
||||
|
||||
/* Suppress warnings for unhandled routes */
|
||||
{ path: '*', element: null }
|
||||
]
|
||||
},
|
||||
|
||||
/* Redirects for old paths */
|
||||
...REDIRECTS.map(toRedirectRoute),
|
||||
|
||||
/* Ignore dashboard routes */
|
||||
...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
|
||||
path: `/${path}/*`,
|
||||
element: null
|
||||
}))
|
||||
|
||||
];
|
Loading…
Add table
Add a link
Reference in a new issue