webui: convert bug view to TypeScript

ludovicm67 created

Change summary

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(-)

Detailed changes

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;

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
+    }
+  }
+}

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;

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;

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;

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
+        }
+      }
+    }
+  }
+}

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;