Add files

src/renderer/features/songs/routes/song-list-route.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useMemo } from 'react';
+import {
+  VirtualGridContainer,
+  VirtualGridAutoSizerContainer,
+  VirtualTable,
+  getColumnDefs,
+} from '/@/renderer/components';
+import type { ColDef, GridReadyEvent, IDatasource } from '@ag-grid-community/core';
+import { AnimatedPage } from '/@/renderer/features/shared';
+import { useTableSettings } from '/@/renderer/store/settings.store';
+import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
+import { useSongList } from '/@/renderer/features/songs/queries/song-list-query';
+import { SongListSort, SortOrder } from '/@/renderer/api/types';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { useCurrentServer, useSongRouteStore } from '/@/renderer/store';
+import { controller } from '/@/renderer/api/controller';
+import { api } from '/@/renderer/api';
+import { useQueryClient } from '@tanstack/react-query';
+
+const TrackListRoute = () => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+  const page = useSongRouteStore();
+  const filters = page.list.filter;
+  const tableConfig = useTableSettings('songs');
+
+  const checkSongList = useSongList({
+    limit: 1,
+    sortBy: SongListSort.NAME,
+    sortOrder: SortOrder.ASC,
+    startIndex: 0,
+  });
+
+  const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
+  const defaultColumnDefs: ColDef = useMemo(() => {
+    return {
+      lockPinned: true,
+      lockVisible: true,
+      resizable: true,
+    };
+  }, []);
+
+  const onGridReady = useCallback(
+    (params: GridReadyEvent) => {
+      const dataSource: IDatasource = {
+        getRows: async (params) => {
+          console.log(`asking for ${params.startRow} to ${params.endRow}`);
+          const limit = params.endRow - params.startRow;
+          const startIndex = params.startRow;
+
+          const queryKey = queryKeys.songs.list(server?.id || '', {
+            limit,
+            startIndex,
+            ...filters,
+          });
+
+          const songsRes = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+            controller.getSongList({
+              query: {
+                limit,
+                sortBy: filters.sortBy,
+                sortOrder: filters.sortOrder,
+                startIndex,
+              },
+              server,
+              signal,
+            }),
+          );
+
+          const songs = api.normalize.songList(songsRes, server);
+
+          console.log('songs :>> ', songs);
+          params.successCallback(songs?.items || [], -1);
+        },
+        rowCount: undefined,
+      };
+      params.api.setDatasource(dataSource);
+    },
+    [filters, queryClient, server],
+  );
+
+  return (
+    <AnimatedPage>
+      <VirtualGridContainer>
+        <SongListHeader />
+        <VirtualGridAutoSizerContainer>
+          <VirtualTable
+            alwaysShowHorizontalScroll
+            animateRows
+            maintainColumnOrder
+            suppressCopyRowsToClipboard
+            suppressMoveWhenRowDragging
+            suppressRowDrag
+            suppressScrollOnNewData
+            cacheBlockSize={500}
+            cacheOverflowSize={0}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColumnDefs}
+            enableCellChangeFlash={false}
+            getRowId={(data) => data.data.uniqueId}
+            infiniteInitialRowCount={checkSongList.data?.totalRecordCount}
+            maxConcurrentDatasourceRequests={3}
+            rowBuffer={20}
+            // rowData={queue}
+            rowHeight={tableConfig.rowHeight || 40}
+            rowModelType="infinite"
+            rowSelection="multiple"
+            onGridReady={onGridReady}
+          />
+        </VirtualGridAutoSizerContainer>
+      </VirtualGridContainer>
+    </AnimatedPage>
+  );
+};
+
+export default TrackListRoute;