Fix table ref for queue controls

packages/renderer/src/features/now-playing/components/drawer-play-queue.tsx

@@ -15,8 +15,7 @@ export const DrawerPlayQueue = () => {
     >
       <PlayQueue type="sideQueue" />
       <PlayQueueListControls
-        gridApi={queueRef.current?.grid.api}
+        tableRef={queueRef}
-        gridColumnApi={queueRef.current?.grid?.columnApi}
         type="sideQueue"
       />
     </Stack>

packages/renderer/src/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,3 +1,4 @@
+import type { MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Group } from '@mantine/core';
 import {
@@ -15,17 +16,16 @@ import type { TableType } from '/@/types';
 import { mpvPlayer } from '#preload';
 
 interface PlayQueueListOptionsProps {
-  gridApi?: AgGridReactType<Song>['api'];
+  tableRef: MutableRefObject<{ grid: AgGridReactType<Song> } | null>;
-  gridColumnApi?: AgGridReactType<Song>['columnApi'];
   type: TableType;
 }
 
-export const PlayQueueListControls = ({ type, gridApi }: PlayQueueListOptionsProps) => {
+export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsProps) => {
   const { clearQueue, moveToBottomOfQueue, moveToTopOfQueue, shuffleQueue, removeFromQueue } =
     useQueueControls();
 
   const handleMoveToBottom = () => {
-    const selectedRows = gridApi?.getSelectedRows();
+    const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
     const uniqueIds = selectedRows?.map((row) => row.uniqueId);
     if (!uniqueIds?.length) return;
 
@@ -34,7 +34,7 @@ export const PlayQueueListControls = ({ type, gridApi }: PlayQueueListOptionsPro
   };
 
   const handleMoveToTop = () => {
-    const selectedRows = gridApi?.getSelectedRows();
+    const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
     const uniqueIds = selectedRows?.map((row) => row.uniqueId);
     if (!uniqueIds?.length) return;
 
@@ -43,7 +43,7 @@ export const PlayQueueListControls = ({ type, gridApi }: PlayQueueListOptionsPro
   };
 
   const handleRemoveSelected = () => {
-    const selectedRows = gridApi?.getSelectedRows();
+    const selectedRows = tableRef?.current?.grid.api.getSelectedRows();
     const uniqueIds = selectedRows?.map((row) => row.uniqueId);
     if (!uniqueIds?.length) return;
 

packages/renderer/src/features/now-playing/components/sidebar-play-queue.tsx

@@ -6,7 +6,7 @@ import { PlayQueueListControls } from './play-queue-list-controls';
 import type { Song } from '/@/api/types';
 
 export const SidebarPlayQueue = () => {
-  const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+  const tableRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
     <Stack
@@ -15,12 +15,11 @@ export const SidebarPlayQueue = () => {
       sx={{ height: '100%' }}
     >
       <PlayQueue
-        ref={queueRef}
+        ref={tableRef}
         type="sideQueue"
       />
       <PlayQueueListControls
-        gridApi={queueRef.current?.grid.api}
+        tableRef={tableRef}
-        gridColumnApi={queueRef.current?.grid.columnApi}
         type="sideQueue"
       />
     </Stack>