Refactor context menu handler into hook

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -34,15 +34,11 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
   const clickOutsideRef = useClickOutside(() => setOpened(false));
   const viewport = useViewportSize();
   const [ref, menuRect] = useResizeObserver();
-  const [ctx, setCtx] = useSetState<{
-    data: any[];
-    menuItems: SetContextMenuItems;
-    type: LibraryItem;
-    xPos: number;
-    yPos: number;
-  }>({
+  const [ctx, setCtx] = useSetState<OpenContextMenuProps>({
     data: [],
+    dataNodes: [],
     menuItems: [],
+    tableRef: undefined,
     type: LibraryItem.SONG,
     xPos: 0,
     yPos: 0,
@@ -51,7 +47,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
   const handlePlayQueueAdd = usePlayQueueAdd();
 
   const openContextMenu = (args: OpenContextMenuProps) => {
-    const { xPos, yPos, menuItems, data, type } = args;
+    const { xPos, yPos, menuItems, data, type, tableRef, dataNodes } = args;
 
     const shouldReverseY = yPos + menuRect.height > viewport.height;
     const shouldReverseX = xPos + menuRect.width > viewport.width;
@@ -59,12 +55,29 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     const calculatedXPos = shouldReverseX ? xPos - menuRect.width : xPos;
     const calculatedYPos = shouldReverseY ? yPos - menuRect.height : yPos;
 
-    setCtx({ data, menuItems, type, xPos: calculatedXPos, yPos: calculatedYPos });
+    setCtx({
+      data,
+      dataNodes,
+      menuItems,
+      tableRef,
+      type,
+      xPos: calculatedXPos,
+      yPos: calculatedYPos,
+    });
     setOpened(true);
   };
 
   const closeContextMenu = () => {
     setOpened(false);
+    setCtx({
+      data: [],
+      dataNodes: [],
+      menuItems: [],
+      tableRef: undefined,
+      type: LibraryItem.SONG,
+      xPos: 0,
+      yPos: 0,
+    });
   };
 
   useContextMenuEvents({

src/renderer/features/context-menu/events.ts

@@ -1,9 +1,14 @@
+import { RowNode } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { createUseExternalEvents } from '@mantine/utils';
+import { MutableRefObject } from 'react';
 import { LibraryItem } from '/@/renderer/api/types';
 
 export type OpenContextMenuProps = {
   data: any[];
+  dataNodes?: RowNode[];
   menuItems: SetContextMenuItems;
+  tableRef?: MutableRefObject<AgGridReactType | null>;
   type: LibraryItem;
   xPos: number;
   yPos: number;

src/renderer/features/context-menu/hooks/use-handle-context-menu.ts

@@ -0,0 +1,38 @@
+import { CellContextMenuEvent } from '@ag-grid-community/core';
+import { sortBy } from 'lodash';
+import { LibraryItem } from '/@/renderer/api/types';
+import { openContextMenu, SetContextMenuItems } from '/@/renderer/features/context-menu/events';
+
+export const useHandleTableContextMenu = (
+  itemType: LibraryItem,
+  contextMenuItems: SetContextMenuItems,
+) => {
+  const handleContextMenu = (e: CellContextMenuEvent) => {
+    if (!e.event) return;
+    const clickEvent = e.event as MouseEvent;
+    clickEvent.preventDefault();
+
+    let selectedNodes = sortBy(e.api.getSelectedNodes(), ['rowIndex']);
+    let selectedRows = selectedNodes.map((node) => node.data);
+
+    const shouldReplaceSelected = !selectedNodes.map((node) => node.data.id).includes(e.data.id);
+
+    if (shouldReplaceSelected) {
+      e.api.deselectAll();
+      e.node.setSelected(true);
+      selectedRows = [e.data];
+      selectedNodes = e.api.getSelectedNodes();
+    }
+
+    openContextMenu({
+      data: selectedRows,
+      dataNodes: selectedNodes,
+      menuItems: contextMenuItems,
+      type: itemType,
+      xPos: clickEvent.clientX,
+      yPos: clickEvent.clientY,
+    });
+  };
+
+  return handleContextMenu;
+};

src/renderer/features/context-menu/index.tsx

@@ -1,2 +1,3 @@
 export * from './events';
 export * from './context-menu-provider';
+export * from './hooks/use-handle-context-menu';