import { MutableRefObject, useCallback, useMemo } from 'react'; import type { BodyScrollEvent, ColDef, GridReadyEvent, IDatasource, PaginationChangedEvent, RowDoubleClickedEvent, } from '@ag-grid-community/core'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { Stack } from '@mantine/core'; import { useQueryClient } from '@tanstack/react-query'; import { api } from '/@/renderer/api'; import { queryKeys } from '/@/renderer/api/query-keys'; import { getColumnDefs, TablePagination, VirtualGridAutoSizerContainer, VirtualTable, } from '/@/renderer/components'; import { SongListFilter, useCurrentServer, useSetSongTable, useSetSongTablePagination, useSongListStore, useSongTablePagination, } from '/@/renderer/store'; import { ListDisplayType } from '/@/renderer/types'; import { AnimatePresence } from 'framer-motion'; import debounce from 'lodash/debounce'; import { useHandleTableContextMenu } from '/@/renderer/features/context-menu'; import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types'; import { usePlayQueueAdd } from '/@/renderer/features/player'; interface SongListContentProps { customFilters?: Partial; itemCount?: number; tableRef: MutableRefObject; } export const SongListContent = ({ customFilters, itemCount, tableRef }: SongListContentProps) => { const queryClient = useQueryClient(); const server = useCurrentServer(); const page = useSongListStore(); const pagination = useSongTablePagination(); const setPagination = useSetSongTablePagination(); const setTable = useSetSongTable(); const handlePlayQueueAdd = usePlayQueueAdd(); const playButtonBehavior = usePlayButtonBehavior(); const isPaginationEnabled = page.display === ListDisplayType.TABLE_PAGINATED; const columnDefs: ColDef[] = useMemo( () => getColumnDefs(page.table.columns), [page.table.columns], ); const onGridReady = useCallback( (params: GridReadyEvent) => { const dataSource: IDatasource = { getRows: async (params) => { const limit = params.endRow - params.startRow; const startIndex = params.startRow; const query: SongListQuery = { limit, startIndex, ...page.filter, ...customFilters, }; const queryKey = queryKeys.songs.list(server?.id || '', query); const songsRes = await queryClient.fetchQuery( queryKey, async ({ signal }) => api.controller.getSongList({ query, server, signal, }), { cacheTime: 1000 * 60 * 1 }, ); const songs = api.normalize.songList(songsRes, server); params.successCallback(songs?.items || [], songsRes?.totalRecordCount || 0); }, rowCount: undefined, }; params.api.setDatasource(dataSource); if (!customFilters) { params.api.ensureIndexVisible(page.table.scrollOffset, 'top'); } }, [customFilters, page.filter, page.table.scrollOffset, queryClient, server], ); const onPaginationChanged = useCallback( (event: PaginationChangedEvent) => { if (!isPaginationEnabled || !event.api) return; // Scroll to top of page on pagination change const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage; event.api?.ensureIndexVisible(currentPageStartIndex, 'top'); setPagination({ itemsPerPage: event.api.paginationGetPageSize(), totalItems: event.api.paginationGetRowCount(), totalPages: event.api.paginationGetTotalPages() + 1, }); }, [isPaginationEnabled, pagination.currentPage, pagination.itemsPerPage, setPagination], ); const handleGridSizeChange = () => { if (page.table.autoFit) { tableRef?.current?.api.sizeColumnsToFit(); } }; const handleColumnChange = useCallback(() => { const { columnApi } = tableRef?.current || {}; const columnsOrder = columnApi?.getAllGridColumns(); if (!columnsOrder) return; const columnsInSettings = page.table.columns; const updatedColumns = []; for (const column of columnsOrder) { const columnInSettings = columnsInSettings.find((c) => c.column === column.getColDef().colId); if (columnInSettings) { updatedColumns.push({ ...columnInSettings, ...(!page.table.autoFit && { width: column.getActualWidth(), }), }); } } setTable({ columns: updatedColumns }); }, [page.table.autoFit, page.table.columns, setTable, tableRef]); const debouncedColumnChange = debounce(handleColumnChange, 200); const handleScroll = (e: BodyScrollEvent) => { if (customFilters) return; const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0)); setTable({ scrollOffset }); }; const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS); const handleRowDoubleClick = (e: RowDoubleClickedEvent) => { if (!e.data) return; handlePlayQueueAdd?.({ byData: [e.data], play: playButtonBehavior, }); }; return ( data.data.id} infiniteInitialRowCount={itemCount || 100} pagination={isPaginationEnabled} paginationAutoPageSize={isPaginationEnabled} paginationPageSize={page.table.pagination.itemsPerPage || 100} rowBuffer={20} rowHeight={page.table.rowHeight || 40} rowModelType="infinite" rowSelection="multiple" onBodyScrollEnd={handleScroll} onCellContextMenu={handleContextMenu} onColumnMoved={handleColumnChange} onColumnResized={debouncedColumnChange} onGridReady={onGridReady} onGridSizeChanged={handleGridSizeChange} onPaginationChanged={onPaginationChanged} onRowDoubleClicked={handleRowDoubleClick} /> {page.display === ListDisplayType.TABLE_PAGINATED && ( )} ); };