Fix types for al track table-related structures

packages/app/app/components/ArtistView/PopularTracks/index.tsx

@@ -71,7 +71,7 @@ const PopularTracks: React.FC<PopularTracksProps> = ({
   const customColumns = useMemo(() => [{
     id: PlaycountColumnId,
     Header: t('count'),
-    accessor: 'playcount',
+    accessor: (track: Track) => track.playcount,
     Cell: ({value, ...rest}: CellProps<Track, string>) => <TrackTableCell value={Number(value).toLocaleString()} {...rest} />
   }], []);
 

packages/ui/lib/components/GridTrackTable/Cells/SelectionCell.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
-import { CellProps, UseRowSelectRowProps } from 'react-table';
+import { Cell, CellProps, UseRowSelectRowProps } from 'react-table';
 
 import { Track } from '../../../types';
 import Checkbox, { CheckboxProps } from '../../Checkbox';
 import styles from '../styles.scss';
+import { TrackTableRow } from '..';
 
-export const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
+type SelectionCellProps<T extends Track> = {
+  cell: Cell<T>;
+  row: TrackTableRow<T>;
+}
+
+export const SelectionCell = <T extends Track>({
   cell, 
   row
-}) => <div
-  {...cell.getCellProps()}
-  className={styles.selection_cell}
->
-  <Checkbox
-    {...(row.getToggleRowSelectedProps() as unknown as CheckboxProps)} 
-    tabIndex={-1}
-  />
-</div>;
+}: SelectionCellProps<T>) => {
+  return <div
+    {...cell.getCellProps()}
+    className={styles.selection_cell}
+  >
+    <Checkbox
+      {...(row.getToggleRowSelectedProps() as unknown as CheckboxProps)}
+      tabIndex={-1} />
+  </div>;
+};
 

packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import { Track } from '../../../types';
 import styles from '../styles.scss';
 
