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 EditCommentForm from './EditCommentForm';
 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: comment }: Props) {
 76  const classes = useStyles();
 77  const [editMode, switchToEditMode] = useState(false);
 78
 79  const editComment = (id: String) => {
 80    switchToEditMode(true);
 81  };
 82
 83  function readMessageView() {
 84    return (
 85      <Paper elevation={1} className={classes.bubble}>
 86        <header className={classes.header}>
 87          <div className={classes.title}>
 88            <Author className={classes.author} author={comment.author} />
 89            <span> commented </span>
 90            <Date date={comment.createdAt} />
 91          </div>
 92          {comment.edited && <div className={classes.tag}>Edited</div>}
 93          <IfLoggedIn>
 94            {() => (
 95              <Tooltip title="Edit Message" placement="top" arrow={true}>
 96                <IconButton
 97                  disableRipple
 98                  className={classes.editButton}
 99                  aria-label="edit message"
100                  onClick={() => editComment(comment.id)}
101                >
102                  <EditIcon />
103                </IconButton>
104              </Tooltip>
105            )}
106          </IfLoggedIn>
107        </header>
108        <section className={classes.body}>
109          <Content markdown={comment.message} />
110        </section>
111      </Paper>
112    );
113  }
114
115  function editMessageView() {
116    const cancelEdition = () => {
117      switchToEditMode(false);
118    };
119
120    const onPostSubmit = (comments: AddCommentFragment | CreateFragment) => {
121      console.log('posted: ' + comments.message);
122      switchToEditMode(false);
123    };
124
125    return (
126      <div className={classes.bubble}>
127        <EditCommentForm
128          bug={bug}
129          onCancelClick={cancelEdition}
130          // Close edit view after submitted changes
131          onPostSubmit={onPostSubmit}
132          comment={comment}
133        />
134      </div>
135    );
136  }
137
138  return (
139    <article className={classes.container}>
140      <Avatar author={comment.author} className={classes.avatar} />
141      {editMode ? editMessageView() : readMessageView()}
142    </article>
143  );
144}
145
146export default Message;