From a2721971ba82a6ba0e735bd06cf555a4c1bca84e Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 3 Feb 2020 23:08:26 +0100 Subject: webui: generate TS types for graphql queries --- webui/src/.gitignore | 2 + webui/src/Author.graphql | 8 ++++ webui/src/Author.js | 12 ----- webui/src/Label.graphql | 8 ++++ webui/src/Label.js | 12 ----- webui/src/bug/Bug.graphql | 14 ++++++ webui/src/bug/Bug.js | 104 ----------------------------------------- webui/src/bug/Bug.tsx | 92 ++++++++++++++++++++++++++++++++++++ webui/src/bug/BugQuery.graphql | 9 ++++ webui/src/bug/BugQuery.js | 30 ------------ webui/src/bug/BugQuery.tsx | 20 ++++++++ 11 files changed, 153 insertions(+), 158 deletions(-) create mode 100644 webui/src/Author.graphql create mode 100644 webui/src/Label.graphql create mode 100644 webui/src/bug/Bug.graphql delete mode 100644 webui/src/bug/Bug.js create mode 100644 webui/src/bug/Bug.tsx create mode 100644 webui/src/bug/BugQuery.graphql delete mode 100644 webui/src/bug/BugQuery.js create mode 100644 webui/src/bug/BugQuery.tsx (limited to 'webui/src') diff --git a/webui/src/.gitignore b/webui/src/.gitignore index 5134e469..52b71a15 100644 --- a/webui/src/.gitignore +++ b/webui/src/.gitignore @@ -1 +1,3 @@ fragmentTypes.js +gqlTypes.ts +*.generated.* diff --git a/webui/src/Author.graphql b/webui/src/Author.graphql new file mode 100644 index 00000000..76d66b91 --- /dev/null +++ b/webui/src/Author.graphql @@ -0,0 +1,8 @@ +fragment authored on Authored { + author { + name + email + displayName + avatarUrl + } +} diff --git a/webui/src/Author.js b/webui/src/Author.js index 237a7956..7bb1bf3c 100644 --- a/webui/src/Author.js +++ b/webui/src/Author.js @@ -1,4 +1,3 @@ -import gql from 'graphql-tag'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import MAvatar from '@material-ui/core/Avatar'; import React from 'react'; @@ -15,17 +14,6 @@ const Author = ({ author, ...props }) => { ); }; -Author.fragment = gql` - fragment authored on Authored { - author { - name - email - displayName - avatarUrl - } - } -`; - export const Avatar = ({ author, ...props }) => { if (author.avatarUrl) { return ; diff --git a/webui/src/Label.graphql b/webui/src/Label.graphql new file mode 100644 index 00000000..22522ada --- /dev/null +++ b/webui/src/Label.graphql @@ -0,0 +1,8 @@ +fragment Label on Label { + name + color { + R + G + B + } +} diff --git a/webui/src/Label.js b/webui/src/Label.js index e5b00b12..fdb8ed4d 100644 --- a/webui/src/Label.js +++ b/webui/src/Label.js @@ -1,5 +1,4 @@ import React from 'react'; -import gql from 'graphql-tag'; import { makeStyles } from '@material-ui/styles'; import { getContrastRatio, @@ -48,15 +47,4 @@ function Label({ label }) { ); } -Label.fragment = gql` - fragment Label on Label { - name - color { - R - G - B - } - } -`; - export default Label; diff --git a/webui/src/bug/Bug.graphql b/webui/src/bug/Bug.graphql new file mode 100644 index 00000000..112024aa --- /dev/null +++ b/webui/src/bug/Bug.graphql @@ -0,0 +1,14 @@ +#import "../Label.graphql" +#import "../Author.graphql" + +fragment Bug on Bug { + id + humanId + status + title + labels { + ...Label + } + createdAt + ...authored +} diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js deleted file mode 100644 index 5a159f0f..00000000 --- a/webui/src/bug/Bug.js +++ /dev/null @@ -1,104 +0,0 @@ -import { makeStyles } from '@material-ui/styles'; -import Typography from '@material-ui/core/Typography/Typography'; -import gql from 'graphql-tag'; -import React from 'react'; -import Author from '../Author'; -import Date from '../Date'; -import TimelineQuery from './TimelineQuery'; -import Label from '../Label'; - -const useStyles = makeStyles(theme => ({ - main: { - maxWidth: 800, - margin: 'auto', - marginTop: theme.spacing(4), - }, - header: { - marginLeft: theme.spacing(1) + 40, - }, - title: { - ...theme.typography.h5, - }, - id: { - ...theme.typography.subtitle1, - marginLeft: theme.spacing(1), - }, - container: { - display: 'flex', - marginBottom: theme.spacing(1), - }, - timeline: { - flex: 1, - marginTop: theme.spacing(2), - marginRight: theme.spacing(2), - minWidth: 0, - }, - sidebar: { - marginTop: theme.spacing(2), - flex: '0 0 200px', - }, - labelList: { - listStyle: 'none', - padding: 0, - margin: 0, - }, - label: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - '& > *': { - display: 'block', - }, - }, -})); - -function Bug({ bug }) { - const classes = useStyles(); - return ( -
-
- {bug.title} - {bug.humanId} - - - - {' opened this bug '} - - -
- -
-
- -
-
- Labels -
    - {bug.labels.map(l => ( -
  • -
    • - ))} -
-
-
-
- ); -} - -Bug.fragment = gql` - fragment Bug on Bug { - id - humanId - status - title - labels { - ...Label - } - createdAt - ...authored - } - ${Label.fragment} - ${Author.fragment} -`; - -export default Bug; diff --git a/webui/src/bug/Bug.tsx b/webui/src/bug/Bug.tsx new file mode 100644 index 00000000..75b6ffff --- /dev/null +++ b/webui/src/bug/Bug.tsx @@ -0,0 +1,92 @@ +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography/Typography'; +import React from 'react'; +import Author from '../Author'; +import Date from '../Date'; +import TimelineQuery from './TimelineQuery'; +import Label from '../Label'; +import { BugFragment } from './Bug.generated'; + +const useStyles = makeStyles(theme => ({ + main: { + maxWidth: 800, + margin: 'auto', + marginTop: theme.spacing(4), + }, + header: { + marginLeft: theme.spacing(1) + 40, + }, + title: { + ...theme.typography.h5, + }, + id: { + ...theme.typography.subtitle1, + marginLeft: theme.spacing(1), + }, + container: { + display: 'flex', + marginBottom: theme.spacing(1), + }, + timeline: { + flex: 1, + marginTop: theme.spacing(2), + marginRight: theme.spacing(2), + minWidth: 0, + }, + sidebar: { + marginTop: theme.spacing(2), + flex: '0 0 200px', + }, + labelList: { + listStyle: 'none', + padding: 0, + margin: 0, + }, + label: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + '& > *': { + display: 'block', + }, + }, +})); + +type Props = { + bug: BugFragment +}; + +function Bug({ bug }: Props) { + const classes = useStyles(); + return ( +
+
+ {bug.title} + {bug.humanId} + + + + {' opened this bug '} + + +
+ +
+
+ +
+
+ Labels +
    + {bug.labels.map(l => ( +
  • +
    • + ))} +
