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