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 (
44        <Timeline
45          ops={data.defaultRepository.bug.operations.nodes}
46          fetchMore={fetchMore}
47        />
48      );
49    }}
50  </Query>
51);
52
53export default TimelineQuery;