1import { withStyles } from '@material-ui/core/styles';
 2import Typography from '@material-ui/core/Typography';
 3import gql from 'graphql-tag';
 4import React from 'react';
 5import Author from '../Author';
 6import Date from '../Date';
 7
 8const styles = theme => ({
 9  header: {
10    ...theme.typography.body2,
11    padding: '3px 3px 3px 6px',
12    backgroundColor: '#f1f8ff',
13    border: '1px solid #d1d5da',
14    borderTopLeftRadius: 3,
15    borderTopRightRadius: 3,
16  },
17  message: {
18    borderLeft: '1px solid #d1d5da',
19    borderRight: '1px solid #d1d5da',
20    borderBottom: '1px solid #d1d5da',
21    borderBottomLeftRadius: 3,
22    borderBottomRightRadius: 3,
23    backgroundColor: '#fff',
24    minHeight: 50,
25    padding: 5,
26    whiteSpace: 'pre-wrap',
27  },
28});
29
30const Message = ({ op, classes }) => (
31  <div>
32    <div className={classes.header}>
33      <Author className={classes.author} author={op.author} bold />
34      <span> commented </span>
35      <Date date={op.createdAt} />
36    </div>
37    <div className={classes.message}>
38      <Typography>{op.message}</Typography>
39    </div>
40  </div>
41);
42
43Message.createFragment = gql`
44  fragment Create on TimelineItem {
45    ... on CreateTimelineItem {
46      createdAt
47      author {
48        name
49        email
50        displayName
51      }
52      message
53    }
54  }
55`;
56
57Message.commentFragment = gql`
58  fragment AddComment on TimelineItem {
59    ... on AddCommentTimelineItem {
60      createdAt
61      author {
62        name
63        email
64        displayName
65      }
66      message
67    }
68  }
69`;
70
71export default withStyles(styles)(Message);