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.date} />
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 Operation {
45    ... on CreateOperation {
46      date
47      author {
48        name
49        email
50      }
51      message
52    }
53  }
54`
55
56Message.commentFragment = gql`
57  fragment Comment on Operation {
58    ... on AddCommentOperation {
59      date
60      author {
61        name
62        email
63      }
64      message
65    }
66  }
67`
68
69export default withStyles(styles)(Message)