diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx index 41427475..3b13ea10 100644 --- a/src/components/post/comment-tools/comment-tools.tsx +++ b/src/components/post/comment-tools/comment-tools.tsx @@ -18,6 +18,7 @@ interface CommentToolsProps { failed?: boolean; editState?: string; hasLabel?: boolean; + hasThumbnail?: boolean; index?: number; isAuthor?: boolean; isAccountMod?: boolean; @@ -253,6 +254,7 @@ const CommentTools = ({ failed, editState, hasLabel = false, + hasThumbnail = false, index, isReply, isSingleReply, @@ -285,6 +287,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} @@ -301,6 +304,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} @@ -328,6 +332,7 @@ const CommentTools = ({ cid={cid} failed={failed} hasLabel={hasLabel} + hasThumbnail={hasThumbnail} index={index} isAuthor={isAuthor} isAccountMod={isAccountMod} diff --git a/src/components/post/comment-tools/edit-menu/edit-menu.tsx b/src/components/post/comment-tools/edit-menu/edit-menu.tsx index fb4257e9..008099eb 100644 --- a/src/components/post/comment-tools/edit-menu/edit-menu.tsx +++ b/src/components/post/comment-tools/edit-menu/edit-menu.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { PublishCommentEditOptions, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; -import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; +import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; import styles from './edit-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../../lib/utils/challenge-utils'; import challengesStore from '../../../../stores/use-challenges-store'; @@ -17,7 +16,7 @@ const EditMenu = ({ commentCid, showCommentEditForm }: EditMenuProps) => { const { t } = useTranslation(); let post: any; - const comment = useSubplebbitsPagesStore((state) => state.comments[commentCid]); + const comment = useComment({ commentCid }); const { editedComment } = useEditedComment({ comment }); if (editedComment) { post = editedComment; diff --git a/src/components/post/comment-tools/mod-menu/mod-menu.tsx b/src/components/post/comment-tools/mod-menu/mod-menu.tsx index ad9715f8..2c97ff1e 100644 --- a/src/components/post/comment-tools/mod-menu/mod-menu.tsx +++ b/src/components/post/comment-tools/mod-menu/mod-menu.tsx @@ -1,8 +1,7 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Trans, useTranslation } from 'react-i18next'; -import { PublishCommentModerationOptions, useEditedComment, usePublishCommentModeration } from '@plebbit/plebbit-react-hooks'; -import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; +import { PublishCommentModerationOptions, useComment, useEditedComment, usePublishCommentModeration } from '@plebbit/plebbit-react-hooks'; import styles from './mod-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../../lib/utils/challenge-utils'; import challengesStore from '../../../../stores/use-challenges-store'; @@ -17,7 +16,7 @@ type ModMenuProps = { const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const { t } = useTranslation(); let post: any; - const comment = useSubplebbitsPagesStore((state) => state.comments[cid]); + const comment = useComment({ commentCid: cid }); const { editedComment } = useEditedComment({ comment }); if (editedComment) { post = editedComment; @@ -27,16 +26,18 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const isReply = post?.parentCid; const [isModMenuOpen, setIsModMenuOpen] = useState(false); + const { removed, locked, spoiler, nsfw, pinned, banExpiresAt, subplebbitAddress } = post || {}; + const defaultPublishOptions: PublishCommentModerationOptions = { - commentCid: post?.cid, - subplebbitAddress: post?.subplebbitAddress, + commentCid: cid, + subplebbitAddress, commentModeration: { - removed: post?.removed ?? false, - locked: post?.locked ?? false, - spoiler: post?.spoiler ?? false, - nsfw: post?.nsfw ?? false, - pinned: post?.pinned ?? false, - banExpiresAt: post?.banExpiresAt, + removed: removed ?? false, + locked: locked ?? false, + spoiler: spoiler ?? false, + nsfw: nsfw ?? false, + pinned: pinned ?? false, + banExpiresAt, }, onChallenge: (...args: any) => addChallenge([...args, post]), onChallengeVerification: alertChallengeVerificationFailed, diff --git a/src/components/post/expando/expando.module.css b/src/components/post/expando/expando.module.css index 6ee3c218..f0b36c77 100644 --- a/src/components/post/expando/expando.module.css +++ b/src/components/post/expando/expando.module.css @@ -214,6 +214,10 @@ background-color: #4980ae; } +.mediaPreviewReply { + width: 100%; +} + @media (max-width: 770px) { .mediaPreview { width: 100%; diff --git a/src/components/post/expando/expando.tsx b/src/components/post/expando/expando.tsx index 9af6e073..2c42978c 100644 --- a/src/components/post/expando/expando.tsx +++ b/src/components/post/expando/expando.tsx @@ -15,6 +15,7 @@ interface ExpandoProps { content?: string; deleted?: boolean; expanded: boolean; + isReply?: boolean; link?: string; modEditReason?: string; nsfw?: boolean; @@ -30,6 +31,7 @@ const Expando = ({ content, deleted, expanded, + isReply, link, modEditReason, nsfw, @@ -81,7 +83,7 @@ const Expando = ({ return (