1import { makeStyles } from '@material-ui/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';
 8import Content from '../Content';
 9
10const useStyles = makeStyles(theme => ({
11  author: {
12    fontWeight: 'bold',
13  },
14  container: {
15    display: 'flex',
16  },
17  avatar: {
18    marginTop: 2,
19  },
20  bubble: {
21    flex: 1,
22    marginLeft: theme.spacing(1),
23    minWidth: 0,
24  },
25  header: {
26    ...theme.typography.body1,
27    color: '#444',
28    padding: '0.5rem 1rem',
29    borderBottom: '1px solid #ddd',
30    display: 'flex',
31  },
32  title: {
33    flex: 1,
34  },
35  tag: {
36    ...theme.typography.button,
37    color: '#888',
38    border: '#ddd solid 1px',
39    padding: '0 0.5rem',
40    fontSize: '0.75rem',
41    borderRadius: 2,
42    marginLeft: '0.5rem',
43  },
44  body: {
45    ...theme.typography.body2,
46    padding: '0 1rem',
47  },
48}));
49
50function Message({ op }) {
51  const classes = useStyles();
52  return (
53    <article className={classes.container}>
54      <Avatar author={op.author} className={classes.avatar} />
55      <Paper elevation={1} className={classes.bubble}>
56        <header className={classes.header}>
57          <div className={classes.title}>
58            <Author className={classes.author} author={op.author} />
59            <span> commented </span>
60            <Date date={op.createdAt} />
61          </div>
62          {op.edited && <div className={classes.tag}>Edited</div>}
63        </header>
64        <section className={classes.body}>
65          <Content markdown={op.message} />
66        </section>
67      </Paper>
68    </article>
69  );
70}
71
72Message.createFragment = gql`
73  fragment Create on TimelineItem {
74    ... on CreateTimelineItem {
75      createdAt
76      ...authored
77      edited
78      message
79    }
80  }
81
82  ${Author.fragment}
83`;
84
85Message.commentFragment = gql`
86  fragment AddComment on TimelineItem {
87    ... on AddCommentTimelineItem {
88      createdAt
89      ...authored
90      edited
91      message
92    }
93  }
94
95  ${Author.fragment}
96`;
97
98export default Message;