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