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  },
12});
13
14const LabelChange = ({ op, classes }) => {
15  const { added, removed } = op;
16  return (
17    <div className={classes.main}>
18      <Author author={op.author} bold />
19      {added.length > 0 && <span> added the </span>}
20      {added.map((label, index) => (
21        <Label key={index} label={label} />
22      ))}
23      {added.length > 0 && removed.length > 0 && <span> and</span>}
24      {removed.length > 0 && <span> removed the </span>}
25      {removed.map((label, index) => (
26        <Label key={index} label={label} />
27      ))}
28      <span>
29        {' '}
30        label
31        {added.length + removed.length > 1 && 's'}{' '}
32      </span>
33      <Date date={op.date} />
34    </div>
35  );
36};
37
38LabelChange.fragment = gql`
39  fragment LabelChange on TimelineItem {
40    ... on LabelChangeTimelineItem {
41      date
42      author {
43        name
44        email
45        displayName
46      }
47      added
48      removed
49    }
50  }
51`;
52
53export default withStyles(styles)(LabelChange);