1import { makeStyles } from '@material-ui/styles';
  2import Paper from '@material-ui/core/Paper';
  3import gql from 'graphql-tag';
  4import React from 'react';
  5import Author from '../Author';
  6import { Avatar } from '../Author';
  7import Date from '../Date';
  8import Content from '../Content';
  9
 10const useStyles = makeStyles(theme => ({
 11  author: {
 12    fontWeight: 'bold',
 13  },
 14  container: {
 15    display: 'flex',
 16  },
 17  avatar: {
 18    marginTop: 2,
 19  },
 20  bubble: {
 21    flex: 1,
 22    marginLeft: theme.spacing.unit,
 23  },
 24  header: {
 25    ...theme.typography.body2,
 26    color: '#444',
 27    padding: '0.5rem 1rem',
 28    borderBottom: '1px solid #ddd',
 29    display: 'flex',
 30  },
 31  title: {
 32    flex: 1,
 33  },
 34  tag: {
 35    ...theme.typography.button,
 36    color: '#888',
 37    border: '#ddd solid 1px',
 38    padding: '0 0.5rem',
 39    fontSize: '0.75rem',
 40    borderRadius: 2,
 41    marginLeft: '0.5rem',
 42  },
 43  body: {
 44    ...theme.typography.body1,
 45    padding: '0 1rem',
 46  },
 47}));
 48
 49function Message({ op }) {
 50  const classes = useStyles();
 51  return (
 52    <article className={classes.container}>
 53      <Avatar author={op.author} className={classes.avatar} />
 54      <Paper elevation={1} className={classes.bubble}>
 55        <header className={classes.header}>
 56          <div className={classes.title}>
 57            <Author className={classes.author} author={op.author} />
 58            <span> commented </span>
 59            <Date date={op.createdAt} />
 60          </div>
 61          {op.edited && <div className={classes.tag}>Edited</div>}
 62        </header>
 63        <section className={classes.body}>
 64          <Content markdown={op.message} />
 65        </section>
 66      </Paper>
 67    </article>
 68  );
 69}
 70
 71Message.createFragment = gql`
 72  fragment Create on TimelineItem {
 73    ... on CreateTimelineItem {
 74      createdAt
 75      author {
 76        name
 77        email
 78        displayName
 79        avatarUrl
 80      }
 81      edited
 82      message
 83    }
 84  }
 85`;
 86
 87Message.commentFragment = gql`
 88  fragment AddComment on TimelineItem {
 89    ... on AddCommentTimelineItem {
 90      createdAt
 91      author {
 92        name
 93        email
 94        displayName
 95        avatarUrl
 96      }
 97      edited
 98      message
 99    }
100  }
101`;
102
103export default Message;