Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Moved to modern React syntax for More component

Browse source
This commit is contained in:
Simon Backx 2022-07-07 10:17:55 +02:00
parent 405c981131
commit 125afc5e23
2 changed files with 22 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/comments-ui/src/components/Comment.js
View file

@ -34,14 +34,6 @@ class Comment extends React.Component {
}));
}
/**
* Whether we have at least one action inside the context menu
* (to hide the 'more' icon if we don't have any actions)
*/
get hasMoreContextMenu() {
return (!!this.context.member && this.props.comment.status === 'published') || !!this.context.admin;
}
render() {
const comment = this.props.comment;
const hasReplies = comment.replies && comment.replies.length > 0;
@ -72,7 +64,7 @@ class Comment extends React.Component {
<div className="flex gap-6">
<Like comment={comment} />
<Reply comment={comment} />
<More comment={comment} show={this.hasMoreContextMenu} toggleEdit={this.toggleEditMode} />
<More comment={comment} toggleEdit={this.toggleEditMode} />
</div>
</div>
{hasReplies &&

49
apps/comments-ui/src/components/More.js
View file

@ -1,37 +1,30 @@
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import React, {useContext, useState} from 'react';
import CommentContextMenu from './modals/CommentContextMenu';
import AppContext from '../AppContext';
class More extends React.Component {
static contextType = AppContext;
const More = (props) => {
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const {member, admin} = useContext(AppContext);
constructor(props) {
super(props);
this.state = {
isContextMenuOpen: false
};
const toggleContextMenu = () => {
setIsContextMenuOpen(current => !current);
};
this.toggleContextMenu = this.toggleContextMenu.bind(this);
}
const comment = props.comment;
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
}
/*
* Whether we have at least one action inside the context menu
* (to hide the 'more' icon if we don't have any actions)
*/
const show = (!!member && comment.status === 'published') || !!admin;
render() {
const comment = this.props.comment;
const show = this.props.show;
return (
<div className="relative">
{show ? <button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} close={this.toggleContextMenu} toggleEdit={this.props.toggleEdit} /> : null}
</div>
);
}
}
return (
<div className="relative">
{show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
{isContextMenuOpen ? <CommentContextMenu comment={comment} close={toggleContextMenu} toggleEdit={props.toggleEdit} /> : null}
</div>
);
};
export default More;