Vite migration: ESLint fixes

.eslintrc.cjs

@@ -16,6 +16,8 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "no-class-assign": "off",
+    "no-unused-vars": "off",
     "simple-import-sort/imports": [
       "error",
       {

src/components/DevWarning.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import semver from 'semver'
 
 

src/components/Footer.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 export default class Footer extends Component {
     render() {

src/components/Header.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { NavLink } from 'react-router-dom'
 

src/components/Main.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { loadCurrentUser } from 'actions/authenticatedUser'
@@ -15,6 +15,7 @@ class Main extends Component {
         isLoggedIn: PropTypes.bool.isRequired,
         loadCurrentUser: PropTypes.func.isRequired,
         loadServerSettings: PropTypes.func.isRequired,
+        children: PropTypes.node,
     }
 
     componentDidMount() {

src/components/adapted/ReactRouterDom.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { stringify } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import {
     Link as OldLink,
     useLocation,
@@ -12,6 +12,7 @@ import {
 /**
  * Add the location prop to a component
  */
+// eslint-disable-next-line react/display-name
 export const withLocation = (Component) => (props) => (
     <Component
         location={useLocation()}
@@ -22,6 +23,7 @@ export const withLocation = (Component) => (props) => (
 /**
  * Add the params prop to a component
  */
+// eslint-disable-next-line react/display-name
 export const withParams = (Component) => (props) => (
     <Component
         params={useParams()}
@@ -32,6 +34,7 @@ export const withParams = (Component) => (props) => (
 /**
  * Add the navigate prop to a component
  */
+// eslint-disable-next-line react/display-name
 export const withNavigate = (Component) => (props) => (
     <Component
         navigate={useNavigate()}
@@ -42,6 +45,7 @@ export const withNavigate = (Component) => (props) => (
 /**
  * Add the searchParams and setSearchParams props to a component
  */
+// eslint-disable-next-line react/display-name
 export const withSearchParams = (Component) => (props) => {
     const [searchParams, setSearchParams] = useSearchParams()
     return (
@@ -62,6 +66,7 @@ export default class Link extends Component {
             PropTypes.object,
             PropTypes.string,
         ]).isRequired,
+        children: PropTypes.node,
     }
 
     render () {

src/components/adapted/ReactTransitionGroup.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import PropTypes from 'prop-types'
 import { CSSTransition } from 'react-transition-group'
 
 /**
@@ -26,3 +26,6 @@ export const CSSTransitionLazy = ({children, ...props}) => (
         {children}
     </CSSTransition>
 )
+CSSTransitionLazy.propTypes = {
+    children: PropTypes.node,
+}

src/components/generics/ConfirmationBar.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 export default class ConfirmationBar extends Component {
     static propTypes = {

src/components/generics/ControlLink.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import Link from 'components/adapted/ReactRouterDom'
 
@@ -12,6 +12,7 @@ export default class ControlLink extends Component {
             PropTypes.string,
             PropTypes.object
         ]).isRequired,
+        children: PropTypes.node,
     }
 
     render () {

src/components/generics/Delayer.jsx

@@ -4,6 +4,7 @@ import { Component } from 'react'
 export default class Delayer extends Component {
     static propTypes = {
         delay: PropTypes.number.isRequired,
+        children: PropTypes.node,
     }
 
     state = {display: false}

src/components/generics/Form.jsx

@@ -36,6 +36,7 @@ class Form extends Component {
         ]).isRequired,
         title: PropTypes.string,
         validate: PropTypes.func,
+        children: PropTypes.node,
     }
 
     static defaultProps = {

src/components/generics/HighlighterQuery.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import Highlighter from 'react-highlight-words'
 
 /**
@@ -28,6 +28,7 @@ export default class HighlighterQuery extends Component {
             PropTypes.array,
         ]).isRequired,
         textToHighlight: PropTypes.string.isRequired,
+        children: PropTypes.node,
     }
 
     render() {

src/components/generics/ListingFetchWrapper.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import Delayer from 'components/generics/Delayer'
 import Notification from 'components/generics/Notification'
@@ -8,6 +8,7 @@ import { Status } from 'reducers/alterationsResponse'
 export default class ListingFetchWrapper extends Component {
     static propTypes = {
         status: PropTypes.symbol,
+        children: PropTypes.node,
     }
 
     render() {

src/components/generics/Navigator.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { parse } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { withLocation } from 'components/adapted/ReactRouterDom'
 import ControlLink from 'components/generics/ControlLink'
@@ -106,4 +106,6 @@ class Navigator extends Component {
     }
 }
 
-export default withLocation(Navigator)
+Navigator = withLocation(Navigator)
+
+export default Navigator

src/components/generics/Notification.jsx

@@ -157,6 +157,11 @@ export default class Notification extends Component {
  * Must be used on the cell of the first column.
  */
 export class NotifiableForTable extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string,
+    }
+
     elementRef = React.createRef()
 
     state = {

src/components/generics/PlaylistEntryMinimal.jsx

@@ -1,4 +1,5 @@
 import UserWidget from 'components/generics/UserWidget'
+import { playlistEntryPropType } from 'serverPropTypes/playlist'
 
 const PlaylistEntryMinimal = (props) => (
     <div className="playlist-entry-minimal">
@@ -8,5 +9,8 @@ const PlaylistEntryMinimal = (props) => (
         <UserWidget user={props.playlistEntry.owner}/>
     </div>
 )
+PlaylistEntryMinimal.propTypes = {
+    playlistEntry: playlistEntryPropType.isRequired
+}
 
 export default PlaylistEntryMinimal

src/components/generics/Router.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { stringify } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import {
     Navigate,
@@ -14,6 +14,7 @@ class ProtectedRoute extends Component {
         hasUserInfo: PropTypes.bool,
         isLoggedIn: PropTypes.bool,
         location: PropTypes.object.isRequired,
+        children: PropTypes.node,
     }
 
     /**

src/components/generics/Tab.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 
 export default class Tab extends Component {

src/components/generics/TokenWidget.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import Notification from 'components/generics/Notification'
 import { Status } from 'reducers/alterationsResponse'

src/components/generics/UserWidget.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { userPropType } from 'serverPropTypes/users'
@@ -10,6 +10,7 @@ class UserWidget extends Component {
         currentUser: userPropType.isRequired,
         noResize: PropTypes.bool,
         user: userPropType.isRequired,
+        className: PropTypes.string,
     }
 
     render() {

src/components/karaoke/KaraStatusNotification.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link } from 'react-router-dom'
 
 const karaStatusNotification = () => (

src/components/karaoke/Karaoke.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { loadPlaylistDigest } from 'actions/playlistDigest'
@@ -10,12 +10,14 @@ import PlaylistInfoBar from 'components/karaoke/PlaylistInfoBar'
 import { IsPlaylistManager } from 'components/permissions/Playlist'
 import { Status } from 'reducers/alterationsResponse'
 import { karaokeStatePropType } from 'reducers/playlist'
+import { userPropType } from 'serverPropTypes/users'
 import { params } from 'utils'
 
 class Karaoke extends Component {
     static propTypes = {
         loadPlaylistDigest: PropTypes.func.isRequired,
         karaokeState: karaokeStatePropType.isRequired,
+        user: userPropType.isRequired,
     }
 
     state = {

src/components/karaoke/PlaylistInfoBar.jsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 

src/components/karaoke/player/ManageButton.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { CSSTransitionLazy } from 'components/adapted/ReactTransitionGroup'
 import { alterationResponsePropType, Status } from 'reducers/alterationsResponse'

src/components/karaoke/player/Notification.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
 import { alterationResponsePropType, Status } from 'reducers/alterationsResponse'

src/components/karaoke/player/Player.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { stringify } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { sendPlayerCommand } from 'actions/playlist'
@@ -18,6 +18,7 @@ import { playerStatusStatePropType } from 'reducers/playlist'
 import {
     playerErrorsDigestStatePropType
 } from 'reducers/playlistDigest'
+import { userPropType } from 'serverPropTypes/users'
 import { formatDuration } from 'utils'
 
 class Player extends Component {
@@ -27,6 +28,8 @@ class Player extends Component {
         responseOfSendPlayerCommands: PropTypes.objectOf(alterationResponsePropType),
         sendPlayerCommand: PropTypes.func.isRequired,
         setWithControls: PropTypes.func.isRequired,
+        user: userPropType.isRequired,
+        navigate: PropTypes.func.isRequired,
     }
 
     state = {

src/components/library/Library.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 import { Outlet } from 'react-router-dom'
 

src/components/library/SearchBox.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { parse } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { storeSearchBox } from 'actions/library'
@@ -14,6 +14,8 @@ class SearchBox extends Component {
         placeholder: PropTypes.string.isRequired,
         searchParams: PropTypes.object.isRequired,
         setSearchParams: PropTypes.func.isRequired,
+        searchBox: PropTypes.object.isRequired,
+        storeSearchBox: PropTypes.func.isRequired,
     }
 
     state = {

src/components/library/artist/Entry.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { stringify } from 'query-string'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { withNavigate } from 'components/adapted/ReactRouterDom'
 import HighlighterQuery from 'components/generics/HighlighterQuery'
@@ -54,4 +54,6 @@ class ArtistEntry extends Component {
     }
 }
 
-export default withNavigate(ArtistEntry)
+ArtistEntry = withNavigate(ArtistEntry)
+
+export default ArtistEntry

src/components/library/artist/List.jsx

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Component } from 'react'
 import { connect } from 'react-redux'
 
 import { loadLibraryEntries } from 'actions/library'
@@ -12,6 +13,8 @@ import { artistStatePropType } from 'reducers/library'
 class ArtistList extends Component {
     static propTypes = {
         artistState: artistStatePropType.isRequired,
+        searchParams: PropTypes.object.isRequired,
+        loadLibraryEntries: PropTypes.func.isRequired,
     }
 
     /**