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  }
27})
28
29const Message = ({op, classes}) => (
30  <div>
31    <div className={classes.header}>
32      <Author className={classes.author} author={op.author} bold />
33      <span> commented </span>
34      <Date date={op.date} />
35    </div>
36    <div className={classes.message}>
37      <Typography>{op.message}</Typography>
38    </div>
39  </div>
40)
41
42Message.createFragment = gql`
43  fragment Create on Operation {
44    ... on CreateOperation {
45      date
46      author {
47        name
48        email
49      }
50      message
51    }
52  }
53`
54
55Message.commentFragment = gql`
56  fragment Comment on Operation {
57    ... on AddCommentOperation {
58      date
59      author {
60        name
61        email
62      }
63      message
64    }
65  }
66`
67
68export default withStyles(styles)(Message)