From 9c570cac725fe7048ddd1d181b33b8fa1808e401 Mon Sep 17 00:00:00 2001
From: ludovicm67 <ludovicmuller1@gmail.com>
Date: Mon, 3 Feb 2020 23:35:48 +0100
Subject: [PATCH] webui: convert bug view to TypeScript

---
 webui/src/bug/LabelChange.js                 | 19 ------
 webui/src/bug/LabelChangeFragment.graphql    | 15 +++++
 webui/src/bug/Message.js                     | 27 ---------
 webui/src/bug/MessageCommentFragment.graphql | 10 +++
 webui/src/bug/MessageCreateFragment.graphql  | 10 +++
 webui/src/bug/SetStatus.js                   | 13 ----
 webui/src/bug/SetStatusFragment.graphql      |  9 +++
 webui/src/bug/SetTitle.js                    | 14 -----
 webui/src/bug/SetTitleFragment.graphql       | 10 +++
 webui/src/bug/TimelineQuery.graphql          | 25 ++++++++
 webui/src/bug/TimelineQuery.js               | 64 ++++++--------------
 11 files changed, 97 insertions(+), 119 deletions(-)
 create mode 100644 webui/src/bug/LabelChangeFragment.graphql
 create mode 100644 webui/src/bug/MessageCommentFragment.graphql
 create mode 100644 webui/src/bug/MessageCreateFragment.graphql
 create mode 100644 webui/src/bug/SetStatusFragment.graphql
 create mode 100644 webui/src/bug/SetTitleFragment.graphql
 create mode 100644 webui/src/bug/TimelineQuery.graphql

diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 4773e7eb5097727e5063f649883c02bc28d0788c..df8ab0a5b9bd38c130066b7f83219a9559d3c1dd 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -40,22 +39,4 @@ function LabelChange({ op }) {
   );
 }
 
-LabelChange.fragment = gql`
-  fragment LabelChange on TimelineItem {
-    ... on LabelChangeTimelineItem {
-      date
-      ...authored
-      added {
-        ...Label
-      }
-      removed {
-        ...Label
-      }
-    }
-  }
-
-  ${Label.fragment}
-  ${Author.fragment}
-`;
-
 export default LabelChange;
diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..07b1d351619d9ccde47a68c836b25046662deb71
--- /dev/null
+++ b/webui/src/bug/LabelChangeFragment.graphql
@@ -0,0 +1,15 @@
+#import "../Author.graphql"
+#import "../Label.graphql"
+
+fragment LabelChange on TimelineItem {
+  ... on LabelChangeTimelineItem {
+    date
+    ...authored
+    added {
+      ...Label
+    }
+    removed {
+      ...Label
+    }
+  }
+}
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 06c12815022b2390b663a1a67475b72e34bf0d0a..4c22745f540f2593b5f9dda63a1f239c2be70295 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/styles';
 import Paper from '@material-ui/core/Paper';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import { Avatar } from '../Author';
@@ -69,30 +68,4 @@ function Message({ op }) {
   );
 }
 
-Message.createFragment = gql`
-  fragment Create on TimelineItem {
-    ... on CreateTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
-Message.commentFragment = gql`
-  fragment AddComment on TimelineItem {
-    ... on AddCommentTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default Message;
diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..83cc9f613ea013e628c117f9e24f25db8febf0fa
--- /dev/null
+++ b/webui/src/bug/MessageCommentFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment AddComment on TimelineItem {
+  ... on AddCommentTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..e753444ffbc4db55b525eb35b9c140e35139a78e
--- /dev/null
+++ b/webui/src/bug/MessageCreateFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment Create on TimelineItem {
+  ... on CreateTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index 070bbb8f20987143e132fa7b4991ef22bdc83574..eb7f5bfea3ff65b38849dd70290a5d59c7aa2ec2 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -22,16 +21,4 @@ function SetStatus({ op }) {
   );
 }
 
-SetStatus.fragment = gql`
-  fragment SetStatus on TimelineItem {
-    ... on SetStatusTimelineItem {
-      date
-      ...authored
-      status
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetStatus;
diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..56e22c2b065d0456465953f7bddd61f37217dccd
--- /dev/null
+++ b/webui/src/bug/SetStatusFragment.graphql
@@ -0,0 +1,9 @@
+#import "../Author.graphql"
+
+fragment SetStatus on TimelineItem {
+  ... on SetStatusTimelineItem {
+    date
+    ...authored
+    status
+  }
+}
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index e4c30a8d832677cc8ce996034a01b2ae8bba7d65..b20ed9ca69745537452997b57874677f74c9a171 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -28,17 +27,4 @@ function SetTitle({ op }) {
   );
 }
 
-SetTitle.fragment = gql`
-  fragment SetTitle on TimelineItem {
-    ... on SetTitleTimelineItem {
-      date
-      ...authored
-      title
-      was
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetTitle;
diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..a15c3eb3138a932ecb1ef9948e47970e647ed12b
--- /dev/null
+++ b/webui/src/bug/SetTitleFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment SetTitle on TimelineItem {
+  ... on SetTitleTimelineItem {
+    date
+    ...authored
+    title
+    was
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..7a8bc7368b00e7140c65d32d4aa35588a162d7ea
--- /dev/null
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -0,0 +1,25 @@
+#import "./MessageCreateFragment.graphql"
+#import "./MessageCommentFragment.graphql"
+#import "./LabelChangeFragment.graphql"
+#import "./SetTitleFragment.graphql"
+#import "./SetStatusFragment.graphql"
+
+query Timeline($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
+        }
+      }
+    }
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index ebb20f9d478c428d48925e541b92536ab9cf0b7e..0c9305b1f497f1cdb3990b6cedb891760be983ce 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;