[bugfix]: fix combined title for artist, favoriting on grid pages

This commit is contained in:
Kendall Garner 2024-04-08 23:15:59 -07:00
parent 14086ebc9c
commit 15c6ef382a
No known key found for this signature in database
GPG Key ID: 18D2767419676C87
7 changed files with 70 additions and 86 deletions

View File

@ -19,6 +19,7 @@ export type VirtualInfiniteGridRef = {
resetLoadMoreItemsCache: () => void;
scrollTo: (index: number) => void;
setItemData: (data: any[]) => void;
updateItemData: (rule: (item: any) => any) => void;
};
interface VirtualGridProps
@ -135,6 +136,9 @@ export const VirtualInfiniteGrid = forwardRef(
setItemData: (data: any[]) => {
setItemData(data);
},
updateItemData: (rule) => {
setItemData((data) => data.map(rule));
},
}));
if (loading) return null;

View File

@ -50,7 +50,7 @@ const StyledImage = styled(SimpleImg)`
export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
const artists = useMemo(() => {
if (!value) return null;
return value.artists.length ? value.artists : value.albumArtists;
return value.artists?.length ? value.artists : value.albumArtists;
}, [value]);
if (value === undefined) {

View File

@ -19,10 +19,10 @@ import {
} from '/@/renderer/components/virtual-grid';
import { useListContext } from '/@/renderer/context/list-context';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
const queryClient = useQueryClient();
@ -36,33 +36,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
const scrollOffset = searchParams.get('scrollOffset');
const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const handleFavorite = useHandleFavorite({ gridRef, server });
const cardRows = useMemo(() => {
const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];

View File

@ -20,6 +20,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useListStoreActions } from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
interface AlbumArtistListGridViewProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -34,6 +35,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
const { pageKey } = useListContext();
const { grid, display, filter } = useListStoreByKey({ key: pageKey });
const { setGrid } = useListStoreActions();
const handleFavorite = useHandleFavorite({ gridRef, server });
const fetchInitialData = useCallback(() => {
const query: Omit<AlbumArtistListQuery, 'startIndex' | 'limit'> = {
@ -154,6 +156,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
display={display || ListDisplayType.CARD}
fetchFn={fetch}
fetchInitialData={fetchInitialData}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}

View File

@ -20,10 +20,10 @@ import {
VirtualInfiniteGridRef,
} from '/@/renderer/components/virtual-grid';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useGeneralSettings, useListStoreByKey } from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
interface PlaylistListGridViewProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -38,34 +38,7 @@ export const PlaylistListGridView = ({ gridRef, itemCount }: PlaylistListGridVie
const { display, grid, filter } = useListStoreByKey({ key: pageKey });
const { setGrid } = useListStoreActions();
const { defaultFullPlaylist } = useGeneralSettings();
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const handleFavorite = useHandleFavorite({ gridRef, server });
const cardRows = useMemo(() => {
const rows: CardRow<Playlist>[] = defaultFullPlaylist

View File

@ -0,0 +1,56 @@
import { MutableRefObject, useCallback } from 'react';
import { LibraryItem } from '/@/renderer/api/types';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
import { ServerListItem } from '/@/renderer/types';
interface HandleFavoriteProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
server: ServerListItem | null;
}
export const useHandleFavorite = ({ gridRef, server }: HandleFavoriteProps) => {
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = useCallback(
async (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => {
const { id, itemType, isFavorite } = options;
try {
if (isFavorite) {
await deleteFavoriteMutation.mutateAsync({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
await createFavoriteMutation.mutateAsync({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
const idSet = new Set(id);
gridRef.current?.updateItemData((data) =>
idSet.has(data.id)
? {
...data,
userFavorite: !isFavorite,
}
: data,
);
} catch (error) {
console.error(error);
}
},
[createFavoriteMutation, deleteFavoriteMutation, gridRef, server?.id],
);
return handleFavorite;
};

View File

@ -19,10 +19,10 @@ import {
} from '/@/renderer/components/virtual-grid';
import { useListContext } from '/@/renderer/context/list-context';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
import { CardRow, ListDisplayType } from '/@/renderer/types';
import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
export const SongListGridView = ({ gridRef, itemCount }: any) => {
const queryClient = useQueryClient();
@ -36,33 +36,7 @@ export const SongListGridView = ({ gridRef, itemCount }: any) => {
const scrollOffset = searchParams.get('scrollOffset');
const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
const handleFavorite = (options: {
id: string[];
isFavorite: boolean;
itemType: LibraryItem;
}) => {
const { id, itemType, isFavorite } = options;
if (isFavorite) {
deleteFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
serverId: server?.id,
});
}
};
const handleFavorite = useHandleFavorite({ gridRef, server });
const cardRows = useMemo(() => {
const rows: CardRow<Song>[] = [