1import React from 'react';
  2
  3import IconButton from '@material-ui/core/IconButton';
  4import Paper from '@material-ui/core/Paper';
  5import Tooltip from '@material-ui/core/Tooltip/Tooltip';
  6import { makeStyles } from '@material-ui/core/styles';
  7import EditIcon from '@material-ui/icons/Edit';
  8
  9import Author, { Avatar } from 'src/components/Author';
 10import Content from 'src/components/Content';
 11import Date from 'src/components/Date';
 12
 13import { AddCommentFragment } from './MessageCommentFragment.generated';
 14import { CreateFragment } from './MessageCreateFragment.generated';
 15
 16const useStyles = makeStyles((theme) => ({
 17  author: {
 18    fontWeight: 'bold',
 19  },
 20  container: {
 21    display: 'flex',
 22  },
 23  avatar: {
 24    marginTop: 2,
 25  },
 26  bubble: {
 27    flex: 1,
 28    marginLeft: theme.spacing(1),
 29    minWidth: 0,
 30  },
 31  header: {
 32    ...theme.typography.body1,
 33    padding: '0.5rem 1rem',
 34    borderBottom: `1px solid ${theme.palette.divider}`,
 35    display: 'flex',
 36    borderTopRightRadius: theme.shape.borderRadius,
 37    borderTopLeftRadius: theme.shape.borderRadius,
 38    backgroundColor: theme.palette.info.main,
 39    color: theme.palette.info.contrastText,
 40  },
 41  title: {
 42    flex: 1,
 43  },
 44  tag: {
 45    ...theme.typography.button,
 46    color: '#888',
 47    border: '#ddd solid 1px',
 48    padding: '0 0.5rem',
 49    fontSize: '0.75rem',
 50    borderRadius: 2,
 51    marginLeft: '0.5rem',
 52  },
 53  body: {
 54    ...theme.typography.body2,
 55    padding: '0.5rem',
 56  },
 57  editButton: {
 58    color: theme.palette.info.contrastText,
 59    padding: '0rem',
 60    fontSize: '0.75rem',
 61    '&:hover': {
 62      backgroundColor: 'inherit',
 63    },
 64  },
 65}));
 66
 67type Props = {
 68  op: AddCommentFragment | CreateFragment;
 69};
 70
 71function Message({ op }: Props) {
 72  const classes = useStyles();
 73  return (
 74    <article className={classes.container}>
 75      <Avatar author={op.author} className={classes.avatar} />
 76      <Paper elevation={1} className={classes.bubble}>
 77        <header className={classes.header}>
 78          <div className={classes.title}>
 79            <Author className={classes.author} author={op.author} />
 80            <span> commented </span>
 81            <Date date={op.createdAt} />
 82          </div>
 83          {op.edited && <div className={classes.tag}>Edited</div>}
 84          <Tooltip title="Edit Message" placement="top" arrow={true}>
 85            <IconButton
 86              disableRipple
 87              className={classes.editButton}
 88              aria-label="edit message"
 89            >
 90              <EditIcon />
 91            </IconButton>
 92          </Tooltip>
 93        </header>
 94        <section className={classes.body}>
 95          <Content markdown={op.message} />
 96        </section>
 97      </Paper>
 98    </article>
 99  );
100}
101
102export default Message;