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 {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,74 +7,53 @@ 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); 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() { if (isInEditMode) {
this.setState(state => ({ return (
isContextMenuOpen: !state.isContextMenuOpen <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; export default Comment;