Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Working avatars for comments but needs refactor

Browse source
This commit is contained in:
James Morris 2022-07-05 16:16:48 +01:00
parent 3161196554
commit 7493cda1a6
1 changed files with 36 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,58 +1,48 @@
import Avatar from './Avatar';
import {formatRelativeTime} from '../utils/helpers';
import {ReactComponent as MoreIcon} from '../images/icons/more.svg';
import React from 'react';
import AppContext from '../AppContext';
import AuthorContextMenu from './modals/AuthorContextMenu';
class Comment extends React.Component {
static contextType = AppContext;
function Comment(props) {
const comment = props.comment;
constructor(props) {
super(props);
this.state = {
isContextMenuOpen: false
};
const html = {__html: comment.html};
this.toggleContextMenu = this.toggleContextMenu.bind(this);
function getInitials() {
if (!comment.member || !comment.member.name) {
return '';
}
const parts = comment.member.name.split(' ');
if (parts.length === 0) {
return '';
}
if (parts.length === 1) {
return parts[0].substring(0, 1);
}
return parts[0].substring(0, 1) + parts[parts.length - 1].substring(0, 1);
}
toggleContextMenu() {
this.setState(state => ({
isContextMenuOpen: !state.isContextMenuOpen
}));
}
render() {
const comment = this.props.comment;
const html = {__html: comment.html};
return (
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<Avatar />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
return (
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<figure className="relative w-10 h-10">
<div className="flex justify-center items-center w-10 h-10 rounded-full bg-black">
<p className="text-white font-sans font-semibold">{ getInitials() }</p>
</div>
{/* <h6 className="text-sm text-neutral-400 font-sans">{comment.member.bio}</h6> */}
{/* <div className="text-sm text-neutral-400 font-sans font-normal">
{formatRelativeTime(comment.created_at)}
</div> */}
<img className="absolute top-0 left-0 w-10 h-10 rounded-full" src={comment.member.avatar_image} alt="Avatar"/>
</figure>
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
</div>
<div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
{/*</div>button><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
{this.state.isContextMenuOpen ? <AuthorContextMenu /> : null}*/}
</div>
<div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
</div>
);
}
</div>
);
}
export default Comment;