From bcc32deda1bab87d3aa5ff8f0b84c06d6cfb9fbb Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 10 Dec 2022 14:56:46 -0800
Subject: [PATCH] Fix table ref for queue controls

---
 .../now-playing/components/drawer-play-queue.tsx     |  3 +--
 .../components/play-queue-list-controls.tsx          | 12 ++++++------
 .../now-playing/components/sidebar-play-queue.tsx    |  7 +++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/renderer/src/features/now-playing/components/drawer-play-queue.tsx b/packages/renderer/src/features/now-playing/components/drawer-play-queue.tsx
index d19888311..929f8bc83 100644
--- a/packages/renderer/src/features/now-playing/components/drawer-play-queue.tsx
+++ b/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}
-        gridColumnApi={queueRef.current?.grid?.columnApi}
+        tableRef={queueRef}
         type="sideQueue"
       />
     </Stack>
diff --git a/packages/renderer/src/features/now-playing/components/play-queue-list-controls.tsx b/packages/renderer/src/features/now-playing/components/play-queue-list-controls.tsx
index 6c13b53ef..a9ee90f3f 100644
--- a/packages/renderer/src/features/now-playing/components/play-queue-list-controls.tsx
+++ b/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'];
-  gridColumnApi?: AgGridReactType<Song>['columnApi'];
+  tableRef: MutableRefObject<{ grid: AgGridReactType<Song> } | null>;
   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;
 
diff --git a/packages/renderer/src/features/now-playing/components/sidebar-play-queue.tsx b/packages/renderer/src/features/now-playing/components/sidebar-play-queue.tsx
index fc606902c..4aab6cf19 100644
--- a/packages/renderer/src/features/now-playing/components/sidebar-play-queue.tsx
+++ b/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}
-        gridColumnApi={queueRef.current?.grid.columnApi}
+        tableRef={tableRef}
         type="sideQueue"
       />
     </Stack>