1import { withStyles } from '@material-ui/core/styles';
 2import gql from 'graphql-tag';
 3import React from 'react';
 4import Author from '../Author';
 5import Date from '../Date';
 6import Label from '../Label';
 7
 8const styles = theme => ({
 9  main: {
10    ...theme.typography.body2,
11    marginLeft: theme.spacing.unit + 40,
12  },
13  author: {
14    fontWeight: 'bold',
15  },
16});
17
18const LabelChange = ({ op, classes }) => {
19  const { added, removed } = op;
20  return (
21    <div className={classes.main}>
22      <Author author={op.author} className={classes.author} />
23      {added.length > 0 && <span> added the </span>}
24      {added.map((label, index) => (
25        <Label key={index} label={label} />
26      ))}
27      {added.length > 0 && removed.length > 0 && <span> and</span>}
28      {removed.length > 0 && <span> removed the </span>}
29      {removed.map((label, index) => (
30        <Label key={index} label={label} />
31      ))}
32      <span>
33        {' '}
34        label
35        {added.length + removed.length > 1 && 's'}{' '}
36      </span>
37      <Date date={op.date} />
38    </div>
39  );
40};
41
42LabelChange.fragment = gql`
43  fragment LabelChange on TimelineItem {
44    ... on LabelChangeTimelineItem {
45      date
46      author {
47        name
48        email
49        displayName
50      }
51      added
52      removed
53    }
54  }
55`;
56
57export default withStyles(styles)(LabelChange);