adjust network request waterfall to force authentication first, add fallback for no network (#1028)

This commit is contained in:
jeffvli
2025-12-14 16:00:05 -08:00
parent 303eba87ca
commit 09dfc1ff1d
10 changed files with 336 additions and 129 deletions
+1 -14
View File
@@ -1,16 +1,11 @@
import { useMemo } from 'react';
import { Navigate, Outlet } from 'react-router';
import { useServerAuthenticated } from '/@/renderer/hooks/use-server-authenticated';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { Center } from '/@/shared/components/center/center';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { AuthState } from '/@/shared/types/types';
export const AppOutlet = () => {
const currentServer = useCurrentServer();
const authState = useServerAuthenticated();
const isActionsRequired = useMemo(() => {
const isServerRequired = !currentServer;
@@ -21,15 +16,7 @@ export const AppOutlet = () => {
return isActionRequired;
}, [currentServer]);
if (authState === AuthState.LOADING) {
return (
<Center h="100vh" w="100%">
<Spinner container />
</Center>
);
}
if (isActionsRequired || authState === AuthState.INVALID) {
if (isActionsRequired) {
return <Navigate replace to={AppRoute.ACTION_REQUIRED} />;
}
+85 -69
View File
@@ -8,6 +8,7 @@ import { UpdatePlaylistContextModal } from '/@/renderer/features/playlists/compo
import { SettingsContextModal } from '/@/renderer/features/settings/components/settings-modal';
import { RouterErrorBoundary } from '/@/renderer/features/shared/components/router-error-boundary';
import { ShareItemContextModal } from '/@/renderer/features/sharing/components/share-item-context-modal';
import { AuthenticationOutlet } from '/@/renderer/layouts/authentication-outlet';
import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
import { AppOutlet } from '/@/renderer/router/app-outlet';
import { AppRoute } from '/@/renderer/router/routes';
@@ -40,6 +41,10 @@ const InvalidRoute = lazy(
const LoginRoute = lazy(() => import('/@/renderer/features/login/routes/login-route'));
const NoNetworkRoute = lazy(
() => import('/@/renderer/features/action-required/routes/no-network-route'),
);
const HomeRoute = lazy(() => import('/@/renderer/features/home/routes/home-route'));
const ArtistListRoute = lazy(() => import('/@/renderer/features/artists/routes/artist-list-route'));
@@ -96,96 +101,106 @@ export const AppRouter = () => {
>
<RouterErrorBoundary>
<Routes>
<Route element={<TitlebarOutlet />}>
<Route element={<AppOutlet />}>
<Route element={<ResponsiveLayout />}>
<Route element={<HomeRoute />} index />
<Route element={<HomeRoute />} path={AppRoute.HOME} />
<Route element={<SearchRoute />} path={AppRoute.SEARCH} />
<Route element={<FavoritesRoute />} path={AppRoute.FAVORITES} />
<Route element={<SettingsRoute />} path={AppRoute.SETTINGS} />
<Route
element={<NowPlayingRoute />}
path={AppRoute.NOW_PLAYING}
/>
<Route path={AppRoute.LIBRARY_GENRES}>
<Route element={<GenreListRoute />} index />
<Route element={<AuthenticationOutlet />}>
<Route element={<TitlebarOutlet />}>
<Route element={<AppOutlet />}>
<Route element={<ResponsiveLayout />}>
<Route element={<HomeRoute />} index />
<Route element={<HomeRoute />} path={AppRoute.HOME} />
<Route element={<SearchRoute />} path={AppRoute.SEARCH} />
<Route
element={<GenreDetailRoute />}
path={AppRoute.LIBRARY_GENRES_DETAIL}
element={<FavoritesRoute />}
path={AppRoute.FAVORITES}
/>
</Route>
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_ALBUMS}
/>
<Route
element={<AlbumDetailRoute />}
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
/>
<Route
element={<ArtistListRoute />}
path={AppRoute.LIBRARY_ARTISTS}
/>
<Route path={AppRoute.LIBRARY_ARTISTS_DETAIL}>
<Route element={<AlbumArtistDetailRoute />} index />
<Route
element={<SettingsRoute />}
path={AppRoute.SETTINGS}
/>
<Route
element={<NowPlayingRoute />}
path={AppRoute.NOW_PLAYING}
/>
<Route path={AppRoute.LIBRARY_GENRES}>
<Route element={<GenreListRoute />} index />
<Route
element={<GenreDetailRoute />}
path={AppRoute.LIBRARY_GENRES_DETAIL}
/>
</Route>
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY}
path={AppRoute.LIBRARY_ALBUMS}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS}
element={<AlbumDetailRoute />}
path={AppRoute.LIBRARY_ALBUMS_DETAIL}
/>
<Route
element={<AlbumArtistDetailTopSongsListRoute />}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS}
element={<ArtistListRoute />}
path={AppRoute.LIBRARY_ARTISTS}
/>
</Route>
<Route
element={<DummyAlbumDetailRoute />}
path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_SONGS}
/>
<Route
element={<FolderListRoute />}
path={AppRoute.LIBRARY_FOLDERS}
/>
<Route
element={<PlaylistListRoute />}
path={AppRoute.PLAYLISTS}
/>
<Route element={<RadioListRoute />} path={AppRoute.RADIO} />
<Route
element={<PlaylistDetailSongListRoute />}
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
/>
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS}>
<Route element={<AlbumArtistListRoute />} index />
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
<Route path={AppRoute.LIBRARY_ARTISTS_DETAIL}>
<Route element={<AlbumArtistDetailRoute />} index />
<Route
element={<AlbumListRoute />}
path={
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY
}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_DISCOGRAPHY}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_SONGS}
/>
<Route
element={<AlbumArtistDetailTopSongsListRoute />}
path={
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS
}
path={AppRoute.LIBRARY_ARTISTS_DETAIL_TOP_SONGS}
/>
</Route>
<Route
element={<DummyAlbumDetailRoute />}
path={AppRoute.FAKE_LIBRARY_ALBUM_DETAILS}
/>
<Route
element={<SongListRoute />}
path={AppRoute.LIBRARY_SONGS}
/>
<Route
element={<FolderListRoute />}
path={AppRoute.LIBRARY_FOLDERS}
/>
<Route
element={<PlaylistListRoute />}
path={AppRoute.PLAYLISTS}
/>
<Route element={<RadioListRoute />} path={AppRoute.RADIO} />
<Route
element={<PlaylistDetailSongListRoute />}
path={AppRoute.PLAYLISTS_DETAIL_SONGS}
/>
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS}>
<Route element={<AlbumArtistListRoute />} index />
<Route path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL}>
<Route element={<AlbumArtistDetailRoute />} index />
<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 element={<InvalidRoute />} path="*" />
</Route>
</Route>
</Route>
@@ -196,6 +211,7 @@ export const AppRouter = () => {
path={AppRoute.ACTION_REQUIRED}
/>
<Route element={<LoginRoute />} path={AppRoute.LOGIN} />
<Route element={<NoNetworkRoute />} path={AppRoute.NO_NETWORK} />
</Route>
</Route>
</Routes>
+1
View File
@@ -21,6 +21,7 @@ export enum AppRoute {
LIBRARY_GENRES_DETAIL = '/library/genres/:genreId',
LIBRARY_SONGS = '/library/songs',
LOGIN = '/login',
NO_NETWORK = '/no-network',
NOW_PLAYING = '/now-playing',
PLAYING = '/playing',
PLAYLISTS = '/playlists',