import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch , AnyAction } from 'redux' ; import Account from '../../model/Account' ; import Sex from '../../model/enums/Sex' ; import localization from '../../model/resources/localization' ; import runActionCreators from '../../state/run/runActionCreators' ; import State from '../../state/State' ; import './PersonView.css' ; interface PersonViewProps { account : Account ; selectedPersonName : string | null ; login : string ; hostName : string | null ; selectPerson : ( name : string ) => void ; } const mapStateToProps = ( state ) => ( { selectedPersonName : state . run . chat . selectedPersonName , login : state . user . login , hostName : state . run . persons . hostName } ) ; const mapDispatchToProps = ( dispatch ) => ( { selectPerson : ( name ) => { dispatch ( runActionCreators . chatPersonSelected ( name ) ) ; } } ) ; export function PersonView ( props ) { const isActive = props . account . name === props . selectedPersonName ; const isMe = props . account . name === props . login ; const isHost = props . account . name === props . hostName ; const humanImage = props . account . sex === Sex . Male ? '🧑' : '👩' ; return ( < li className = { `personItem ${ isActive ? 'active ' : '' } ${ isMe ? 'me' : '' }` } onClick = { ( ) => props . selectPerson ( props . account . name ) } > < span title = { props . account . isHuman ? localization . human : localization . computer } > { props . account . isHuman ? humanImage : '🖥️' } < /span> < div className = "personItem_avatar" style = { { backgroundImage : props . account . avatar ? `url(${ props . account . avatar })` : undefined } } /> < span > { props . account . name } < /span> { isHost ? ( < span className = "personItem_host" role = "img" aria - label = "star" title = { localization . host } > ⭐ < /span>) : null} < /li>); } export default connect ( mapStateToProps , mapDispatchToProps ) ( PersonView ) ;