TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-28 21:33:24 +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

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

@ -1,6 +1,5 @@
import {formatRelativeTime} from '../utils/helpers';
import React from 'react';
import AppContext from '../AppContext';
import React, {useState} from 'react';
import Avatar from './Avatar';
import Like from './Like';
import Reply from './Reply';
@ -8,74 +7,53 @@ import More from './More';
import EditForm from './EditForm';
import Replies from './Replies';
class Comment extends React.Component {
static contextType = AppContext;
const Comment = (props) => {
const [isInEditMode, setIsInEditMode] = useState(false);
constructor(props) {
super(props);
this.state = {
isContextMenuOpen: false,
isInEditMode: false
};
const toggleEditMode = () => {
setIsInEditMode(current => !current);
};
this.toggleContextMenu = this.toggleContextMenu.bind(this);
this.toggleEditMode = this.toggleEditMode.bind(this);
const comment = props.comment;
const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html};
if (comment.status !== 'published') {
html.__html = '<i>This comment has been removed.</i>';
}
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
if (isInEditMode) {
return (
<EditForm comment={comment} toggle={toggleEditMode} />
);
} else {
return (
<div className={`flex flex-col ${!hasReplies ? 'mb-14' : ''}`}>
<div>
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar comment={comment} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
</div>
<div className="mb-4 pr-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
<div className="flex gap-6">
<Like comment={comment} />
<Reply comment={comment} />
<More comment={comment} toggleEdit={toggleEditMode} />
</div>
</div>
{hasReplies &&
<div className="ml-14 mt-14">
<Replies replies={comment.replies} />
</div>
}
</div>
);
}
toggleEditMode() {
this.setState(state => ({
isInEditMode: !state.isInEditMode
}));
}
render() {
const comment = this.props.comment;
const hasReplies = comment.replies && comment.replies.length > 0;
const html = {__html: comment.html};
if (comment.status !== 'published') {
html.__html = '<i>This comment has been removed.</i>';
}
if (this.state.isInEditMode) {
return (
<EditForm comment={comment} toggle={this.toggleEditMode} />
);
} else {
return (
<div className={`flex flex-col ${!hasReplies ? 'mb-14' : ''}`}>
<div>
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar comment={comment} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
</div>
<div className="mb-4 pr-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
<div className="flex gap-6">
<Like comment={comment} />
<Reply comment={comment} />
<More comment={comment} toggleEdit={this.toggleEditMode} />
</div>
</div>
{hasReplies &&
<div className="ml-14 mt-14">
<Replies replies={comment.replies} />
</div>
}
</div>
);
}
}
}
};
export default Comment;