1import React, { useState } from 'react';
  2
  3import IconButton from '@material-ui/core/IconButton';
  4import Paper from '@material-ui/core/Paper';
  5import Tooltip from '@material-ui/core/Tooltip/Tooltip';
  6import { makeStyles } from '@material-ui/core/styles';
  7import EditIcon from '@material-ui/icons/Edit';
  8
  9import Author, { Avatar } from 'src/components/Author';
 10import Content from 'src/components/Content';
 11import Date from 'src/components/Date';
 12import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 13
 14import { BugFragment } from './Bug.generated';
 15import CommentForm from './CommentForm';
 16import { AddCommentFragment } from './MessageCommentFragment.generated';
 17import { CreateFragment } from './MessageCreateFragment.generated';
 18
 19const useStyles = makeStyles((theme) => ({
 20  author: {
 21    fontWeight: 'bold',
 22  },
 23  container: {
 24    display: 'flex',
 25  },
 26  avatar: {
 27    marginTop: 2,
 28  },
 29  bubble: {
 30    flex: 1,
 31    marginLeft: theme.spacing(1),
 32    minWidth: 0,
 33  },
 34  header: {
 35    ...theme.typography.body1,
 36    padding: '0.5rem 1rem',
 37    borderBottom: `1px solid ${theme.palette.divider}`,
 38    display: 'flex',
 39    borderTopRightRadius: theme.shape.borderRadius,
 40    borderTopLeftRadius: theme.shape.borderRadius,
 41    backgroundColor: theme.palette.info.main,
 42    color: theme.palette.info.contrastText,
 43  },
 44  title: {
 45    flex: 1,
 46  },
 47  tag: {
 48    ...theme.typography.button,
 49    color: '#888',
 50    border: '#ddd solid 1px',
 51    padding: '0 0.5rem',
 52    fontSize: '0.75rem',
 53    borderRadius: 2,
 54    marginLeft: '0.5rem',
 55  },
 56  body: {
 57    ...theme.typography.body2,
 58    padding: '0.5rem',
 59  },
 60  editButton: {
 61    color: theme.palette.info.contrastText,
 62    padding: '0rem',
 63    fontSize: '0.75rem',
 64    '&:hover': {
 65      backgroundColor: 'inherit',
 66    },
 67  },
 68}));
 69
 70type Props = {
 71  bug: BugFragment;
 72  op: AddCommentFragment | CreateFragment;
 73};
 74
 75function Message({ bug, op }: Props) {
 76  const classes = useStyles();
 77  const [editMode, switchToEditMode] = useState(false);
 78
 79  const editComment = (id: String) => {
 80    switchToEditMode(true);
 81    console.log(id);
 82  };
 83
 84  function readMessageView() {
 85    return (
 86      <Paper elevation={1} className={classes.bubble}>
 87        <header className={classes.header}>
 88          <div className={classes.title}>
 89            <Author className={classes.author} author={op.author} />
 90            <span> commented </span>
 91            <Date date={op.createdAt} />
 92          </div>
 93          {op.edited && <div className={classes.tag}>Edited</div>}
 94          <IfLoggedIn>
 95            {() => (
 96              <Tooltip title="Edit Message" placement="top" arrow={true}>
 97                <IconButton
 98                  disableRipple
 99                  className={classes.editButton}
100                  aria-label="edit message"
101                  onClick={() => editComment(op.id)}
102                >
103                  <EditIcon />
104                </IconButton>
105              </Tooltip>
106            )}
107          </IfLoggedIn>
108        </header>
109        <section className={classes.body}>
110          <Content markdown={op.message} />
111        </section>
112      </Paper>
113    );
114  }
115
116  function editMessageView() {
117    return (
118      <div className={classes.bubble}>
119        <CommentForm bug={bug} />
120      </div>
121    );
122  }
123
124  return (
125    <article className={classes.container}>
126      <Avatar author={op.author} className={classes.avatar} />
127      {editMode ? editMessageView() : readMessageView()}
128    </article>
129  );
130}
131
132export default Message;