pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add favorite handler to grid cards

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/components/virtual-grid/grid-card/default-card.tsx
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}

17
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
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

2
src/renderer/components/virtual-grid/grid-card/index.tsx
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,

2
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
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}

5
src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx
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);

3
src/renderer/components/virtual-grid/virtual-infinite-grid.tsx
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}

24
src/renderer/components/virtual-table/cells/favorite-cell.tsx
View file

@ -6,21 +6,43 @@ import { useMutation } from '@tanstack/react-query';
import { HTTPError } from 'ky';
import { api } from '/@/renderer/api';
import { RawFavoriteResponse, FavoriteArgs, LibraryItem } from '/@/renderer/api/types';
import { useCurrentServer, useSetQueueFavorite } from '/@/renderer/store';
import {
useCurrentServer,
useSetAlbumListItemDataById,
useSetQueueFavorite,
} from '/@/renderer/store';
const useCreateFavorite = () => {
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
onSuccess: (_data, variables) => {
for (const id of variables.query.id) {
// Set the userFavorite property to true for the album in the album list data store
if (variables.query.type === LibraryItem.ALBUM) {
setAlbumListData(id, { userFavorite: true });
}
}
},
});
};
const useDeleteFavorite = () => {
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
onSuccess: (_data, variables) => {
for (const id of variables.query.id) {
// Set the userFavorite property to false for the album in the album list data store
if (variables.query.type === LibraryItem.ALBUM) {
setAlbumListData(id, { userFavorite: false });
}
}
},
});
};

28
src/renderer/features/albums/components/album-list-content.tsx
View file

@ -41,6 +41,7 @@ import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { generatePath, useNavigate } from 'react-router';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
interface AlbumListContentProps {
gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -265,6 +266,32 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
};
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,
},
});
} else {
createFavoriteMutation.mutate({
query: {
id,
type: itemType,
},
});
}
};
return (
<>
<VirtualGridAutoSizerContainer>
@ -278,6 +305,7 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
cardRows={cardRows}
display={page.display || ListDisplayType.CARD}
fetchFn={fetch}
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={page?.grid.scrollOffset || 0}

13
src/renderer/features/shared/mutations/create-favorite-mutation.ts
View file

@ -1,15 +1,24 @@
import { useMutation } from '@tanstack/react-query';
import { HTTPError } from 'ky';
import { api } from '/@/renderer/api';
import { FavoriteArgs, RawFavoriteResponse } from '/@/renderer/api/types';
import { FavoriteArgs, LibraryItem, RawFavoriteResponse } from '/@/renderer/api/types';
import { MutationOptions } from '/@/renderer/lib/react-query';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
export const useCreateFavorite = (options?: MutationOptions) => {
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
onSuccess: (_data, variables) => {
for (const id of variables.query.id) {
// Set the userFavorite property to true for the album in the album list data store
if (variables.query.type === LibraryItem.ALBUM) {
setAlbumListData(id, { userFavorite: true });
}
}
},
...options,
});
};

13
src/renderer/features/shared/mutations/delete-favorite-mutation.ts
View file

@ -1,15 +1,24 @@
import { useMutation } from '@tanstack/react-query';
import { HTTPError } from 'ky';
import { api } from '/@/renderer/api';
import { FavoriteArgs, RawFavoriteResponse } from '/@/renderer/api/types';
import { FavoriteArgs, LibraryItem, RawFavoriteResponse } from '/@/renderer/api/types';
import { MutationOptions } from '/@/renderer/lib/react-query';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
export const useDeleteFavorite = (options?: MutationOptions) => {
const server = useCurrentServer();
const setAlbumListData = useSetAlbumListItemDataById();
return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
onSuccess: (_data, variables) => {
for (const id of variables.query.id) {
// Set the userFavorite property to false for the album in the album list data store
if (variables.query.type === LibraryItem.ALBUM) {
setAlbumListData(id, { userFavorite: false });
}
}
},
...options,
});
};

11
src/renderer/store/album-list-data.store.ts
View file

@ -9,6 +9,7 @@ export interface AlbumListDataState {
export interface AlbumListDataSlice extends AlbumListDataState {
actions: {
setItemData: (data: any[]) => void;
setItemDataById: (id: string, data: any) => void;
};
}
@ -21,6 +22,13 @@ export const useAlbumListDataStore = create<AlbumListDataSlice>()(
state.itemData = data;
});
},
setItemDataById: (id, data) => {
set((state) => {
const index = state.itemData.findIndex((item) => item?.id === id);
if (index === -1) return;
state.itemData[index] = { ...state.itemData[index], ...data };
});
},
},
itemData: [],
})),
@ -34,3 +42,6 @@ export const useAlbumListItemData = () =>
useAlbumListDataStore((state) => {
return { itemData: state.itemData, setItemData: state.actions.setItemData };
});
export const useSetAlbumListItemDataById = () =>
useAlbumListDataStore((state) => state.actions.setItemDataById);

1
src/renderer/types.ts
View file

@ -162,6 +162,7 @@ export type GridCardData = {
cardRows: CardRow<Album | AlbumArtist | Artist>[];
columnCount: number;
display: ListDisplayType;
handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemCount: number;
itemData: any[];