Display comment form on edit click

This commit is contained in:
Sascha 2021-03-17 13:04:24 +01:00
parent d82c481e00
commit 2483b27296

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import IconButton from '@material-ui/core/IconButton';
import Paper from '@material-ui/core/Paper';
@ -74,14 +74,15 @@ type Props = {
function Message({ bug, op }: Props) {
const classes = useStyles();
const [editMode, switchToEditMode] = useState(false);
const editComment = (id: String) => {
switchToEditMode(true);
console.log(id);
};
function readMessageView() {
return (
<article className={classes.container}>
<Avatar author={op.author} className={classes.avatar} />
<Paper elevation={1} className={classes.bubble}>
<header className={classes.header}>
<div className={classes.title}>
@ -90,6 +91,8 @@ function Message({ bug, op }: Props) {
<Date date={op.createdAt} />
</div>
{op.edited && <div className={classes.tag}>Edited</div>}
<IfLoggedIn>
{() => (
<Tooltip title="Edit Message" placement="top" arrow={true}>
<IconButton
disableRipple
@ -100,18 +103,28 @@ function Message({ bug, op }: Props) {
<EditIcon />
</IconButton>
</Tooltip>
)}
</IfLoggedIn>
</header>
<section className={classes.body}>
<Content markdown={op.message} />
</section>
</Paper>
<IfLoggedIn>
{() => (
<div>
);
}
function editMessageView() {
return (
<div className={classes.bubble}>
<CommentForm bug={bug} />
</div>
)}
</IfLoggedIn>
);
}
return (
<article className={classes.container}>
<Avatar author={op.author} className={classes.avatar} />
{editMode ? editMessageView() : readMessageView()}
</article>
);
}