1import CircularProgress from '@material-ui/core/CircularProgress'
 2import gql from 'graphql-tag'
 3import React from 'react'
 4import { Query } from 'react-apollo'
 5import Timeline from './Timeline'
 6import Message from './Message'
 7
 8const QUERY = gql`
 9  query($id: String!, $first: Int = 10, $after: String) {
10    defaultRepository {
11      bug(prefix: $id) {
12        operations(first: $first, after: $after) {
13          nodes {
14            ...Create
15            ...Comment
16          }
17          pageInfo {
18            hasNextPage
19            endCursor
20          }
21        }
22      }
23    }
24  }
25  ${Message.createFragment}
26  ${Message.commentFragment}
27`
28
29const TimelineQuery = ({id}) => (
30  <Query query={QUERY} variables={{id}}>
31    {({loading, error, data, fetchMore}) => {
32      if (loading) return <CircularProgress/>
33      if (error) return <p>Error: {error}</p>
34      return <Timeline ops={data.defaultRepository.bug.operations.nodes} fetchMore={fetchMore}/>
35    }}
36  </Query>
37)
38
39export default TimelineQuery