From 0cb386cf662a570c3dd5772ec50bdbba56243618 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 14:25:47 +0200
Subject: [PATCH] fix(pending post): "[Reply]" button and post menu shouldn't
 be clickable

---
 src/components/post-desktop/post-desktop.tsx          |  1 +
 .../post-menu-desktop/post-menu-desktop.tsx           | 11 +++++++++--
 .../post-mobile/post-menu-mobile/post-menu-mobile.tsx | 11 +++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index f35f2fe1..972d2e41 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -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>
diff --git a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index c943afec..6e53427f 100644
--- a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+++ b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -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()}>
diff --git a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index 5756654f..9764cbb8 100644
--- a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -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>