1import { makeStyles } from '@material-ui/styles';
 2import React from 'react';
 3import Author from '../Author';
 4import Date from '../Date';
 5import Label from '../Label';
 6
 7const useStyles = makeStyles(theme => ({
 8  main: {
 9    ...theme.typography.body1,
10    marginLeft: theme.spacing(1) + 40,
11  },
12  author: {
13    fontWeight: 'bold',
14  },
15}));
16
17function LabelChange({ op }) {
18  const { added, removed } = op;
19  const classes = useStyles();
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
42export default LabelChange;