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