fix(pending post): "[Reply]" button and post menu shouldn't be clickable

This commit is contained in:
Tom (plebeius.eth)
2024-08-29 14:25:47 +02:00
parent cdee29e94f
commit 0cb386cf66
3 changed files with 19 additions and 4 deletions
@@ -184,6 +184,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
[
<Link
to={isInAllView && isDescription ? '/p/all/description' : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}
onClick={(e) => !cid && e.preventDefault()}
>
{_.capitalize(t('reply'))}
</Link>
@@ -165,6 +165,12 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
const headingId = useId();
const handleMenuClick = () => {
if (cid) {
setMenuBtnRotated((prev) => !prev);
}
};
const handleClose = () => setMenuBtnRotated(false);
return (
@@ -173,13 +179,14 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
<span
className={isInCatalogView ? styles.postMenuBtnCatalog : styles.postMenuBtn}
title='Post menu'
onClick={() => setMenuBtnRotated((prev) => !prev)}
style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
onClick={handleMenuClick}
style={{ transform: menuBtnRotated && cid ? 'rotate(90deg)' : 'rotate(0deg)' }}
>
</span>
</span>
{menuBtnRotated &&
cid &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
@@ -148,16 +148,23 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
const headingId = useId();
const handleMenuClick = () => {
if (cid) {
setIsMenuOpen((prev) => !prev);
}
};
const handleClose = () => setIsMenuOpen(false);
const isInBoardView = isBoardView(useLocation().pathname, useParams());
return (
<>
<span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
<span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
...
</span>
{isMenuOpen &&
cid &&
createPortal(
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
@@ -171,7 +178,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
</FloatingFocusManager>,
document.body,
)}
{(isAccountMod || isAccountCommentAuthor) && (
{(isAccountMod || isAccountCommentAuthor) && cid && (
<span className={styles.checkbox}>
<EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />
</span>