Refresh playlist list on delete (#134)

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}
                         />
                     </ImageContainer>
                     <DetailContainer>

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 (

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]}

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}
                         />
                     </ImageContainer>
                 </LinkContainer>

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<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);

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}

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({

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;

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;
+};

src/renderer/types.ts

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