Update album artist base route

This commit is contained in:
jeffvli 2023-01-12 12:45:44 -08:00
parent 6746903808
commit 45aef104fe
8 changed files with 17 additions and 51 deletions

View file

@ -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' }],
},
},

View file

@ -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,
})}
>

View file

@ -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,
})}
>

View file

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

View file

@ -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,
})}
>

View file

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

View file

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

View file

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