webui: convert bug view to TypeScript

1 files changed, 18 insertions, 46 deletions

diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index ebb20f9d..0c9305b1 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -1,53 +1,25 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
-import gql from 'graphql-tag';
 import React from 'react';
-import { Query } from 'react-apollo';
-import LabelChange from './LabelChange';
-import SetStatus from './SetStatus';
-import SetTitle from './SetTitle';
 import Timeline from './Timeline';
-import Message from './Message';
 
-const QUERY = gql`
-  query($id: String!, $first: Int = 10, $after: String) {
-    defaultRepository {
-      bug(prefix: $id) {
-        timeline(first: $first, after: $after) {
-          nodes {
-            ...LabelChange
-            ...SetStatus
-            ...SetTitle
-            ...AddComment
-            ...Create
-          }
-          pageInfo {
-            hasNextPage
-            endCursor
-          }
-        }
-      }
-    }
-  }
-  ${Message.createFragment}
-  ${Message.commentFragment}
-  ${LabelChange.fragment}
-  ${SetTitle.fragment}
-  ${SetStatus.fragment}
-`;
+import { useTimelineQuery } from './TimelineQuery.generated';
 
-const TimelineQuery = ({ id }) => (
-  <Query query={QUERY} variables={{ id, first: 100 }}>
-    {({ loading, error, data, fetchMore }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return (
-        <Timeline
-          ops={data.defaultRepository.bug.timeline.nodes}
-          fetchMore={fetchMore}
-        />
-      );
-    }}
-  </Query>
-);
+const TimelineQuery = ({ id }) => {
+  const { loading, error, data, fetchMore } = useTimelineQuery({
+    variables: {
+      id,
+      first: 100,
+    },
+  });
+
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  return (
+    <Timeline
+      ops={data.defaultRepository.bug.timeline.nodes}
+      fetchMore={fetchMore}
+    />
+  );
+};
 
 export default TimelineQuery;