fix(post): mod and author edits weren't instant

src/components/edit-menu/edit-menu.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
-import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
+import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import useChallengesStore from '../../stores/use-challenges-store';
@@ -11,25 +11,17 @@ import useIsMobile from '../../hooks/use-is-mobile';
 const { addChallenge } = useChallengesStore.getState();
 
 type EditMenuProps = {
-  commentCid: string;
   isAccountMod?: boolean;
   isAccountCommentAuthor?: boolean;
   isCommentAuthorMod?: boolean;
+  post: Comment;
 };
 
-const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMod }: EditMenuProps) => {
+const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, post }: EditMenuProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
-  let post: any;
-  const comment = useComment({ commentCid });
-  const { editedComment } = useEditedComment({ comment });
-  if (editedComment) {
-    post = editedComment;
-  } else if (comment) {
-    post = comment;
-  }
 
-  const { banExpiresAt, content, deleted, locked, parentCid, pinned, removed, spoiler, subplebbitAddress } = post || {};
+  const { banExpiresAt, cid, content, deleted, locked, parentCid, pinned, removed, spoiler, subplebbitAddress } = post || {};
   const isReply = parentCid;
 
   const [isEditMenuOpen, setIsEditMenuOpen] = useState(false);
@@ -44,7 +36,7 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
 
   const defaultPublishEditOptions: PublishCommentEditOptions = {
     commentAuthor: isAccountMod && !isAccountCommentAuthor && banExpiresAt !== undefined ? { banExpiresAt } : undefined,
-    commentCid,
+    commentCid: cid,
     content: isAccountCommentAuthor ? content : undefined,
     deleted: isAccountCommentAuthor ? deleted : undefined,
     locked: isAccountMod ? locked : undefined,
@@ -125,13 +117,8 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
 
   return (
     <>
-      <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(commentCid && getReferenceProps())}>
+      <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}>
-        <input
+        <input type='checkbox' onChange={() => cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} disabled={!isAccountCommentAuthor && !isAccountMod} />
-          type='checkbox'
-          onChange={() => commentCid && setIsEditMenuOpen(!isEditMenuOpen)}
-          checked={isEditMenuOpen}
-          disabled={!isAccountCommentAuthor && !isAccountMod}
-        />
       </span>
       {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && (
         <FloatingFocusManager context={context} modal={false}>

src/components/post-desktop/post-desktop.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -50,7 +50,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
   return (
     <div className={styles.postInfo}>
-      {!isHidden && <EditMenu commentCid={cid} isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} />}
+      {!isHidden && <EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />}
       {title && <span className={styles.subject}>{displayTitle} </span>}
       <span className={styles.nameBlock}>
         <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
@@ -230,17 +230,24 @@ const PostMessage = ({ post }: PostProps) => {
 };
 
 const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
-  const { cid, subplebbitAddress } = reply || {};
+  let post = reply;
+  // handle pending mod or author edit
+  const { editedComment } = useEditedComment({ comment: reply });
+  if (editedComment) {
+    post = editedComment;
+  }
+
+  const { cid, content, link, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
   return (
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
-      <div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`} id={reply?.cid}>
+      <div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`} id={cid}>
-        <PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} />
+        <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
-        {reply.link && !hidden && isValidURL(reply.link) && <PostMedia post={reply} />}
+        {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
-        {reply.content && !hidden && <PostMessage post={reply} />}
+        {content && !hidden && <PostMessage post={post} />}
       </div>
     </div>
   );

src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -154,7 +154,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
           document.body,
         )}
       {(isAccountMod || isAccountCommentAuthor) && (
-        <EditMenu commentCid={cid} isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} />
+        <EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />
       )}
     </>
   );

src/components/post-mobile/post-mobile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -188,16 +188,22 @@ const PostMessageMobile = ({ post }: PostProps) => {
 };
 
 const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
-  const { subplebbitAddress, cid } = reply || {};
+  let post = reply;
+  // handle pending mod or author edit
+  const { editedComment } = useEditedComment({ comment: reply });
+  if (editedComment) {
+    post = editedComment;
+  }
+  const { cid, content, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
   return (
     <div className={styles.replyMobile}>
       <div className={styles.reply}>
-        <div className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight}`} id={reply?.cid}>
+        <div className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight}`} id={cid}>
-          <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
+          <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
-          {reply.content && !hidden && <PostMessageMobile post={reply} />}
+          {content && !hidden && <PostMessageMobile post={post} />}
           <ReplyBacklinks post={reply} />
         </div>
       </div>

src/views/post/post.tsx

@@ -28,13 +28,21 @@ export const Post = ({ post, showAllReplies = false, showReplies = true, openRep
   const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress });
   const isMobile = useIsMobile();
 
+  let comment = post;
+
+  // handle pending mod or author edit
+  const { editedComment } = useEditedComment({ comment });
+  if (editedComment) {
+    comment = editedComment;
+  }
+
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         {isMobile ? (
-          <PostMobile post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+          <PostMobile post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
         ) : (
-          <PostDesktop post={post} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
+          <PostDesktop post={comment} roles={subplebbit?.roles} showAllReplies={showAllReplies} showReplies={showReplies} openReplyModal={openReplyModal} />
         )}
       </div>
     </div>
@@ -66,12 +74,6 @@ const PostPage = () => {
     post = comment;
   }
 
-  // handle pending mod or author edit
-  const { editedComment } = useEditedComment({ comment: post });
-  if (editedComment) {
-    post = editedComment;
-  }
-
   const { deleted, locked, removed } = post || {};
   const isThreadClosed = deleted || locked || removed;