Fix type errors related to react-table

nukeop · Aug 30, 2022 · 00bf008 · 00bf008
1 parent 6717e74
commit 00bf008
Show file tree

Hide file tree

Showing 19 changed files with 2,797 additions and 2,729 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -59,10 +59,10 @@
     "mousetrap": "^1.6.2",
     "numeral": "^2.0.6",
     "pitchfork-bnm": "^1.1.2",
-    "react": "^16.14.0",
+    "react": "16.14.0",
     "react-base-table": "^1.9.2",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "16.14.0",
     "react-fontawesome": "^1.6.1",
     "react-full-screen": "^1.0.1",
     "react-hifi": "^2.2.1",
@@ -128,4 +128,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"
   }
-}
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -35,8 +35,8 @@
     "md5": "^2.2.1",
     "megalodon": "^3.6.1",
     "nodebrainz": "^2.1.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "redux": "^4.0.5",
     "search-azlyrics": "0.0.3",
     "ts-jest": "^27.1.3",
@@ -56,4 +56,4 @@
     "typescript": "^4.2.4",
     "ytdl-core": "^4.11.1"
   }
-}
+}
diff --git a/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx b/packages/ui/lib/components/Playlists/Cells/ModificationDateCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import { CellProps } from 'react-table';
 
 import { Playlist } from '@nuclear/core';
@@ -16,7 +16,7 @@ const ModificationDateCell: React.FC<CellProps<Playlist> & PlaylistsStrings & Pl
   neverModified,
   serverModifiedAt  
 }) => <td
-  {...cell.getCellProps()}
+  {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
   className={styles.modification_date_cell}
 >
   <div className={styles.modification_date_cell_content}>

diff --git a/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx b/packages/ui/lib/components/Playlists/Cells/SyncCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import { CellProps } from 'react-table';
 import { Icon } from 'semantic-ui-react';
 
@@ -18,7 +18,7 @@ const SyncCell: React.FC<CellProps<PlaylistWithLoadingState> & PlaylistsStrings
   onPlaylistDownload,
   onPlaylistUpload
 }) => <td
