diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx index d1b092b9..f489014b 100644 --- a/src/components/edit-menu/edit-menu.tsx +++ b/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 ( <> - - commentCid && setIsEditMenuOpen(!isEditMenuOpen)} - checked={isEditMenuOpen} - disabled={!isAccountCommentAuthor && !isAccountMod} - /> + + cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} disabled={!isAccountCommentAuthor && !isAccountMod} /> {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && ( diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 55d7b290..d4fdcaff 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/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 (
- {!isHidden && } + {!isHidden && } {title && {displayTitle} } @@ -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 (
{'>>'}
-
- - {reply.link && !hidden && isValidURL(reply.link) && } - {reply.content && !hidden && } +
+ + {link && !hidden && isValidURL(link) && } + {content && !hidden && }
); 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 412fb59c..1c459dad 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 @@ -154,7 +154,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => { document.body, )} {(isAccountMod || isAccountCommentAuthor) && ( - + )} ); diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index e02ea57b..49af16ad 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/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 (
-
- - {reply.content && !hidden && } +
+ + {content && !hidden && }
diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx index 39119b39..1b36fa40 100644 --- a/src/views/post/post.tsx +++ b/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 (
{isMobile ? ( - + ) : ( - + )}
@@ -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;