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

Removed extra comment box when in reply mode

Browse source 
refs https://github.com/TryGhost/Team/issues/1710

- keeps a single comment box when in reply mode, hiding the main comment box outside
This commit is contained in:
Rishabh 2022-07-26 22:55:01 +05:30
parent 843a79511f
commit b351e75feb
2 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, {useContext, useState} from 'react';
import React, {useContext, useEffect, useState} from 'react';
import {Transition} from '@headlessui/react';
import Avatar from './Avatar';
import Like from './Like';
@ -9,10 +9,12 @@ import Replies from './Replies';
import AppContext from '../AppContext';
import {formatRelativeTime} from '../utils/helpers';
const Comment = (props) => {
const Comment = ({updateIsInReplyMode = null, ...props}) => {
const [isInEditMode, setIsInEditMode] = useState(false);
const [isInReplyMode, setIsInReplyMode] = useState(false);
useEffect(() => {
updateIsInReplyMode?.(isInReplyMode);
}, [updateIsInReplyMode, isInReplyMode]);
const toggleEditMode = () => {
setIsInEditMode(current => !current);
};
@ -63,7 +65,7 @@ const Comment = (props) => {
<div className="mr-3">
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
</div>
{isNotPublished ?
{isNotPublished ?
<div>
<p className="font-sans text-[16px] leading-normal text-neutral-400 italic mt-[4px]">{notPublishedMessage}</p>
</div> :
@ -76,8 +78,8 @@ const Comment = (props) => {
</div>
</div>}
</div>
{!isNotPublished &&
{!isNotPublished &&
<div className={`ml-12 sm:ml-[52px] mb-2 pr-4 font-sans leading-normal text-neutral-900 dark:text-[rgba(255,255,255,0.85)]`}>
<p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16px] leading-normal"></p>
</div>}
@ -87,9 +89,9 @@ const Comment = (props) => {
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
<More comment={comment} toggleEdit={toggleEditMode} />
</div>
</div>
</div>
</div>
{hasReplies &&
{hasReplies &&
<div className="ml-11 sm:ml-14 mt-8 sm:mt-10 mb-4 sm:mb-0">
<Replies comment={comment} />
</div>

11
apps/comments-ui/src/components/CommentsBox.js
View file

@ -1,4 +1,4 @@
import React, {useContext} from 'react';
import React, {useContext, useState} from 'react';
import AppContext from '../AppContext';
import NotSignedInBox from './NotSignedInBox';
import Form from './Form';
@ -9,8 +9,10 @@ import NotPaidBox from './NotPaidBox';
import Loading from './Loading';
const CommentsBoxContent = (props) => {
const [isInReplyMode, setIsInReplyMode] = useState(false);
const {pagination, member, comments, commentsEnabled} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
const commentsElements = comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} updateIsInReplyMode={setIsInReplyMode} />);
const commentsCount = comments.length;
@ -25,7 +27,10 @@ const CommentsBoxContent = (props) => {
{commentsCount > 0 && commentsElements}
</div>
<div>
{ member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} /> }
{ !isInReplyMode
? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <NotPaidBox isFirst={commentsCount === 0} />) : <NotSignedInBox isFirst={commentsCount === 0} />)
: null
}
</div>
</>
);