-  {...cell.getCellProps()}
+  {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
   className={styles.sync_cell}
 >
   <div className={styles.sync_cell_content}>

diff --git a/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx b/packages/ui/lib/components/Playlists/Cells/TitleCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import { CellProps } from 'react-table';
 
 import { Playlist } from '@nuclear/core';
@@ -9,7 +9,7 @@ const TitleCell: React.FC<CellProps<Playlist>> =({
   cell,
   value
 }) => <td
-  {...cell.getCellProps()}
+  {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
   className={styles.title_cell}
 >
   {value}

diff --git a/packages/ui/lib/components/Playlists/Cells/TracksCell.tsx b/packages/ui/lib/components/Playlists/Cells/TracksCell.tsx
@@ -4,14 +4,15 @@ import { CellProps } from 'react-table';
 import { Playlist } from '@nuclear/core';
 
 import { PlaylistsStrings } from '..';
+import { TdHTMLAttributes } from 'react';
 
 const TracksCell: React.FC<CellProps<Playlist> & PlaylistsStrings> = ({
   cell,
   value,
   tracksSingular,
   tracksPlural
 }) => <td
-  {...cell.getCellProps()}
+  {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}
 >
   {value}
   {' '}

diff --git a/packages/ui/lib/components/Playlists/index.tsx b/packages/ui/lib/components/Playlists/index.tsx
@@ -13,6 +13,7 @@ import ModificationDateCell from './Cells/ModificationDateCell';
 import SyncCell from './Cells/SyncCell';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import styles from './styles.scss';
+import { TableHTMLAttributes } from 'react';
 
 export type PlaylistsStrings = {
   tracksSingular: string;
@@ -90,15 +91,15 @@ const Playlists: React.FC<PlaylistsProps> = ({
   } = useTable<PlaylistWithLoadingState>({ columns, data });
 
   return <table
-    {...getTableProps()}
+    {...getTableProps() as TableHTMLAttributes<HTMLTableElement>}
     className={styles.playlists_table}
   >
     <DragDropContext onDragEnd={onDragEnd}>
       <Droppable droppableId='playlists'>
         {(provided) => (
           <tbody
             ref={provided.innerRef}
-            {...getTableBodyProps()}
+            {...getTableBodyProps() as TableHTMLAttributes<HTMLTableSectionElement>}
             {...provided.droppableProps}
           >
             {
@@ -116,7 +117,7 @@ const Playlists: React.FC<PlaylistsProps> = ({
                         ref={provided.innerRef}
                         className={cx({ [styles.is_dragging]: snapshot.isDragging })}
                         onClick={() => extra.onPlaylistClick(row.original.id)}
-                        {...row.getRowProps()}
+                        {...row.getRowProps() as TableHTMLAttributes<HTMLTableRowElement>}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                       >

diff --git a/packages/ui/lib/components/TrackPopup/index.tsx b/packages/ui/lib/components/TrackPopup/index.tsx
@@ -30,7 +30,7 @@ export type TrackPopupProps = {
   onPlayNext?: () => void;
   onPlayNow?: () => void;
   onAddToFavorites?: () => void;
-  onAddToPlaylist?: ({ name: string }) => void;
+  onAddToPlaylist?: ({ name }: { name: string }) => void;
   onAddToDownloads?: () => void;
 };
 

diff --git a/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx b/packages/ui/lib/components/TrackTable/Cells/DeleteCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps } from 'react-table';
 
@@ -11,7 +11,7 @@ const DeleteCell: React.FC<CellProps<Track> & TrackTableExtraProps> = ({
   cell,
   row,
   onDelete
-}) => <td {...cell.getCellProps()} className={cx(styles.narrow, styles.delete_cell)}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.narrow, styles.delete_cell)}>
   <Button
     data-testid='delete-button'
     basic

diff --git a/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx b/packages/ui/lib/components/TrackTable/Cells/FavoriteCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps } from 'react-table';
 
@@ -13,7 +13,7 @@ const FavoriteCell: React.FC<CellProps<Track> & TrackTableExtraProps> = ({
   value,
   onAddToFavorites,
   onRemoveFromFavorites
-}) => <td {...cell.getCellProps()} className={cx(styles.favorite_cell, styles.narrow)}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.favorite_cell, styles.narrow)}>
   <Button
     basic
     borderless

diff --git a/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/PositionCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps } from 'react-table';
 
@@ -12,7 +12,7 @@ const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps> = ({
   row,
   value,
   onPlay
-}) => <td {...cell.getCellProps()} className={cx(styles.position_cell, styles.narrow)}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.position_cell, styles.narrow)}>
   <Button 
     circular 
     size='tiny'

diff --git a/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx b/packages/ui/lib/components/TrackTable/Cells/SelectionCell.tsx
@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
-import React from 'react';
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps, UseRowSelectRowProps } from 'react-table';
 
@@ -10,7 +10,7 @@ import styles from '../styles.scss';
 const SelectionCell: React.FC<CellProps<Track> & UseRowSelectRowProps<Track>> = ({
   cell,
   row
-}) => <td {...cell.getCellProps()} className={cx(styles.select_cell, styles.narrow)}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(styles.select_cell, styles.narrow)}>
   {/* @ts-ignore */}
   <Checkbox {...row.getToggleRowSelectedProps()}/>
 </td>;

diff --git a/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/TrackTable/Cells/ThumbnailCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import cx from 'classnames';
 import { CellProps } from 'react-table';
 
@@ -14,7 +14,7 @@ export type ThumbnailCellClassnames = {
 const ThumbnailCell: (classnames?: ThumbnailCellClassnames) => React.FC<CellProps<Track>> = (classnames = styles) => ({
   cell,
   value
-}) => <td {...cell.getCellProps()} className={cx(classnames.thumbnail_cell, classnames.narrow)}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={cx(classnames.thumbnail_cell, classnames.narrow)}>
   <img className={classnames.thumbnail} src={value} />
 </td>;
 

diff --git a/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/TrackTable/Cells/TitleCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import { CellProps } from 'react-table';
 
 import { Button, TrackPopup } from '../../..';
@@ -19,7 +19,7 @@ const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps> = ({
   onAddToDownloads,
   playlists,
   popupActionStrings
-}) => <td {...cell.getCellProps()} className={styles.title_cell}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>} className={styles.title_cell}>
   <span className={styles.title_cell_content}>
     <span className={styles.title_cell_value}>
       {value}

