import React, { useState } from 'react'; import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { makeStyles } from '@material-ui/core/styles'; import EditIcon from '@material-ui/icons/Edit'; import Author, { Avatar } from 'src/components/Author'; import Content from 'src/components/Content'; import Date from 'src/components/Date'; import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn'; import { BugFragment } from './Bug.generated'; import EditCommentForm from './EditCommentForm'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; const useStyles = makeStyles((theme) => ({ author: { fontWeight: 'bold', }, container: { display: 'flex', }, avatar: { marginTop: 2, }, bubble: { flex: 1, marginLeft: theme.spacing(1), minWidth: 0, }, header: { ...theme.typography.body1, padding: '0.5rem 1rem', borderBottom: `1px solid ${theme.palette.divider}`, display: 'flex', borderTopRightRadius: theme.shape.borderRadius, borderTopLeftRadius: theme.shape.borderRadius, backgroundColor: theme.palette.info.main, color: theme.palette.info.contrastText, }, title: { flex: 1, }, tag: { ...theme.typography.button, color: '#888', border: '#ddd solid 1px', padding: '0 0.5rem', fontSize: '0.75rem', borderRadius: 2, marginLeft: '0.5rem', }, body: { ...theme.typography.body2, padding: '0.5rem', }, editButton: { color: theme.palette.info.contrastText, padding: '0rem', fontSize: '0.75rem', '&:hover': { backgroundColor: 'inherit', }, }, })); type Props = { bug: BugFragment; op: AddCommentFragment | CreateFragment; }; function Message({ bug, op: comment }: Props) { const classes = useStyles(); const [editMode, switchToEditMode] = useState(false); const editComment = (id: String) => { switchToEditMode(true); console.log(id); }; function readMessageView() { return (
commented
{comment.edited &&
Edited
} {() => ( editComment(comment.id)} > )}
); } function editMessageView() { const cancelEdition = () => { switchToEditMode(false); }; return (
); } return (
{editMode ? editMessageView() : readMessageView()}
); } export default Message;