Update album artist base route
This commit is contained in:
parent
6746903808
commit
45aef104fe
8 changed files with 17 additions and 51 deletions
|
@ -134,7 +134,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
|
|||
arrayProperty: 'name',
|
||||
property: 'albumArtists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
},
|
||||
},
|
||||
|
@ -142,7 +142,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
|
|||
arrayProperty: 'name',
|
||||
property: 'artists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
},
|
||||
},
|
||||
|
@ -195,7 +195,7 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
|
|||
name: {
|
||||
property: 'name',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
},
|
||||
},
|
||||
|
|
|
@ -44,7 +44,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
|
|||
component={Link}
|
||||
overflow="hidden"
|
||||
size="sm"
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: item.id,
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -125,7 +125,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
|
|||
overflow="hidden"
|
||||
size="sm"
|
||||
sx={{ width: 'fit-content' }}
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -268,13 +268,14 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
|
|||
arrayProperty: 'name',
|
||||
property: 'albumArtists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
},
|
||||
},
|
||||
]}
|
||||
containerWidth={cq.width}
|
||||
data={carousel.data}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
loading={carousel.loading}
|
||||
pagination={carousel.pagination}
|
||||
uniqueId={carousel.uniqueId}
|
||||
|
|
|
@ -80,7 +80,7 @@ export const AlbumDetailHeader = forwardRef(
|
|||
$link
|
||||
component={Link}
|
||||
fw="600"
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: artist.id,
|
||||
})}
|
||||
>
|
||||
|
|
|
@ -254,7 +254,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
|
|||
);
|
||||
|
||||
const handleRowDoubleClick = (e: RowDoubleClickedEvent) => {
|
||||
navigate(generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, { albumArtistId: e.data.id }));
|
||||
navigate(generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId: e.data.id }));
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -280,7 +280,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
|
|||
loading={checkAlbumArtistList.isLoading}
|
||||
minimumBatchSize={40}
|
||||
route={{
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
}}
|
||||
setItemData={setItemData}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { useCallback, useMemo, useRef } from 'react';
|
||||
import { Box, Stack } from '@mantine/core';
|
||||
import { useSetState } from '@mantine/hooks';
|
||||
import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
|
||||
import { TextTitle, FeatureCarousel, GridCarousel, NativeScrollArea } from '/@/renderer/components';
|
||||
import { useAlbumList } from '/@/renderer/features/albums';
|
||||
import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
|
||||
|
@ -242,13 +242,14 @@ const HomeRoute = () => {
|
|||
arrayProperty: 'name',
|
||||
property: 'albumArtists',
|
||||
route: {
|
||||
route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL,
|
||||
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
|
||||
slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
|
||||
},
|
||||
},
|
||||
]}
|
||||
containerWidth={cq.width}
|
||||
data={carousel.data}
|
||||
itemType={LibraryItem.ALBUM}
|
||||
loading={carousel.loading}
|
||||
pagination={carousel.pagination}
|
||||
uniqueId={carousel.uniqueId}
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
// Referenced from: https://betterprogramming.pub/the-best-way-to-manage-routes-in-a-react-project-with-typescript-c4e8d4422d64
|
||||
|
||||
export enum AppRoute {
|
||||
ACTION_REQUIRED = '/action-required',
|
||||
EXPLORE = '/explore',
|
||||
HOME = '/',
|
||||
LIBRARY_ALBUMARTISTS = '/library/album-artists',
|
||||
LIBRARY_ALBUMARTISTS_DETAIL = '/library/album-artists/:albumArtistId',
|
||||
LIBRARY_ALBUMS = '/library/albums',
|
||||
LIBRARY_ALBUMS_DETAIL = '/library/albums/:albumId',
|
||||
LIBRARY_ALBUM_ARTISTS = '/library/album-artists',
|
||||
LIBRARY_ALBUM_ARTISTS_DETAIL = '/library/album-artists/:albumArtistId',
|
||||
LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY = '/library/album-artists/:albumArtistId/discography',
|
||||
LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS = '/library/album-artists/:albumArtistId/top-songs',
|
||||
LIBRARY_ARTISTS = '/library/artists',
|
||||
LIBRARY_ARTISTS_DETAIL = '/library/artists/:artistId',
|
||||
LIBRARY_FOLDERS = '/library/folders',
|
||||
|
@ -20,39 +20,3 @@ export enum AppRoute {
|
|||
SEARCH = '/search',
|
||||
SERVERS = '/servers',
|
||||
}
|
||||
|
||||
type TArgs =
|
||||
| { path: AppRoute.HOME }
|
||||
| { path: AppRoute.ACTION_REQUIRED }
|
||||
| { path: AppRoute.NOW_PLAYING }
|
||||
| { path: AppRoute.EXPLORE }
|
||||
| { path: AppRoute.PLAYING }
|
||||
| { path: AppRoute.SERVERS }
|
||||
| { path: AppRoute.SEARCH }
|
||||
| { path: AppRoute.LIBRARY_ARTISTS }
|
||||
| { path: AppRoute.LIBRARY_ARTISTS_DETAIL }
|
||||
| { path: AppRoute.LIBRARY_ALBUMARTISTS }
|
||||
| {
|
||||
params: { albumArtistId: string };
|
||||
path: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL;
|
||||
}
|
||||
| { path: AppRoute.LIBRARY_ALBUMS }
|
||||
| { path: AppRoute.LIBRARY_FOLDERS }
|
||||
| { path: AppRoute.LIBRARY_SONGS }
|
||||
| {
|
||||
params: { albumId: string };
|
||||
path: AppRoute.LIBRARY_ALBUMS_DETAIL;
|
||||
};
|
||||
|
||||
type TArgsWithParams = Extract<TArgs, { params: any; path: any }>;
|
||||
|
||||
export const createPath = (args: TArgs) => {
|
||||
// eslint-disable-next-line no-prototype-builtins
|
||||
if (args.hasOwnProperty('params') === false) return args.path;
|
||||
|
||||
// Create a path by replacing params in the route definition
|
||||
return Object.entries((args as TArgsWithParams).params).reduce(
|
||||
(previousValue: string, [param, value]) => previousValue.replace(`:${param}`, `${value}`),
|
||||
args.path,
|
||||
);
|
||||
};
|
||||
|
|
Reference in a new issue