import { messages } from '@client/i18n/messages/views/performance' ; import { messages as messagesSearch } from '@client/i18n/messages/views/search' ; import { goToTeamUserList } from '@client/navigation' ; import { IOfflineData , ILocation } from '@client/offline/reducer' ; import { getOfflineData } from '@client/offline/selectors' ; import { IStoreState } from '@client/store' ; import { SysAdminContentWrapper } from '@client/views/SysAdmin/SysAdminContentWrapper' ; import { Header } from '@client/views/SysAdmin/Performance/utils' ; import { ISearchLocation , LocationSearch } from '@opencrvs/components/lib/interface' ; import * as React from 'react' ; import { injectIntl , WrappedComponentProps } from 'react-intl' ; import { connect } from 'react-redux' ; import { RouteComponentProps } from 'react-router' ; interface BaseProps { goToTeamUserList : typeof goToTeamUserList ; } type Props = BaseProps & WrappedComponentProps & Pick < RouteComponentProps , 'history' > & { offlineResources : IOfflineData ; } ; interface State { selectedLocation : ISearchLocation | undefined ; } class TeamSearchComponent extends React . Component < Props , State > { constructor ( props ) { super ( props ) ; const historyState = props . history . location . state as any ; this . state = { selectedLocation : ( historyState && historyState . selectedLocation ) || undefined } ; } searchHandler = ( item ) => { this . setState ( { selectedLocation : item } ) ; } ; searchButtonHandler = ( ) => { this . state . selectedLocation && this . props . goToTeamUserList ( this . state . selectedLocation ) ; } ; render ( ) { const { intl , offlineResources } = this . props ; return ( < SysAdminContentWrapper > < Header > { intl . formatMessage ( messages . sysAdminTeamHomeHeader ) } < /Header> < LocationSearch selectedLocation = { this . state . selectedLocation } locationList = { Object . values ( offlineResources . offices ) . map ( ( location ) => { return { id : location . id , searchableText : location . name , displayLabel : location . name } ; } ) } searchHandler = { this . searchHandler } searchButtonHandler = { this . searchButtonHandler } errorMessage = { intl . formatMessage ( messagesSearch . locationNotFound ) } / > < /SysAdminContentWrapper>); } } function mapStateToProps ( state ) { return { offlineResources : getOfflineData ( state ) } ; } export const TeamSearch = connect ( mapStateToProps , { goToTeamUserList } ) ( injectIntl ( TeamSearchComponent ) ) ;