import { useQuery , useSubscription } from '@apollo/react-hooks' ; import { ApiRxContext } from '@substrate/context' ; import React , { useContext , useEffect , useState } from 'react' ; import { ERAS_SUBSCRIPTION , LATEST_ERA_QUERY } from '../../../../util/graphql' ; import HeaderItem from '../HeaderItem' ; import { EraHead } from '../types' ; interface Props { inverted ? : boolean ; } const EraHeader = ( props ) : React . ReactElement => { const { inverted } = props ; const { api } = useContext ( ApiRxContext ) ; const { data } = useSubscription ( ERAS_SUBSCRIPTION ) ; const queryData = useQuery ( LATEST_ERA_QUERY ) ; const [ eraHead , setEraHead ] = useState < EraHead > ( ) ; useEffect ( ( ) => { if ( data ) { const { subscribeEras : { index , individualPoints , totalPoints } , } = data ; if ( ! eraHead || index > eraHead . index ) { setEraHead ( { index , individualPoints , totalPoints , } ) ; } } } , [ data , eraHead ] ) ; useEffect ( ( ) => { if ( queryData && queryData . data ) { const { data : { eras } , } = queryData ; setEraHead ( { index : eras [ 0 ] . index , individualPoints : eras [ 0 ] . individualPoints , totalPoints : api . createType ( 'Points' , eras [ 0 ] . totalPoints ) , } ) ; } } , [ api , queryData ] ) ; return ( < HeaderItem inverted = { inverted } title = 'Era Index:' subtitle = { `total points: ${ eraHead ? eraHead . totalPoints . toString ( ) : 'fetching....' }` } value = { eraHead ? eraHead . index . toString ( ) : 'fetching....' } / > ) ; } ; export default EraHeader ;