remove unused refs from list/grid components

2026-05-14 20:40:21 +02:00 · 2025-12-08 22:00:34 -08:00
parent 628b0184de
commit a19a6815e9
24 changed files with 1563 additions and 1703 deletions
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';

 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -18,55 +17,53 @@ import { ItemListKey } from '/@/shared/types/types';

 interface PlaylistListInfiniteGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}

-export const PlaylistListInfiniteGrid = forwardRef<any, PlaylistListInfiniteGridProps>(
-    ({
-        gap = 'md',
-        itemsPerPage = 100,
-        itemsPerRow,
-        query = {
-            sortBy: PlaylistListSort.NAME,
-            sortOrder: SortOrder.ASC,
-        },
-        saveScrollOffset = true,
-        serverId,
-    }) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
-
-        return (
-            <ItemGridList
-                data={data}
-                gap={gap}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemsPerRow={itemsPerRow}
-                itemType={LibraryItem.PLAYLIST}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                rows={rows}
-            />
-        );
+export const PlaylistListInfiniteGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
    },
-);
+    saveScrollOffset = true,
+    serverId,
+}: PlaylistListInfiniteGridProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
+
+    return (
+        <ItemGridList
+            data={data}
+            gap={gap}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemsPerRow={itemsPerRow}
+            itemType={LibraryItem.PLAYLIST}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            rows={rows}
+        />
+    );
+};
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';

 import { api } from '/@/renderer/api';
 import { useItemListInfiniteLoader } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
@@ -20,79 +19,73 @@ import { ItemListKey } from '/@/shared/types/types';

 interface PlaylistListInfiniteTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}

-export const PlaylistListInfiniteTable = forwardRef<any, PlaylistListInfiniteTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { data, onRangeChanged } = useItemListInfiniteLoader({
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        return (
-            <ItemTableList
-                autoFitColumns={autoFitColumns}
-                CellComponent={ItemTableListColumn}
-                columns={columns}
-                data={data}
-                enableAlternateRowColors={enableAlternateRowColors}
-                enableHorizontalBorders={enableHorizontalBorders}
-                enableRowHoverHighlight={enableRowHoverHighlight}
-                enableSelection={enableSelection}
-                enableVerticalBorders={enableVerticalBorders}
-                initialTop={{
-                    to: scrollOffset ?? 0,
-                    type: 'offset',
-                }}
-                itemType={LibraryItem.PLAYLIST}
-                onColumnReordered={handleColumnReordered}
-                onColumnResized={handleColumnResized}
-                onRangeChanged={onRangeChanged}
-                onScrollEnd={handleOnScrollEnd}
-                ref={ref}
-                size={size}
-            />
-        );
+export const PlaylistListInfiniteTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
    },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: PlaylistListInfiniteTableProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { data, onRangeChanged } = useItemListInfiniteLoader({
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    return (
+        <ItemTableList
+            autoFitColumns={autoFitColumns}
+            CellComponent={ItemTableListColumn}
+            columns={columns}
+            data={data}
+            enableAlternateRowColors={enableAlternateRowColors}
+            enableHorizontalBorders={enableHorizontalBorders}
+            enableRowHoverHighlight={enableRowHoverHighlight}
+            enableSelection={enableSelection}
+            enableVerticalBorders={enableVerticalBorders}
+            initialTop={{
+                to: scrollOffset ?? 0,
+                type: 'offset',
+            }}
+            itemType={LibraryItem.PLAYLIST}
+            onColumnReordered={handleColumnReordered}
+            onColumnResized={handleColumnResized}
+            onRangeChanged={onRangeChanged}
+            onScrollEnd={handleOnScrollEnd}
+            size={size}
+        />
+    );
+};
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';

 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -20,70 +19,64 @@ import { ItemListKey } from '/@/shared/types/types';

 interface PlaylistListPaginatedGridProps extends ItemListGridComponentProps<PlaylistListQuery> {}

-export const PlaylistListPaginatedGrid = forwardRef<any, PlaylistListPaginatedGridProps>(
-    (
-        {
-            gap = 'md',
-            itemsPerPage = 100,
-            itemsPerRow,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemGridList
-                    currentPage={currentPage}
-                    data={data || []}
-                    gap={gap}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemsPerRow={itemsPerRow}
-                    itemType={LibraryItem.PLAYLIST}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    rows={rows}
-                />
-            </ItemListWithPagination>
-        );
+export const PlaylistListPaginatedGrid = ({
+    gap = 'md',
+    itemsPerPage = 100,
+    itemsPerRow,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
    },
-);
+    saveScrollOffset = true,
+    serverId,
+}: PlaylistListPaginatedGridProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST);
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemGridList
+                currentPage={currentPage}
+                data={data || []}
+                gap={gap}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemsPerRow={itemsPerRow}
+                itemType={LibraryItem.PLAYLIST}
+                onScrollEnd={handleOnScrollEnd}
+                rows={rows}
+            />
+        </ItemListWithPagination>
+    );
+};
@@ -1,5 +1,4 @@
 import { UseSuspenseQueryOptions } from '@tanstack/react-query';
-import { forwardRef } from 'react';

 import { api } from '/@/renderer/api';
 import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/helpers/item-list-paginated-loader';