diff --git a/packages/ui/lib/components/TrackTable/Cells/TrackTableCell.tsx b/packages/ui/lib/components/TrackTable/Cells/TrackTableCell.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { TdHTMLAttributes } from 'react';
 import { CellProps } from 'react-table';
 
 import { Track } from '../../../types';
 
 const TrackTableCell: React.FC<CellProps<Track>> = ({
   cell,
   value
-}) => <td {...cell.getCellProps()}>
+}) => <td {...cell.getCellProps() as TdHTMLAttributes<HTMLTableCellElement>}>
   {value}
 </td>;
 

diff --git a/packages/ui/lib/components/TrackTable/index.tsx b/packages/ui/lib/components/TrackTable/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import React, { useMemo } from 'react';
+import React, { TableHTMLAttributes, useMemo } from 'react';
 import cx from 'classnames';
 import { useTable, Column, useRowSelect } from 'react-table';
 import _, { isNumber, isString } from 'lodash';
@@ -19,6 +19,7 @@ import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { Track } from '../../types';
 import { formatDuration } from '../..';
+import { ThHTMLAttributes } from 'react';
 
 export type TrackTableProps = TrackTableExtraProps &
   TrackTableHeaders &
@@ -129,14 +130,14 @@ const TrackTable: React.FC<TrackTableProps> = ({
     prepareRow
   } = table;
 
-  return <table {...getTableProps()} className={styles.track_table}>
+  return <table {...getTableProps() as TableHTMLAttributes<HTMLTableElement>} className={styles.track_table}>
     <thead>
       {
         headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getHeaderGroupProps()}>
+          <tr {...headerGroup.getHeaderGroupProps() as TableHTMLAttributes<HTMLTableRowElement>}>
             {
               headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps()}>
+                <th {...column.getHeaderProps() as ThHTMLAttributes<HTMLTableCellElement>}>
                   {column.render('Header', extraProps)}
                 </th>
               ))
@@ -151,7 +152,7 @@ const TrackTable: React.FC<TrackTableProps> = ({
 
           <tbody
             ref={provided.innerRef}
-            {...getTableBodyProps()}
+            {...getTableBodyProps() as TableHTMLAttributes<HTMLTableSectionElement>}
             {...provided.droppableProps}
           >
             {
@@ -168,7 +169,7 @@ const TrackTable: React.FC<TrackTableProps> = ({
                       <tr
                         ref={provided.innerRef}
                         className={cx({ [styles.is_dragging]: snapshot.isDragging })}
-                        {...row.getRowProps()}
+                        {...row.getRowProps() as TableHTMLAttributes<HTMLTableRowElement>}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                       >

diff --git a/packages/ui/lib/components/TrackTable/types.ts b/packages/ui/lib/components/TrackTable/types.ts
@@ -20,7 +20,7 @@ export type TrackTableExtraProps = {
   onAddToQueue?: (track: Track) => void;
   onAddToFavorites?: (track: Track) => void;
   onRemoveFromFavorites?: (track: Track) => void;
-  onAddToPlaylist?: (track: Track, { name: string }) => void;
+  onAddToPlaylist?: (track: Track, { name }: { name: string }) => void;
   onAddToDownloads?: (track: Track) => void;
   onDelete?: (track: Track, idx: number) => void;
   playlists?: Array<{

diff --git a/packages/ui/lib/components/VisualizerOverlay/index.tsx b/packages/ui/lib/components/VisualizerOverlay/index.tsx
@@ -7,7 +7,7 @@ import styles from './styles.scss';
 export type VisualizerOverlayProps = {
   presets: string[];
   selectedPreset: string;
-  onPresetChange: (e: SyntheticEvent, { value: string }) => void;
+  onPresetChange: (e: SyntheticEvent, { value }: { value: string }) => void;
   onEnterFullscreen: React.MouseEventHandler;
   exitFullscreenLabel?: string;
   isFullscreen?: boolean;
@@ -37,11 +37,13 @@ const VisualizerOverlay: React.FC<VisualizerOverlayProps> = ({
     {
       isFullscreen
         ? <p>{exitFullscreenLabel}</p>
-        : <Button
-          basic
-          icon='expand'
-          onClick={onEnterFullscreen}
-        />
+        : (
+          <Button
+            basic
+            icon='expand'
+            onClick={onEnterFullscreen} 
+          />
+        )
     }
   </div>;
 };