mirror of
https://github.com/antebudimir/feishin.git
synced 2026-03-02 12:17:25 +00:00
[enhancement]: Support react-router links in Modal (#586)
This commit is contained in:
parent
04b4d92f69
commit
d03a3a11eb
3 changed files with 198 additions and 147 deletions
|
|
@ -1,14 +1,12 @@
|
|||
import { lazy, Suspense } from 'react';
|
||||
import {
|
||||
Route,
|
||||
createRoutesFromElements,
|
||||
RouterProvider,
|
||||
createHashRouter,
|
||||
} from 'react-router-dom';
|
||||
import { Route, HashRouter, Routes } from 'react-router-dom';
|
||||
import { AppRoute } from './routes';
|
||||
import { DefaultLayout } from '/@/renderer/layouts';
|
||||
import { AppOutlet } from '/@/renderer/router/app-outlet';
|
||||
import { TitlebarOutlet } from '/@/renderer/router/titlebar-outlet';
|
||||
import { ModalsProvider } from '@mantine/modals';
|
||||
import { BaseContextModal } from '/@/renderer/components';
|
||||
import { AddToPlaylistContextModal } from '/@/renderer/features/playlists';
|
||||
|
||||
const NowPlayingRoute = lazy(
|
||||
() => import('/@/renderer/features/now-playing/routes/now-playing-route'),
|
||||
|
|
@ -67,137 +65,146 @@ const RouteErrorBoundary = lazy(
|
|||
);
|
||||
|
||||
export const AppRouter = () => {
|
||||
const router = createHashRouter(
|
||||
createRoutesFromElements(
|
||||
<>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route
|
||||
element={<AppOutlet />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
>
|
||||
<Route element={<DefaultLayout />}>
|
||||
<Route
|
||||
index
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
/>
|
||||
<Route
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.HOME}
|
||||
/>
|
||||
<Route
|
||||
element={<SearchRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SEARCH}
|
||||
/>
|
||||
<Route
|
||||
element={<SettingsRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SETTINGS}
|
||||
/>
|
||||
<Route
|
||||
element={<NowPlayingRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.NOW_PLAYING}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_GENRES}>
|
||||
const router = (
|
||||
<HashRouter future={{ v7_startTransition: true }}>
|
||||
<ModalsProvider
|
||||
modalProps={{
|
||||
centered: true,
|
||||
styles: {
|
||||
body: { position: 'relative' },
|
||||
content: { overflow: 'auto' },
|
||||
},
|
||||
transitionProps: {
|
||||
duration: 300,
|
||||
exitDuration: 300,
|
||||
transition: 'fade',
|
||||
},
|
||||
}}
|
||||
modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }}
|
||||
>
|
||||
<Routes>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route
|
||||
element={<AppOutlet />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
>
|
||||
<Route element={<DefaultLayout />}>
|
||||
<Route
|
||||
index
|
||||
element={<GenreListRoute />}
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_GENRES_ALBUMS}
|
||||
element={<HomeRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.HOME}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_GENRES_SONGS}
|
||||
element={<SearchRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SEARCH}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailSongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS}
|
||||
>
|
||||
<Route
|
||||
index
|
||||
element={<AlbumArtistListRoute />}
|
||||
element={<SettingsRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.SETTINGS}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
|
||||
<Route
|
||||
element={<NowPlayingRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.NOW_PLAYING}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_GENRES}>
|
||||
<Route
|
||||
index
|
||||
element={<AlbumArtistDetailRoute />}
|
||||
element={<GenreListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
|
||||
path={AppRoute.LIBRARY_GENRES_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistDetailTopSongsListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS}
|
||||
path={AppRoute.LIBRARY_GENRES_SONGS}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL}
|
||||
/>
|
||||
<Route
|
||||
element={<PlaylistDetailSongListRoute />}
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
errorElement={<RouteErrorBoundary />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS}
|
||||
>
|
||||
<Route
|
||||
index
|
||||
element={<AlbumArtistListRoute />}
|
||||
/>
|
||||
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
|
||||
<Route
|
||||
index
|
||||
element={<AlbumArtistDetailRoute />}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
|
||||
/>
|
||||
<Route
|
||||
element={<SongListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
|
||||
/>
|
||||
<Route
|
||||
element={<AlbumArtistDetailTopSongsListRoute />}
|
||||
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route
|
||||
element={<InvalidRoute />}
|
||||
path="*"
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<DefaultLayout shell />}>
|
||||
<Route
|
||||
element={<InvalidRoute />}
|
||||
path="*"
|
||||
element={<ActionRequiredRoute />}
|
||||
path={AppRoute.ACTION_REQUIRED}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
<Route element={<TitlebarOutlet />}>
|
||||
<Route element={<DefaultLayout shell />}>
|
||||
<Route
|
||||
element={<ActionRequiredRoute />}
|
||||
path={AppRoute.ACTION_REQUIRED}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
</>,
|
||||
),
|
||||
</Routes>
|
||||
</ModalsProvider>
|
||||
</HashRouter>
|
||||
);
|
||||
|
||||
return (
|
||||
<Suspense fallback={<></>}>
|
||||
<RouterProvider
|
||||
future={{ v7_startTransition: true }}
|
||||
router={router}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
return <Suspense fallback={<></>}>{router}</Suspense>;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue