import * as React from 'react' ; import { connect } from 'react-redux' ; import { RootState , Dispatch , store } from './store' ; import { PlayerModel } from './models/players' ; import './index.css' ; import './switch.css' ; class App extends React . PureComponent < Props > { componentDidMount ( ) { const { players } = this . props ; players . getPlayers ( ) ; } componentDidUpdate ( ) { const { settingsState } = this . props ; const theme = settingsState . isLightThemeOn ? 'light' : 'dark' ; document . documentElement . setAttribute ( 'data-theme' , theme ) ; } checkTheme ( e ) { const { settings } = this . props ; if ( e . target . checked ) { settings . SET_THEME ( 'dark' ) ; } else { settings . SET_THEME ( 'light' ) ; } } render ( ) { const { settingsState , loadingState , playersState } = this . props ; return ( < div > < div style = { { display : 'flex' , width : '100%' , justifyContent : 'space-between' , } } > < h1 > NBA Class Players : < /h1> < div className = "theme-switch-wrapper" > < label className = "theme-switch" > < input checked = { ! settingsState . isLightThemeOn } onChange = { ( e ) => this . checkTheme ( e ) } type = "checkbox" id = "checkbox" / > < div className = "slider round" > < /div> < /label> < em > Enable Dark Mode ! < /em> < /div> < /div> < div className = "container" > { loadingState . models . players ? ( < div className = "loader" > Loading ... < /div>) : (playersState.players.map((player) => (<div key={player.id} className="card"> < h5 > { player . first_name } { player . last_name } < /h5> < div > < p > < b > Position : < /b> { player . position } < /p> < p > < b > Team : < /b> { player . team . full_name } < /p> < /div> < /div>)))} < /div> < /div>); } } const selection = store . select ( ( models ) => ( { subtotalSelector : models . cart . subTotalSelector , taxSelector : models . cart . taxSelector , totalSelector : models . cart . totalSelector , } ) ) ; const mapState = ( state ) => ( { settingsState : state . settings , loadingState : state . loading , playersState : state . players , ... selection ( state ) , } ) ; const mapDispatch = ( dispatch ) => ( { players : dispatch . players , settings : dispatch . settings , } ) ; type StateProps = ReturnType < typeof mapState > ; type DispatchProps = ReturnType < typeof mapDispatch > ; type Props = StateProps & DispatchProps ; export default connect ( mapState , mapDispatch ) ( App ) ;