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