import React from 'react' ; import { ListItem } from 'react-native-elements' ; import { useStore } from '../../store/store' ; import useScreen from '../useScreen' ; import { BACKGROUND_SECONDARY , COLOR_SECONDARY } from '../../theme' ; import { Provider } from 'providers/types/Provider' ; interface Props { item : { id : string ; name : string ; available : boolean ; } ; componentId : string ; } export const ProviderListItem = ( { item , componentId } ) => { const [ { providerTokens } ] = useStore ( ) ; const { ProviderRegisterScreenPush , ProviderRegionScreenPush } = useScreen ( ) ; const getAccount = ( provider ) => { const token = providerTokens . filter ( ( t ) => t . provider === provider . id ) ; if ( token . length > 0 ) { return `connected as ${ token [ 0 ] . account ?. email }` ; } return null ; } ; const onPress = ( provider ) => { const token = providerTokens . filter ( ( t ) => t . provider === provider . id ) ; if ( token . length > 0 ) { ProviderRegionScreenPush ( componentId , provider ) ; } else { ProviderRegisterScreenPush ( { componentId , provider } ) ; } } ; if ( item . available ) { const account = getAccount ( item ) ; return ( < ListItem containerStyle = { { backgroundColor : BACKGROUND_SECONDARY } } bottomDivider onPress = { ( ) => onPress ( item ) } > < ListItem . Content > < ListItem . Title style = { { color : COLOR_SECONDARY } } > { item . name } < /ListItem.Title> { account && ( < ListItem . Subtitle style = { { opacity : 0.7 , color : COLOR_SECONDARY } } > { account } < /ListItem.Subtitle>)} < /ListItem.Content> < ListItem . Chevron / > < /ListItem>); } return < > < />; } ;