-type TextHeaderProps<T extends Track> = {
+export type TextHeaderProps<T extends Track> = {
   className?: string;
   column: ColumnInstance<T> & UseSortByColumnProps<T>;
   header: string | React.ReactNode;
@@ -29,7 +29,7 @@ export const TextHeader: <T extends Track>(props: TextHeaderProps<T>) => React.R
     <div className={cx(className, styles.text_header, {
       [styles.centered]: isCentered
     })} data-testid={dataTestId}>
-      {header}
+      { header }
       {
         isSorted &&
           <Icon className={styles.text_header_icon} name={name} />

packages/ui/lib/components/GridTrackTable/index.tsx

@@ -1,6 +1,6 @@
-import { Column, Row, TableInstance, TableOptions, TableState, UseGlobalFiltersInstanceProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
-import React, { useMemo, memo, useState } from 'react';
-import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
+import { Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableState, UseGlobalFiltersInstanceProps, UseRowSelectInstanceProps, UseRowSelectRowProps, UseSortByColumnProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
+import React, { useMemo, useState } from 'react';
+import { DragDropContext, DragDropContextProps, Droppable } from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -32,12 +32,17 @@ export type GridTrackTableProps<T extends Track> = {
   isTrackFavorite: (track: T) => boolean;
   onDragEnd?: DragDropContextProps['onDragEnd'];
   strings: TrackTableStrings;
-  customColumns?: (Column<T & { columnWidth: string; }>)[];
+  customColumns?: (ColumnWithWidth<T>)[];
 } & TrackTableHeaders 
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
 
-  type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+type TrackTableColumnInstance<T extends Track> = ColumnInstance<T> & UseSortByColumnProps<T>;
+type TrackTableHeaderGroup<T extends Track> = HeaderGroup<T> & UseSortByColumnProps<T>;
+type TrackTableInstance<T extends Track> = TableInstance<T> & UseGlobalFiltersInstanceProps<T> & UseSortByInstanceProps<T> & UseRowSelectInstanceProps<T>;
+type TrackTableState<T extends Track> = TableState<T> & UseSortByState<T>;
+export type TrackTableRow<T extends Track> = Row<T> & UseRowSelectRowProps<T>;
 
 export const GridTrackTable = <T extends Track>({ 
   className,
@@ -73,15 +78,15 @@ export const GridTrackTable = <T extends Track>({
       id: TrackTableColumn.Delete,
       Cell: DeleteCell,
       columnWidth: '3em'
-    },
+    } as Column<T>,
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
-        column={column} 
+        column={column as TrackTableColumnInstance<Track>}
         header={positionHeader} 
         isCentered
       />,
-      accessor: 'position',
+      accessor: (track: T) => track.position, 
       Cell: PositionCell,
       enableSorting: true,
       columnWidth: '4em'
@@ -119,8 +124,8 @@ export const GridTrackTable = <T extends Track>({
     },
     displayAlbum && {
       id: TrackTableColumn.Album,
-      Header: ({ column }) => <TextHeader column={column} header={albumHeader} />,
-      accessor: 'album',
+      Header: ({ column }: { column: TrackTableColumnInstance<T> }) => <TextHeader column={column} header={albumHeader} />,
+      accessor: (track: T) => track.album,
       enableSorting: true,
       Cell: TextCell,
       columnWidth: '1fr'
@@ -154,7 +159,7 @@ export const GridTrackTable = <T extends Track>({
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
+  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect);
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
 
   const {
@@ -163,8 +168,10 @@ export const GridTrackTable = <T extends Track>({
     headerGroups, 
     rows, 
     prepareRow,
-    setGlobalFilter
-  } = table;
+    setGlobalFilter,
+    state: tableState,
+    selectedFlatRows
+  } = table as TrackTableInstance<T>;
 
   const onFilterClick = () => {
     setGlobalFilter('');
@@ -174,7 +181,7 @@ export const GridTrackTable = <T extends Track>({
   const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => column.columnWidth ?? '1fr').join(' ');
 
   // Disabled when there are selected rows, or when sorted by anything other than position
-  const isDragDisabled = !onDragEnd || table.selectedFlatRows.length > 0 || table.state.sortBy[0]?.id !== TrackTableColumn.Position;
+  const isDragDisabled = !onDragEnd || selectedFlatRows.length > 0 || (tableState as TrackTableState<T>).sortBy[0]?.id !== TrackTableColumn.Position;
 
   return <div className={styles.track_table_wrapper}>
     {
@@ -213,11 +220,11 @@ export const GridTrackTable = <T extends Track>({
             {...headerGroup.getHeaderGroupProps()} 
           >
             {
-              headerGroup.headers.map(column => (
+              headerGroup.headers.map((column: TrackTableHeaderGroup<T>) => (
                 <div 
                   key={column.id}
                   className={styles.track_table_header_cell}
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  {...column.getHeaderProps((column).getSortByToggleProps())}
                 >
                   {column.render('Header', extraProps)}
                 </div>))

packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { TdHTMLAttributes } from 'react';
+import React, { ChangeEvent, TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps, UseRowSelectRowProps } from 'react-table';
 
@@ -9,13 +9,17 @@ import styles from '../styles.scss';
 
 const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
   cell,
-  row
-}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
-  {/* @ts-ignore */}
-  <Checkbox
-    {...row.getToggleRowSelectedProps()}
-    tabIndex={undefined}
-  />
-</td>;
+  row,
+  getToggleRowSelectedProps
+}) => {
+  const toggleRowSelectedProps = getToggleRowSelectedProps();
+  return <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
+    <Checkbox 
+      {...toggleRowSelectedProps}
+      onChange={(e) => toggleRowSelectedProps.onChange(e as ChangeEvent<HTMLInputElement>)}
+      tabIndex={undefined} 
+    />
+  </td>;
+};
 
 export default SelectionCell;

packages/ui/lib/components/TrackTable/HistoryTable.tsx

@@ -6,7 +6,7 @@ import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
 import { Column } from 'react-table';
-import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
+import { TextHeader, TextHeaderProps } from '../GridTrackTable/Headers/TextHeader';
 
 export type HistoryTableTrack = Track & {
     createdAt: Date;
@@ -19,7 +19,10 @@ type HistoryTableProps = TrackTableProps<HistoryTableTrack> & {
 const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...props }) => {
   const customColumns = useMemo(() => [{
     id: TrackTableColumn.Date,
-    Header: ({ column }) => <TextHeader  column={column} header={dateHeader} />,
+    Header: ({ column }) => <TextHeader 
+      column={column as TextHeaderProps<HistoryTableTrack>['column']} 
+      header={dateHeader} 
+    />,
     accessor: (track: HistoryTableTrack) => track.createdAt.toLocaleString(),
     Cell: DateCell,
     columnnWidth: '3em'