Refresh playlist list on delete (#134)

This commit is contained in:
jeffvli 2023-07-16 23:23:07 -07:00
parent 37e4940c2e
commit be0792a5c7
10 changed files with 64 additions and 4 deletions

View File

@ -22,6 +22,7 @@ interface BaseGridCardProps {
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
resetInfiniteLoaderCache: () => void;
route: CardRoute;
};
data: any;
@ -202,6 +203,7 @@ export const DefaultCard = ({
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}
resetInfiniteLoaderCache={controls.resetInfiniteLoaderCache}
/>
</ImageContainer>
<DetailContainer>

View File

@ -7,7 +7,7 @@ import type { PlayQueueAddOptions } from '/@/renderer/types';
import { Play } from '/@/renderer/types';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import { useHandleGridContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import {
PLAYLIST_CONTEXT_MENU_ITEMS,
ALBUM_CONTEXT_MENU_ITEMS,
@ -112,6 +112,7 @@ export const GridCardControls = ({
itemType,
handlePlayQueueAdd,
handleFavorite,
resetInfiniteLoaderCache,
}: {
handleFavorite: (options: {
id: string[];
@ -122,6 +123,7 @@ export const GridCardControls = ({
handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
itemData: any;
itemType: LibraryItem;
resetInfiniteLoaderCache: () => void;
}) => {
const [isFavorite, setIsFavorite] = useState(itemData?.userFavorite);
const playButtonBehavior = usePlayButtonBehavior();
@ -153,13 +155,14 @@ export const GridCardControls = ({
setIsFavorite(!isFavorite);
};
const handleContextMenu = useHandleGeneralContextMenu(
const handleContextMenu = useHandleGridContextMenu(
itemType,
itemType === LibraryItem.ALBUM
? ALBUM_CONTEXT_MENU_ITEMS
: itemType === LibraryItem.PLAYLIST
? PLAYLIST_CONTEXT_MENU_ITEMS
: ARTIST_CONTEXT_MENU_ITEMS,
resetInfiniteLoaderCache,
);
return (

View File

@ -17,8 +17,11 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
handleFavorite,
route,
display,
resetInfiniteLoaderCache,
} = data as GridCardData;
console.log('data', data);
const cards = [];
const startIndex = index * columnCount;
const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
@ -41,6 +44,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
handlePlayQueueAdd,
itemType,
playButtonBehavior,
resetInfiniteLoaderCache,
route,
}}
data={itemData[i]}

View File

@ -22,6 +22,7 @@ interface BaseGridCardProps {
handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
itemType: LibraryItem;
playButtonBehavior: Play;
resetInfiniteLoaderCache: () => void;
route: CardRoute;
};
data: any;
@ -186,6 +187,7 @@ export const PosterCard = ({
handlePlayQueueAdd={controls.handlePlayQueueAdd}
itemData={data}
itemType={controls.itemType}
resetInfiniteLoaderCache={controls.resetInfiniteLoaderCache}
/>
</ImageContainer>
</LinkContainer>

View File

@ -22,6 +22,7 @@ const createItemData = memoize(
route,
handlePlayQueueAdd,
handleFavorite,
resetInfiniteLoaderCache,
) => ({
cardRows,
columnCount,
@ -34,6 +35,7 @@ const createItemData = memoize(
itemHeight,
itemType,
itemWidth,
resetInfiniteLoaderCache,
route,
}),
);
@ -59,6 +61,7 @@ export const VirtualGridWrapper = ({
onScroll,
height,
width,
resetInfiniteLoaderCache,
...rest
}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children' | 'height' | 'width'> & {
cardRows: CardRow<Album | AlbumArtist | Artist>[];
@ -77,6 +80,7 @@ export const VirtualGridWrapper = ({
itemType: LibraryItem;
itemWidth: number;
refInstance: Ref<any>;
resetInfiniteLoaderCache: () => void;
route?: CardRoute;
rowCount: number;
width?: number;
@ -94,6 +98,7 @@ export const VirtualGridWrapper = ({
route,
handlePlayQueueAdd,
handleFavorite,
resetInfiniteLoaderCache,
);
const memoizedOnScroll = createScrollHandler(onScroll);

View File

@ -166,6 +166,12 @@ export const VirtualInfiniteGrid = forwardRef(
infiniteLoaderRef(list);
listRef.current = list;
}}
resetInfiniteLoaderCache={() => {
if (loader.current) {
loader.current.resetloadMoreItemsCache(false);
setItemData([]);
}
}}
route={route}
rowCount={rowCount}
width={width}

View File

@ -97,6 +97,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
data: [],
dataNodes: [],
menuItems: [],
resetGridCache: undefined,
tableApi: undefined,
type: LibraryItem.SONG,
xPos: 0,
@ -106,7 +107,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const handlePlayQueueAdd = usePlayQueueAdd();
const openContextMenu = (args: OpenContextMenuProps) => {
const { xPos, yPos, menuItems, data, type, tableApi, dataNodes, context } = args;
const { xPos, yPos, menuItems, data, type, tableApi, dataNodes, context, resetGridCache } =
args;
const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
let validMenuItems = menuItems;
@ -133,6 +135,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
data,
dataNodes,
menuItems: validMenuItems,
resetGridCache,
tableApi,
type,
xPos: calculatedXPos,
@ -214,12 +217,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
toast.success({
message: `Playlist has been deleted`,
});
ctx.tableApi?.refreshInfiniteCache();
ctx.resetGridCache?.();
},
},
);
}
closeAllModals();
}, [ctx.data, deletePlaylistMutation]);
}, [ctx, deletePlaylistMutation]);
const openDeletePlaylistModal = useCallback(() => {
openModal({

View File

@ -7,6 +7,7 @@ export type OpenContextMenuProps = {
data: any[];
dataNodes?: RowNode[];
menuItems: SetContextMenuItems;
resetGridCache?: () => void;
tableApi?: GridOptions['api'];
type: LibraryItem;
xPos: number;

View File

@ -72,3 +72,32 @@ export const useHandleGeneralContextMenu = (
return handleContextMenu;
};
export const useHandleGridContextMenu = (
itemType: LibraryItem,
contextMenuItems: SetContextMenuItems,
resetGridCache: () => void,
context?: any,
) => {
const handleContextMenu = (
e: any,
data: Song[] | QueueSong[] | AlbumArtist[] | Artist[] | Album[],
) => {
if (!e) return;
const clickEvent = e as MouseEvent;
clickEvent.preventDefault();
openContextMenu({
context,
data,
dataNodes: undefined,
menuItems: contextMenuItems,
resetGridCache,
type: itemType,
xPos: clickEvent.clientX + 15,
yPos: clickEvent.clientY + 5,
});
};
return handleContextMenu;
};

View File

@ -183,5 +183,6 @@ export type GridCardData = {
itemType: LibraryItem;
itemWidth: number;
playButtonBehavior: Play;
resetInfiniteLoaderCache: () => void;
route: CardRoute;
};