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';
  8
  9const useStyles = makeStyles(theme => ({
 10  author: {
 11    fontWeight: 'bold',
 12  },
 13  container: {
 14    display: 'flex',
 15  },
 16  avatar: {
 17    marginTop: 2,
 18  },
 19  bubble: {
 20    flex: 1,
 21    marginLeft: theme.spacing.unit,
 22  },
 23  header: {
 24    ...theme.typography.body2,
 25    color: '#444',
 26    padding: '0.5rem 1rem',
 27    borderBottom: '1px solid #ddd',
 28    display: 'flex',
 29  },
 30  title: {
 31    flex: 1,
 32  },
 33  tag: {
 34    ...theme.typography.button,
 35    color: '#888',
 36    border: '#ddd solid 1px',
 37    padding: '0 0.5rem',
 38    fontSize: '0.75rem',
 39    borderRadius: 2,
 40    marginLeft: '0.5rem',
 41  },
 42  body: {
 43    ...theme.typography.body1,
 44    padding: '1rem',
 45    whiteSpace: 'pre-wrap',
 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}>{op.message}</section>
 64      </Paper>
 65    </article>
 66  );
 67}
 68
 69Message.createFragment = gql`
 70  fragment Create on TimelineItem {
 71    ... on CreateTimelineItem {
 72      createdAt
 73      author {
 74        name
 75        email
 76        displayName
 77        avatarUrl
 78      }
 79      edited
 80      message
 81    }
 82  }
 83`;
 84
 85Message.commentFragment = gql`
 86  fragment AddComment on TimelineItem {
 87    ... on AddCommentTimelineItem {
 88      createdAt
 89      author {
 90        name
 91        email
 92        displayName
 93        avatarUrl
 94      }
 95      edited
 96      message
 97    }
 98  }
 99`;
100
101export default Message;