import { useQuery } from '@apollo/react-hooks' ; import React , { useEffect , useState } from 'react' ; import { LATEST_SESSION_QUERY } from '../../../../util/graphql' ; import HeaderItem from '../HeaderItem' ; import { SessionHead } from '../types' ; interface Props { inverted ? : boolean ; } const SessionHeader = ( props ) : React . ReactElement => { const { inverted = false } = props ; const queryData = useQuery ( LATEST_SESSION_QUERY ) ; const [ sessionHead , setSessionHead ] = useState < SessionHead > ( ) ; useEffect ( ( ) => { if ( queryData && queryData . data ) { const { data : { sessions } , } = queryData ; setSessionHead ( { index : sessions [ 0 ] . index , } ) ; } } , [ queryData ] ) ; return ( < HeaderItem inverted = { inverted } title = 'Session' value = { sessionHead ?. index . toString ( ) || 'fetching...' } / > ) ; } ; export default SessionHeader ;