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  label: {
20    maxWidth: '50ch',
21    marginLeft: theme.spacing(0.25),
22    marginRight: theme.spacing(0.25),
23  },
24}));
25
26type Props = {
27  op: LabelChangeFragment;
28};
29
30function LabelChange({ op }: Props) {
31  const { added, removed } = op;
32  const classes = useStyles();
33  return (
34    <div className={classes.main}>
35      <Author author={op.author} className={classes.author} />
36      {added.length > 0 && <span> added the </span>}
37      {added.map((label, index) => (
38        <Label key={index} label={label} className={classes.label} />
39      ))}
40      {added.length > 0 && removed.length > 0 && <span> and</span>}
41      {removed.length > 0 && <span> removed the </span>}
42      {removed.map((label, index) => (
43        <Label key={index} label={label} className={classes.label} />
44      ))}
45      <span>
46        {' '}
47        label
48        {added.length + removed.length > 1 && 's'}{' '}
49      </span>
50      <Date date={op.date} />
51    </div>
52  );
53}
54
55export default LabelChange;