Add favorite handler to grid cards

This commit is contained in:
jeffvli 2023-01-08 00:52:53 -08:00
parent 7a3bdb531d
commit d17f30f5e6
12 changed files with 114 additions and 7 deletions

View file

@ -101,6 +101,7 @@ interface BaseGridCardProps {
columnIndex: number;
controls: {
cardRows: CardRow<Album | AlbumArtist | Artist>[];
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
@ -179,6 +180,7 @@ export const DefaultCard = ({
)}
<ControlsContainer>
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
itemData={data}
itemType={itemType}

View file

@ -118,7 +118,9 @@ export const GridCardControls = ({
itemData,
itemType,
handlePlayQueueAdd,
handleFavorite,
}: {
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any;
itemType: LibraryItem;
@ -138,6 +140,17 @@ export const GridCardControls = ({
});
};
const handleFavorites = async (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
handleFavorite?.({
id: [itemData.id],
isFavorite: itemData.userFavorite,
itemType,
});
};
return (
<GridCardControlsContainer>
{/* <TopControls /> */}
@ -148,13 +161,13 @@ export const GridCardControls = ({
</PlayButton>
<Group spacing="xs">
<SecondaryButton
disabled
p={5}
sx={{ svg: { fill: 'white !important' } }}
variant="subtle"
onClick={handleFavorites}
>
<FavoriteWrapper isFavorite={itemData?.isFavorite}>
{itemData?.isFavorite ? (
{itemData?.userFavorite ? (
<RiHeartFill size={20} />
) : (
<RiHeartLine

View file

@ -18,6 +18,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
itemType,
playButtonBehavior,
handlePlayQueueAdd,
handleFavorite,
route,
display,
} = data as GridCardData;
@ -35,6 +36,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
columnIndex={i}
controls={{
cardRows,
handleFavorite,
handlePlayQueueAdd,
itemType,
playButtonBehavior,

View file

@ -105,6 +105,7 @@ interface BaseGridCardProps {
columnIndex: number;
controls: {
cardRows: CardRow<Album | AlbumArtist | Artist>[];
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
@ -173,6 +174,7 @@ export const PosterCard = ({
)}
<ControlsContainer>
<GridCardControls
handleFavorite={controls.handleFavorite}
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}

View file

@ -21,10 +21,12 @@ const createItemData = memoize(
itemWidth,
route,
handlePlayQueueAdd,
handleFavorite,
) => ({
cardRows,
columnCount,
display,
handleFavorite,
handlePlayQueueAdd,
itemCount,
itemData,
@ -50,6 +52,7 @@ export const VirtualGridWrapper = ({
columnCount,
rowCount,
initialScrollOffset,
handleFavorite,
handlePlayQueueAdd,
itemData,
route,
@ -59,6 +62,7 @@ export const VirtualGridWrapper = ({
cardRows: CardRow<Album | AlbumArtist | Artist>[];
columnCount: number;
display: ListDisplayType;
handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any[];
itemGap: number;
@ -81,6 +85,7 @@ export const VirtualGridWrapper = ({
itemWidth,
route,
handlePlayQueueAdd,
handleFavorite,
);
const memoizedOnScroll = createScrollHandler(onScroll);

View file

@ -17,6 +17,7 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
cardRows: CardRow<any>[];
display?: ListDisplayType;
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any[];
itemGap: number;
@ -54,6 +55,7 @@ export const VirtualInfiniteGrid = forwardRef(
fetchFn,
loading,
initialScrollOffset,
handleFavorite,
height,
width,
}: VirtualGridProps,
@ -146,6 +148,7 @@ export const VirtualInfiniteGrid = forwardRef(
cardRows={cardRows}
columnCount={columnCount}
display={display || ListDisplayType.CARD}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={initialScrollOffset}