1import React from 'react';
 2
 3import { makeStyles } from '@material-ui/core/styles';
 4
 5import Author from 'src/components/Author';
 6import Date from 'src/components/Date';
 7import Label from 'src/components/Label';
 8
 9import { LabelChangeFragment } from './LabelChangeFragment.generated';
10
11const useStyles = makeStyles((theme) => ({
12  main: {
13    ...theme.typography.body2,
14    marginLeft: theme.spacing(1) + 40,
15  },
16  author: {
17    fontWeight: 'bold',
18  },
19}));
20
21type Props = {
22  op: LabelChangeFragment;
23};
24
25function LabelChange({ op }: Props) {
26  const { added, removed } = op;
27  const classes = useStyles();
28  return (
29    <div className={classes.main}>
30      <Author author={op.author} className={classes.author} />
31      {added.length > 0 && <span> added the </span>}
32      {added.map((label, index) => (
33        <Label key={index} label={label} />
34      ))}
35      {added.length > 0 && removed.length > 0 && <span> and</span>}
36      {removed.length > 0 && <span> removed the </span>}
37      {removed.map((label, index) => (
38        <Label key={index} label={label} />
39      ))}
40      <span>
41        {' '}
42        label
43        {added.length + removed.length > 1 && 's'}{' '}
44      </span>
45      <Date date={op.date} />
46    </div>
47  );
48}
49
50export default LabelChange;