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