+
+
+
+ ); +} + +export default Bug; diff --git a/webui/src/bug/BugQuery.graphql b/webui/src/bug/BugQuery.graphql new file mode 100644 index 00000000..caa247ed --- /dev/null +++ b/webui/src/bug/BugQuery.graphql @@ -0,0 +1,9 @@ +#import "./Bug.graphql" + +query GetBug($id: String!) { + defaultRepository { + bug(prefix: $id) { + ...Bug + } + } +} diff --git a/webui/src/bug/BugQuery.js b/webui/src/bug/BugQuery.js deleted file mode 100644 index dbf24c31..00000000 --- a/webui/src/bug/BugQuery.js +++ /dev/null @@ -1,30 +0,0 @@ -import CircularProgress from '@material-ui/core/CircularProgress'; -import gql from 'graphql-tag'; -import React from 'react'; -import { Query } from 'react-apollo'; - -import Bug from './Bug'; - -const QUERY = gql` - query GetBug($id: String!) { - defaultRepository { - bug(prefix: $id) { - ...Bug - } - } - } - - ${Bug.fragment} -`; - -const BugQuery = ({ match }) => ( - - {({ loading, error, data }) => { - if (loading) return ; - if (error) return

Error: {error}

; - return ; - }} - -); - -export default BugQuery; diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx new file mode 100644 index 00000000..6bf525e6 --- /dev/null +++ b/webui/src/bug/BugQuery.tsx @@ -0,0 +1,20 @@ +import CircularProgress from '@material-ui/core/CircularProgress'; +import React from 'react'; +import { RouteComponentProps } from 'react-router-dom'; + +import { useGetBugQuery } from './BugQuery.generated'; +import Bug from './Bug'; + +type Props = RouteComponentProps<{ + id: string +}>; + +const BugQuery: React.FC = ({ match }: Props) => { + const { loading, error, data } = useGetBugQuery({ variables: { id: match.params.id } }); + if (loading) return ; + if (error) return

Error: {error}

; + if (!data?.defaultRepository?.bug) return

404.

; + return ; +}; + +export default BugQuery; -- cgit