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