From be0792a5c7a98834585e155c79f7891b1fda264a Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 16 Jul 2023 23:23:07 -0700 Subject: [PATCH] Refresh playlist list on delete (#134) --- .../virtual-grid/grid-card/default-card.tsx | 2 ++ .../grid-card/grid-card-controls.tsx | 7 +++-- .../virtual-grid/grid-card/index.tsx | 4 +++ .../virtual-grid/grid-card/poster-card.tsx | 2 ++ .../virtual-grid/virtual-grid-wrapper.tsx | 5 ++++ .../virtual-grid/virtual-infinite-grid.tsx | 6 ++++ .../context-menu/context-menu-provider.tsx | 11 +++++-- src/renderer/features/context-menu/events.ts | 1 + .../hooks/use-handle-context-menu.ts | 29 +++++++++++++++++++ src/renderer/types.ts | 1 + 10 files changed, 64 insertions(+), 4 deletions(-) diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx index 6bedde5a..21648eb2 100644 --- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx @@ -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} /> diff --git a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx index b9058695..543bb666 100644 --- a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx +++ b/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx @@ -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 ( diff --git a/src/renderer/components/virtual-grid/grid-card/index.tsx b/src/renderer/components/virtual-grid/grid-card/index.tsx index adbbc902..8235cda8 100644 --- a/src/renderer/components/virtual-grid/grid-card/index.tsx +++ b/src/renderer/components/virtual-grid/grid-card/index.tsx @@ -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]} diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx index 49779e1e..fc8021cc 100644 --- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx @@ -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} /> diff --git a/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx b/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx index f235159f..8d7f85fe 100644 --- a/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx +++ b/src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx @@ -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 & { cardRows: CardRow[]; @@ -77,6 +80,7 @@ export const VirtualGridWrapper = ({ itemType: LibraryItem; itemWidth: number; refInstance: Ref; + resetInfiniteLoaderCache: () => void; route?: CardRoute; rowCount: number; width?: number; @@ -94,6 +98,7 @@ export const VirtualGridWrapper = ({ route, handlePlayQueueAdd, handleFavorite, + resetInfiniteLoaderCache, ); const memoizedOnScroll = createScrollHandler(onScroll); diff --git a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx index d3ca5e46..9663367f 100644 --- a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx +++ b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx @@ -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} diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx index 2806d7d6..55e17ada 100644 --- a/src/renderer/features/context-menu/context-menu-provider.tsx +++ b/src/renderer/features/context-menu/context-menu-provider.tsx @@ -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({ diff --git a/src/renderer/features/context-menu/events.ts b/src/renderer/features/context-menu/events.ts index 3fbff9bb..dedcf819 100644 --- a/src/renderer/features/context-menu/events.ts +++ b/src/renderer/features/context-menu/events.ts @@ -7,6 +7,7 @@ export type OpenContextMenuProps = { data: any[]; dataNodes?: RowNode[]; menuItems: SetContextMenuItems; + resetGridCache?: () => void; tableApi?: GridOptions['api']; type: LibraryItem; xPos: number; diff --git a/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts b/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts index 38478da7..0f54172a 100644 --- a/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts +++ b/src/renderer/features/context-menu/hooks/use-handle-context-menu.ts @@ -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; +}; diff --git a/src/renderer/types.ts b/src/renderer/types.ts index 26adda57..8952a424 100644 --- a/src/renderer/types.ts +++ b/src/renderer/types.ts @@ -183,5 +183,6 @@ export type GridCardData = { itemType: LibraryItem; itemWidth: number; playButtonBehavior: Play; + resetInfiniteLoaderCache: () => void; route: CardRoute; };