1import { withStyles } from '@material-ui/core/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 styles = 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
49const Message = ({ op, classes }) => (
50  <article className={classes.container}>
51    <Avatar author={op.author} className={classes.avatar} />
52    <Paper elevation={1} className={classes.bubble}>
53      <header className={classes.header}>
54        <div className={classes.title}>
55          <Author className={classes.author} author={op.author} />
56          <span> commented </span>
57          <Date date={op.createdAt} />
58        </div>
59        {op.edited && <div className={classes.tag}>Edited</div>}
60      </header>
61      <section className={classes.body}>{op.message}</section>
62    </Paper>
63  </article>
64);
65
66Message.createFragment = gql`
67  fragment Create on TimelineItem {
68    ... on CreateTimelineItem {
69      createdAt
70      author {
71        name
72        email
73        displayName
74        avatarUrl
75      }
76      edited
77      message
78    }
79  }
80`;
81
82Message.commentFragment = gql`
83  fragment AddComment on TimelineItem {
84    ... on AddCommentTimelineItem {
85      createdAt
86      author {
87        name
88        email
89        displayName
90        avatarUrl
91      }
92      edited
93      message
94    }
95  }
96`;
97
98export default withStyles(styles)(Message);