1import { withStyles } from '@material-ui/core/styles'
 2import Tooltip from '@material-ui/core/Tooltip/Tooltip'
 3import Typography from '@material-ui/core/Typography'
 4import gql from 'graphql-tag'
 5import * as moment from 'moment'
 6import React from 'react'
 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  author: {
18    ...theme.typography.body2,
19    fontWeight: 'bold'
20  },
21  message: {
22    borderLeft: '1px solid #d1d5da',
23    borderRight: '1px solid #d1d5da',
24    borderBottom: '1px solid #d1d5da',
25    borderBottomLeftRadius: 3,
26    borderBottomRightRadius: 3,
27    backgroundColor: '#fff',
28    minHeight: 50
29  }
30})
31
32const Message = ({message, classes}) => (
33  <div>
34    <div className={classes.header}>
35      <Tooltip title={message.author.email}>
36        <span className={classes.author}>{message.author.name}</span>
37      </Tooltip>
38      <span> commented </span>
39      <Tooltip title={moment(message.date).format('MMMM D, YYYY, h:mm a')}>
40        <span> {moment(message.date).fromNow()} </span>
41      </Tooltip>
42    </div>
43    <div className={classes.message}>
44      <Typography>{message.message}</Typography>
45    </div>
46  </div>
47)
48
49Message.createFragment = gql`
50  fragment Create on Operation {
51    ... on CreateOperation {
52      date
53      author {
54        name
55        email
56      }
57      message
58    }
59  }
60`
61
62Message.commentFragment = gql`
63  fragment Comment on Operation {
64    ... on AddCommentOperation {
65      date
66      author {
67        name
68        email
69      }
70      message
71    }
72  }
73`
74
75export default withStyles(styles)(Message)