1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { withStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import Chip from "@material-ui/core/Chip";
import CircularProgress from "@material-ui/core/CircularProgress";
import Typography from "@material-ui/core/Typography";
const styles = theme => ({
main: {
maxWidth: 600,
margin: "auto",
marginTop: theme.spacing.unit * 4
},
labelList: {
display: "flex",
flexWrap: "wrap",
marginTop: theme.spacing.unit
},
label: {
marginRight: theme.spacing.unit
},
summary: {
marginBottom: theme.spacing.unit * 2
},
comment: {
marginBottom: theme.spacing.unit
}
});
const QUERY = gql`
query GetBug($id: BugID!) {
bug(id: $id) {
id
title
status
labels
comments {
message
author {
name
email
}
}
}
}
`;
const Comment = withStyles(styles)(({ comment, classes }) => (
<Card className={classes.comment}>
<CardHeader
avatar={
<Avatar aria-label={comment.author.name}>
{comment.author.name[0].toUpperCase()}
</Avatar>
}
title={comment.author.name}
subheader={comment.author.email}
/>
<CardContent>
<Typography component="p">{comment.message}</Typography>
</CardContent>
</Card>
));
const BugView = withStyles(styles)(({ bug, classes }) => (
<main className={classes.main}>
<Card className={classes.summary}>
<CardContent>
<Typography variant="headline" component="h2">
{bug.title}
</Typography>
<Typography variant="subheading" component="h3" title={bug.id}>
#{bug.id.slice(0, 8)} • {bug.status.toUpperCase()}
</Typography>
<div className={classes.labelList}>
{bug.labels.map(label => (
<Chip key={label} label={label} className={classes.label} />
))}
</div>
</CardContent>
</Card>
{bug.comments.map((comment, index) => (
<Comment key={index} comment={comment} />
))}
</main>
));
const Bug = ({ match }) => (
<Query query={QUERY} variables={{ id: match.params.id }}>
{({ loading, error, data }) => {
if (loading) return <CircularProgress />;
if (error) return <p>Error.</p>;
return <BugView bug={data.bug} />;
}}
</Query>
);
export default Bug;
|
