[enhancement]: Support react-router links in Modal (#586)

This commit is contained in:
Kendall Garner 2024-04-17 14:29:46 +00:00 committed by GitHub
parent 04b4d92f69
commit d03a3a11eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 198 additions and 147 deletions

View file

@ -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>;
};