@@ -22,92 +21,86 @@ import { ItemListKey } from '/@/shared/types/types';

 interface PlaylistListPaginatedTableProps extends ItemListTableComponentProps<PlaylistListQuery> {}

-export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedTableProps>(
-    (
-        {
-            autoFitColumns = false,
-            columns,
-            enableAlternateRowColors = false,
-            enableHorizontalBorders = false,
-            enableRowHoverHighlight = true,
-            enableSelection = true,
-            enableVerticalBorders = false,
-            itemsPerPage = 100,
-            query = {
-                sortBy: PlaylistListSort.NAME,
-                sortOrder: SortOrder.ASC,
-            },
-            saveScrollOffset = true,
-            serverId,
-            size = 'default',
-        },
-        ref,
-    ) => {
-        const listCountQuery = playlistsQueries.listCount({
-            query: { ...query },
-            serverId: serverId,
-        }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
-
-        const listQueryFn = api.controller.getPlaylistList;
-
-        const { currentPage, onChange } = useItemListPagination();
-
-        const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
-            currentPage,
-            eventKey: ItemListKey.PLAYLIST,
-            itemsPerPage,
-            itemType: LibraryItem.PLAYLIST,
-            listCountQuery,
-            listQueryFn,
-            query,
-            serverId,
-        });
-
-        const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
-            enabled: saveScrollOffset,
-        });
-
-        const { handleColumnReordered } = useItemListColumnReorder({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const { handleColumnResized } = useItemListColumnResize({
-            itemListKey: ItemListKey.PLAYLIST,
-        });
-
-        const startRowIndex = currentPage * itemsPerPage;
-
-        return (
-            <ItemListWithPagination
-                currentPage={currentPage}
-                itemsPerPage={itemsPerPage}
-                onChange={onChange}
-                pageCount={pageCount}
-                totalItemCount={totalItemCount}
-            >
-                <ItemTableList
-                    autoFitColumns={autoFitColumns}
-                    CellComponent={ItemTableListColumn}
-                    columns={columns}
-                    data={data || []}
-                    enableAlternateRowColors={enableAlternateRowColors}
-                    enableHorizontalBorders={enableHorizontalBorders}
-                    enableRowHoverHighlight={enableRowHoverHighlight}
-                    enableSelection={enableSelection}
-                    enableVerticalBorders={enableVerticalBorders}
-                    initialTop={{
-                        to: scrollOffset ?? 0,
-                        type: 'offset',
-                    }}
-                    itemType={LibraryItem.PLAYLIST}
-                    onColumnReordered={handleColumnReordered}
-                    onColumnResized={handleColumnResized}
-                    onScrollEnd={handleOnScrollEnd}
-                    ref={ref}
-                    size={size}
-                    startRowIndex={startRowIndex}
-                />
-            </ItemListWithPagination>
-        );
+export const PlaylistListPaginatedTable = ({
+    autoFitColumns = false,
+    columns,
+    enableAlternateRowColors = false,
+    enableHorizontalBorders = false,
+    enableRowHoverHighlight = true,
+    enableSelection = true,
+    enableVerticalBorders = false,
+    itemsPerPage = 100,
+    query = {
+        sortBy: PlaylistListSort.NAME,
+        sortOrder: SortOrder.ASC,
    },
-);
+    saveScrollOffset = true,
+    serverId,
+    size = 'default',
+}: PlaylistListPaginatedTableProps) => {
+    const listCountQuery = playlistsQueries.listCount({
+        query: { ...query },
+        serverId: serverId,
+    }) as UseSuspenseQueryOptions<number, Error, number, readonly unknown[]>;
+
+    const listQueryFn = api.controller.getPlaylistList;
+
+    const { currentPage, onChange } = useItemListPagination();
+
+    const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({
+        currentPage,
+        eventKey: ItemListKey.PLAYLIST,
+        itemsPerPage,
+        itemType: LibraryItem.PLAYLIST,
+        listCountQuery,
+        listQueryFn,
+        query,
+        serverId,
+    });
+
+    const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
+        enabled: saveScrollOffset,
+    });
+
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const { handleColumnResized } = useItemListColumnResize({
+        itemListKey: ItemListKey.PLAYLIST,
+    });
+
+    const startRowIndex = currentPage * itemsPerPage;
+
+    return (
+        <ItemListWithPagination
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onChange={onChange}
+            pageCount={pageCount}
+            totalItemCount={totalItemCount}
+        >
+            <ItemTableList
+                autoFitColumns={autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={columns}
+                data={data || []}
+                enableAlternateRowColors={enableAlternateRowColors}
+                enableHorizontalBorders={enableHorizontalBorders}
+                enableRowHoverHighlight={enableRowHoverHighlight}
+                enableSelection={enableSelection}
+                enableVerticalBorders={enableVerticalBorders}
+                initialTop={{
+                    to: scrollOffset ?? 0,
+                    type: 'offset',
+                }}
+                itemType={LibraryItem.PLAYLIST}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                onScrollEnd={handleOnScrollEnd}
+                size={size}
+                startRowIndex={startRowIndex}
+            />
+        </ItemListWithPagination>
+    );
+};