TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 20:34:02 +03:00
Code Issues Projects Releases Wiki Activity

Updated to show only single edit box at one time

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

- if a user is already editing/replying a comment, we shouldn't show other text boxes they can edit as it can be generally confusing
This commit is contained in:
Rishabh 2022-07-27 14:35:59 +05:30
parent 00f2d455da
commit c1961b30dd
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,12 +9,23 @@ import Replies from './Replies';
import AppContext from '../AppContext';
import {formatRelativeTime} from '../utils/helpers';
const Comment = ({updateIsInReplyMode = null, ...props}) => {
function EditedInfo({comment}) {
if (!comment.edited_at) {
return null;
}
return (
<div>
<span className="mx-[0.3em]">·</span>Edited
</div>
);
}
const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
const [isInEditMode, setIsInEditMode] = useState(false);
const [isInReplyMode, setIsInReplyMode] = useState(false);
useEffect(() => {
updateIsInReplyMode?.(isInReplyMode);
}, [updateIsInReplyMode, isInReplyMode]);
updateIsEditing?.(isInReplyMode || isInEditMode);
}, [updateIsEditing, isInReplyMode, isInEditMode]);
const toggleEditMode = () => {
setIsInEditMode(current => !current);
};
@ -74,7 +85,7 @@ const Comment = ({updateIsInReplyMode = null, ...props}) => {
<div className="flex items-baseline font-sans font-semibold text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{comment.member.bio && <div>{comment.member.bio}<span className="mx-[0.3em]">·</span></div>}
<div>{formatRelativeTime(comment.created_at)}</div>
<div><span className="mx-[0.3em]">·</span>Edited</div>
<EditedInfo comment={comment} />
</div>
</div>}
</div>
@ -86,7 +97,7 @@ const Comment = ({updateIsInReplyMode = null, ...props}) => {
<div className="ml-12 sm:ml-[52px] flex gap-5 items-center">
{!isNotPublished && <Like comment={comment} />}
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
{!isNotPublished && (canReply && (isNotPublished || !props.parent) && <Reply disabled={!!isEditing} comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />)}
<More comment={comment} toggleEdit={toggleEditMode} />
</div>
</div>

6
apps/comments-ui/src/components/CommentsBox.js
View File

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

2
apps/comments-ui/src/components/Reply.js
View File

@ -11,7 +11,7 @@ function Reply(props) {
};
return member ?
(<button className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onMouseDown={preventDefault} onClick={props.toggleReply}>
(<button disabled={!!props.disabled} className={`group transition-all duration-50 ease-linear flex font-sans items-center text-sm outline-0 ${props.isReplying ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)] hover:text-neutral-600'}`} onMouseDown={preventDefault} onClick={props.toggleReply}>
<ReplyIcon className={`mr-[6px] ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)] group-hover:stroke-neutral-600'} transition duration-50 ease-linear`} />Reply
</button>) : null;
}