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