vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 13:00:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace loadable component with native lazy

Browse Source
This commit is contained in:
jeffvli
2022-12-09 17:29:52 -08:00
parent e32ade3b54
commit 06cb95ef97
12 changed files with 128 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/renderer/src/features/action-required/index.ts
-2
View File
@@ -1,3 +1 @@
export * from './routes/action-required-route';
export * from './routes/invalid-route';
export * from './components/error-fallback';
packages/renderer/src/features/action-required/routes/action-required-route.tsx
+3 -1
View File
@@ -13,7 +13,7 @@ import { AppRoute } from '/@/router/routes';
import { useCurrentServer } from '/@/store';
import { localSettings } from '#preload';
export const ActionRequiredRoute = () => {
const ActionRequiredRoute = () => {
const currentServer = useCurrentServer();
const [isMpvRequired, setIsMpvRequired] = useState(false);
const isServerRequired = !currentServer;
@@ -94,3 +94,5 @@ export const ActionRequiredRoute = () => {
</AnimatedPage>
);
};
export default ActionRequiredRoute;
packages/renderer/src/features/action-required/routes/invalid-route.tsx
+3 -1
View File
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { Button, Text } from '/@/components';
import { AnimatedPage } from '/@/features/shared';
export const InvalidRoute = () => {
const InvalidRoute = () => {
const navigate = useNavigate();
const location = useLocation();
@@ -34,3 +34,5 @@ export const InvalidRoute = () => {
</AnimatedPage>
);
};
export default InvalidRoute;
packages/renderer/src/features/albums/index.ts
-1
View File
@@ -1,3 +1,2 @@
export * from './queries/album-detail-query';
export * from './queries/album-list-query';
export * from './routes/album-list-route';
packages/renderer/src/features/albums/routes/album-list-route.tsx
+3 -31
View File
@@ -32,37 +32,7 @@ import { NDAlbumListSort } from '/@/api/navidrome.types';
import { controller } from '/@/api/controller';
import { ndNormalize } from '/@/api/navidrome.api';
const FILTERS = {
jellyfin: [
{ name: 'Album Artist', value: JFAlbumListSort.NAME },
{ name: 'Community Rating', value: JFAlbumListSort.RATING },
{ name: 'Critic Rating', value: JFAlbumListSort.CRITIC_RATING },
{ name: 'Name', value: JFAlbumListSort.NAME },
{ name: 'Random', value: JFAlbumListSort.RANDOM },
{ name: 'Recently Added', value: JFAlbumListSort.RECENTLY_ADDED },
{ name: 'Release Date', value: JFAlbumListSort.RELEASE_DATE },
],
navidrome: [
{ name: 'Album Artist', value: NDAlbumListSort.ALBUM_ARTIST },
{ name: 'Artist', value: NDAlbumListSort.ARTIST },
{ name: 'Duration', value: NDAlbumListSort.DURATION },
{ name: 'Name', value: NDAlbumListSort.NAME },
{ name: 'Play Count', value: NDAlbumListSort.PLAY_COUNT },
{ name: 'Random', value: NDAlbumListSort.RANDOM },
{ name: 'Rating', value: NDAlbumListSort.RATING },
{ name: 'Recently Added', value: NDAlbumListSort.RECENTLY_ADDED },
{ name: 'Song Count', value: NDAlbumListSort.SONG_COUNT },
{ name: 'Starred', value: NDAlbumListSort.STARRED },
{ name: 'Year', value: NDAlbumListSort.YEAR },
],
};
const ORDER = [
{ name: 'Ascending', value: SortOrder.ASC },
{ name: 'Descending', value: SortOrder.DESC },
];
export const AlbumListRoute = () => {
const AlbumListRoute = () => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const { setPage } = useAppStoreActions();
@@ -465,3 +435,5 @@ export const AlbumListRoute = () => {
</AnimatedPage>
);
};
export default AlbumListRoute;
packages/renderer/src/features/dashboard/routes/DashboardRoute.tsx
+3 -1
View File
@@ -1,3 +1,5 @@
export const DashboardRoute = () => {
const DashboardRoute = () => {
return <></>;
};
export default DashboardRoute;
packages/renderer/src/features/now-playing/index.ts
-1
View File
@@ -1,2 +1 @@
export * from './routes/now-playing-route';
export * from './components/play-queue';
packages/renderer/src/features/now-playing/routes/now-playing-route.tsx
+6 -7
View File
@@ -1,7 +1,6 @@
import { Box } from '@mantine/core';
import styled from 'styled-components';
import { PlayQueue } from '/@/features/now-playing/components/play-queue';
import { AnimatedPage } from '/@/features/shared';
const QueueContainer = styled(Box)`
position: relative;
@@ -9,12 +8,12 @@ const QueueContainer = styled(Box)`
height: 100%;
`;
export const NowPlayingRoute = () => {
const NowPlayingRoute = () => {
return (
<AnimatedPage>
<QueueContainer>
<PlayQueue type="nowPlaying" />
</QueueContainer>
</AnimatedPage>
<QueueContainer>
<PlayQueue type="nowPlaying" />
</QueueContainer>
);
};
export default NowPlayingRoute;
packages/renderer/src/router/app-router.tsx
+54 -53
View File
@@ -1,79 +1,80 @@
import loadable from '@loadable/component';
import { lazy, Suspense } from 'react';
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider,
createHashRouter,
} from 'react-router-dom';
import { DefaultLayout } from '/@/layouts';
import { AppOutlet } from '/@/router/app-outlet';
import { AppRoute } from './routes';
import { RouteErrorBoundary } from '/@/features/action-required';
import { TitlebarOutlet } from '/@/router/titlebar-outlet';
const DashboardRoute = loadable(() => import('/@/features/dashboard'), {
resolveComponent: (components) => components.DashboardRoute,
});
const DashboardRoute = lazy(() => import('/@/features/dashboard/routes/DashboardRoute'));
const NowPlayingRoute = loadable(() => import('/@/features/now-playing'), {
resolveComponent: (components) => components.NowPlayingRoute,
});
const NowPlayingRoute = lazy(() => import('/@/features/now-playing/routes/now-playing-route'));
const AlbumListRoute = loadable(() => import('/@/features/albums'), {
resolveComponent: (components) => components.AlbumListRoute,
});
const AlbumListRoute = lazy(() => import('/@/features/albums/routes/album-list-route'));
const ActionRequiredRoute = loadable(() => import('/@/features/action-required'), {
resolveComponent: (components) => components.ActionRequiredRoute,
});
const ActionRequiredRoute = lazy(
() => import('/@/features/action-required/routes/action-required-route'),
);
const InvalidRoute = loadable(() => import('/@/features/action-required'), {
resolveComponent: (components) => components.InvalidRoute,
});
const InvalidRoute = lazy(() => import('/@/features/action-required/routes/invalid-route'));
export const AppRouter = () => {
const router = createBrowserRouter(
const router = createHashRouter(
createRoutesFromElements(
<>
<Route
element={<AppOutlet />}
errorElement={<RouteErrorBoundary />}
>
<Route element={<DefaultLayout />}>
<Route
index
element={<DashboardRoute />}
/>
<Route
element={<DashboardRoute />}
path={AppRoute.HOME}
/>
<Route
element={<NowPlayingRoute />}
path={AppRoute.NOW_PLAYING}
/>
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_ALBUMS}
/>
<Route
element={<></>}
path={AppRoute.LIBRARY_ARTISTS}
/>
<Route
element={<InvalidRoute />}
path="*"
/>
<Route element={<TitlebarOutlet />}>
<Route
element={<AppOutlet />}
errorElement={<RouteErrorBoundary />}
>
<Route element={<DefaultLayout />}>
<Route
index
element={<DashboardRoute />}
/>
<Route
element={<DashboardRoute />}
path={AppRoute.HOME}
/>
<Route
element={<NowPlayingRoute />}
path={AppRoute.NOW_PLAYING}
/>
<Route
element={<AlbumListRoute />}
path={AppRoute.LIBRARY_ALBUMS}
/>
<Route
element={<></>}
path={AppRoute.LIBRARY_ARTISTS}
/>
<Route
element={<InvalidRoute />}
path="*"
/>
</Route>
</Route>
</Route>
<Route element={<DefaultLayout shell />}>
<Route
element={<ActionRequiredRoute />}
path={AppRoute.ACTION_REQUIRED}
/>
<Route element={<TitlebarOutlet />}>
<Route element={<DefaultLayout shell />}>
<Route
element={<ActionRequiredRoute />}
path={AppRoute.ACTION_REQUIRED}
/>
</Route>
</Route>
</>,
),
);
return <RouterProvider router={router} />;
return (
<Suspense fallback={<></>}>
<RouterProvider router={router} />
</Suspense>
);
};
packages/renderer/src/router/titlebar-outlet.tsx
+24
View File
@@ -0,0 +1,24 @@
import { Outlet } from 'react-router';
import styled from 'styled-components';
import { Titlebar } from '/@/features/titlebar/components/titlebar';
const TitlebarContainer = styled.header`
position: absolute;
top: 0;
right: 0;
z-index: 5000;
height: 2.5rem;
background: var(--titlebar-bg);
-webkit-app-region: drag;
`;
export const TitlebarOutlet = () => {
return (
<>
<TitlebarContainer>
<Titlebar />
</TitlebarContainer>
<Outlet />
</>
);
};