1import React from 'react';
 2
 3import CircularProgress from '@material-ui/core/CircularProgress';
 4
 5import Timeline from './Timeline';
 6import { useTimelineQuery } from './TimelineQuery.generated';
 7
 8type Props = {
 9  id: string;
10};
11
12const TimelineQuery = ({ id }: Props) => {
13  const { loading, error, data } = useTimelineQuery({
14    variables: {
15      id,
16      first: 100,
17    },
18  });
19
20  if (loading) return <CircularProgress />;
21  if (error) return <p>Error: {error}</p>;
22
23  const nodes = data?.repository?.bug?.timeline.nodes;
24  if (!nodes) {
25    return null;
26  }
27
28  return <Timeline ops={nodes} />;
29};
30
31export default TimelineQuery;