TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-29 22:01:49 +03:00
Code Issues Projects Releases Wiki Activity

Moved to modern React syntax for the Comment component

Browse Source
This commit is contained in:
Simon Backx 2022-07-07 10:42:03 +02:00
parent 17ae8d6985
commit 8a67716b17
1 changed files with 44 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/comments-ui/src/components/Comment.js
View File

@ -1,6 +1,5 @@
import {formatRelativeTime} from '../utils/helpers'; import {formatRelativeTime} from '../utils/helpers';
import React from 'react'; import React, {useState} from 'react';
import AppContext from '../AppContext';
import Avatar from './Avatar'; import Avatar from './Avatar';
import Like from './Like'; import Like from './Like';
import Reply from './Reply'; import Reply from './Reply';
@ -8,34 +7,14 @@ import More from './More';
import EditForm from './EditForm'; import EditForm from './EditForm';
import Replies from './Replies'; import Replies from './Replies';
class Comment extends React.Component { const Comment = (props) => {
static contextType = AppContext; const [isInEditMode, setIsInEditMode] = useState(false);
constructor(props) { const toggleEditMode = () => {
super(props); setIsInEditMode(current => !current);
this.state = {
isContextMenuOpen: false,
isInEditMode: false
}; };
this.toggleContextMenu = this.toggleContextMenu.bind(this); const comment = props.comment;
this.toggleEditMode = this.toggleEditMode.bind(this);
}
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
}
toggleEditMode() {
this.setState(state => ({
isInEditMode: !state.isInEditMode
}));
}
render() {
const comment = this.props.comment;
const hasReplies = comment.replies && comment.replies.length > 0; const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html}; const html = {__html: comment.html};
@ -43,9 +22,9 @@ class Comment extends React.Component {
html.__html = '<i>This comment has been removed.</i>'; html.__html = '<i>This comment has been removed.</i>';
} }
if (this.state.isInEditMode) { if (isInEditMode) {
return ( return (
<EditForm comment={comment} toggle={this.toggleEditMode} /> <EditForm comment={comment} toggle={toggleEditMode} />
); );
} else { } else {
return ( return (
@ -64,7 +43,7 @@ class Comment extends React.Component {
<div className="flex gap-6"> <div className="flex gap-6">
<Like comment={comment} /> <Like comment={comment} />
<Reply comment={comment} /> <Reply comment={comment} />
<More comment={comment} toggleEdit={this.toggleEditMode} /> <More comment={comment} toggleEdit={toggleEditMode} />
</div> </div>
</div> </div>
{hasReplies && {hasReplies &&
@ -75,7 +54,6 @@ class Comment extends React.Component {
</div> </div>
); );
} }
} };
}
export default Comment; export default Comment;