From 7500046ac61c42f37405f3bc0ae3986cc73a7399 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 28 Dec 2022 01:23:54 -0800
Subject: [PATCH] Misc fixes to song list page

---
 .../songs/components/song-list-content.tsx    | 28 ++++++++-----
 .../songs/components/song-list-header.tsx     | 42 +++++++++----------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx
index 371b41a7..af6d9be3 100644
--- a/src/renderer/features/songs/components/song-list-content.tsx
+++ b/src/renderer/features/songs/components/song-list-content.tsx
@@ -50,7 +50,10 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     ...page.filter,
   });
 
-  const columnDefs = useMemo(() => getColumnDefs(page.table.columns), [page.table.columns]);
+  const columnDefs: ColDef[] = useMemo(
+    () => getColumnDefs(page.table.columns),
+    [page.table.columns],
+  );
 
   const defaultColumnDefs: ColDef = useMemo(() => {
     return {
@@ -91,9 +94,8 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
         rowCount: undefined,
       };
       params.api.setDatasource(dataSource);
-      params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
     },
-    [page.filter, page.table.scrollOffset, queryClient, server],
+    [page.filter, queryClient, server],
   );
 
   const onPaginationChanged = useCallback(
@@ -119,7 +121,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     }
   };
 
-  const handleColumnMove = useCallback(() => {
+  const handleColumnChange = useCallback(() => {
     const { columnApi } = tableRef?.current || {};
     const columnsOrder = columnApi?.getAllGridColumns();
 
@@ -134,7 +136,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
         updatedColumns.push({
           ...columnInSettings,
           ...(!page.table.autoFit && {
-            width: column.getColDef().width,
+            width: column.getActualWidth(),
           }),
         });
       }
@@ -143,10 +145,12 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     setTable({ columns: updatedColumns });
   }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
 
-  const handleScroll = debounce((e: BodyScrollEvent) => {
+  const debouncedColumnChange = debounce(handleColumnChange, 200);
+
+  const handleScroll = (e: BodyScrollEvent) => {
     const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
     setTable({ scrollOffset });
-  }, 200);
+  };
 
   return (
     <Stack
@@ -173,18 +177,19 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           enableCellChangeFlash={false}
-          getRowId={(data) => data.data.uniqueId}
-          infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 10}
+          getRowId={(data) => data.data.id}
+          infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 100}
           pagination={isPaginationEnabled}
           paginationAutoPageSize={isPaginationEnabled}
+          paginationPageSize={page.table.pagination.itemsPerPage || 100}
           rowBuffer={20}
           rowHeight={page.table.rowHeight || 40}
           rowModelType="infinite"
           rowSelection="multiple"
-          // onBodyScroll={handleScroll}
           onBodyScrollEnd={handleScroll}
           onCellContextMenu={(e) => console.log('context', e)}
-          onColumnMoved={handleColumnMove}
+          onColumnMoved={handleColumnChange}
+          onColumnResized={debouncedColumnChange}
           onGridReady={onGridReady}
           onGridSizeChanged={handleGridSizeChange}
           onPaginationChanged={onPaginationChanged}
@@ -192,6 +197,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
       </VirtualGridAutoSizerContainer>
       <AnimatePresence
         presenceAffectsLayout
+        initial={false}
         mode="wait"
       >
         {page.display === ListDisplayType.TABLE_PAGINATED && (
diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
index 9d9f791f..7f0e6e95 100644
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@@ -1,6 +1,6 @@
 import type { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Group } from '@mantine/core';
+import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
 import {
@@ -89,6 +89,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
   const setPage = useSetSongStore();
   const setFilter = useSetSongFilters();
   const setTable = useSetSongTable();
+  const setPagination = useSetSongTablePagination();
   const cq = useContainerQuery();
 
   const musicFoldersQuery = useMusicFolders();
@@ -137,8 +138,9 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
       tableRef.current?.api.setDatasource(dataSource);
       tableRef.current?.api.purgeInfiniteCache();
       tableRef.current?.api.ensureIndexVisible(0, 'top');
+      setPagination({ currentPage: 0 });
     },
-    [page.filter, server, tableRef],
+    [page.filter, server, setPagination, tableRef],
   );
 
   const handleSetSortBy = useCallback(
@@ -181,8 +183,6 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
     handleFilterChange(updatedFilters);
   }, [page.filter.sortOrder, handleFilterChange, setFilter]);
 
-  const setPagination = useSetSongTablePagination();
-
   const handleSetViewType = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
@@ -303,26 +303,22 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
                 component="div"
                 sx={{ cursor: 'default' }}
               >
-                <MultiSelect
-                  clearable
-                  data={SONG_TABLE_COLUMNS}
-                  defaultValue={page.table?.columns.map((column) => column.column)}
-                  width={300}
-                  onChange={handleTableColumns}
-                />
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                closeMenuOnClick={false}
-                component="div"
-                sx={{ cursor: 'default' }}
-              >
-                <Group position="apart">
-                  <Text>Auto Fit Columns</Text>
-                  <Switch
-                    defaultChecked={page.table.autoFit}
-                    onChange={handleAutoFitColumns}
+                <Stack>
+                  <MultiSelect
+                    clearable
+                    data={SONG_TABLE_COLUMNS}
+                    defaultValue={page.table?.columns.map((column) => column.column)}
+                    width={300}
+                    onChange={handleTableColumns}
                   />
-                </Group>
+                  <Group position="apart">
+                    <Text>Auto Fit Columns</Text>
+                    <Switch
+                      defaultChecked={page.table.autoFit}
+                      onChange={handleAutoFitColumns}
+                    />
+                  </Group>
+                </Stack>
               </DropdownMenu.Item>
             </DropdownMenu.Dropdown>
           </DropdownMenu>