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
 74  const editComment = (id: String) => {
 75    console.log(id);
 76  };
 77
 78  return (
 79    <article className={classes.container}>
 80      <Avatar author={op.author} className={classes.avatar} />
 81      <Paper elevation={1} className={classes.bubble}>
 82        <header className={classes.header}>
 83          <div className={classes.title}>
 84            <Author className={classes.author} author={op.author} />
 85            <span> commented </span>
 86            <Date date={op.createdAt} />
 87          </div>
 88          {op.edited && <div className={classes.tag}>Edited</div>}
 89          <Tooltip title="Edit Message" placement="top" arrow={true}>
 90            <IconButton
 91              disableRipple
 92              className={classes.editButton}
 93              aria-label="edit message"
 94              onClick={() => editComment(op.id)}
 95            >
 96              <EditIcon />
 97            </IconButton>
 98          </Tooltip>
 99        </header>
100        <section className={classes.body}>
101          <Content markdown={op.message} />
102        </section>
103      </Paper>
104    </article>
105  );
106}
107
108export default Message;