diff --git a/src/components/post/edit-menu/edit-menu.module.css b/src/components/post/edit-menu/edit-menu.module.css index d896b24a..00f83baa 100644 --- a/src/components/post/edit-menu/edit-menu.module.css +++ b/src/components/post/edit-menu/edit-menu.module.css @@ -88,4 +88,17 @@ .banInput { width: 3.5em; } +} + + +@media (max-width: 640px) { + .checkbox { + padding-left: 0; + padding-bottom: 0; + } + + .replyCheckbox { + padding-left: 5px; + padding-top: 0; + } } \ No newline at end of file diff --git a/src/components/post/edit-menu/edit-menu.tsx b/src/components/post/edit-menu/edit-menu.tsx index b1913aaa..9874632c 100644 --- a/src/components/post/edit-menu/edit-menu.tsx +++ b/src/components/post/edit-menu/edit-menu.tsx @@ -1,5 +1,5 @@ -import { Trans, useTranslation } from 'react-i18next'; 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 styles from './edit-menu.module.css'; @@ -58,13 +58,6 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA }, }; - useEffect(() => { - if (!isEditMenuOpen) { - setPublishCommentEditOptions(defaultPublishOptions); - setIsContentEditorOpen(false); - } - }, [isEditMenuOpen]); - const [publishCommentEditOptions, setPublishCommentEditOptions] = useState(defaultPublishOptions); const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -130,7 +123,7 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA return ( <> - + commentCid && setIsEditMenuOpen(!isEditMenuOpen)} diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 8d28b4cb..6b85dee9 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useLocation, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom'; -import { useAccount, useBlock, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import styles from '../post.module.css'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; @@ -10,6 +10,7 @@ import { getFormattedDate } from '../../../lib/utils/time-utils'; import { isValidURL } from '../../../lib/utils/url-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils'; import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies'; +import useEditCommentPrivileges from '../../../hooks/use-edit-comment-privileges'; import useReplies from '../../../hooks/use-replies'; import useStateString from '../../../hooks/use-state-string'; import CommentMedia from '../../comment-media'; @@ -41,12 +42,8 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const account = useAccount(); const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet - const subplebbit = useSubplebbit({ subplebbitAddress }); - const commentAuthorRole = subplebbit?.roles?.[author?.address]?.role; - const isCommentAuthorMod = commentAuthorRole === 'admin' || commentAuthorRole === 'owner' || commentAuthorRole === 'moderator'; - const accountAuthorRole = subplebbit?.roles?.[account?.author?.address]?.role; - const isAccountMod = accountAuthorRole === 'admin' || accountAuthorRole === 'owner' || accountAuthorRole === 'moderator'; - const isAccountCommentAuthor = account?.author?.address === author?.address; + + const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress }); return (
diff --git a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx index 6b8bdda7..18d3aef6 100644 --- a/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx +++ b/src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx @@ -1,11 +1,13 @@ import { useState } from 'react'; import { createPortal } from 'react-dom'; -import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; +import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import styles from './post-menu-mobile.module.css'; import { getCommentMediaInfo } from '../../../../lib/utils/media-utils'; import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils'; +import useEditCommentPrivileges from '../../../../hooks/use-edit-comment-privileges'; +import EditMenu from '../../edit-menu/edit-menu'; interface PostMenuMobileProps { cid: string; @@ -62,7 +64,8 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose }; const PostMenuMobile = ({ post }: { post: Comment }) => { - const { cid, isDescription, isRules, link, subplebbitAddress } = post || {}; + const { author, cid, isDescription, isRules, link, subplebbitAddress } = post || {}; + const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: author?.address, subplebbitAddress }); const commentMediaInfo = getCommentMediaInfo(post); const { thumbnail, type, url } = commentMediaInfo || {}; const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -98,6 +101,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => { , document.body, )} + {(isAccountMod || isAccountCommentAuthor) && ( + + )} ); }; diff --git a/src/hooks/use-edit-comment-privileges.ts b/src/hooks/use-edit-comment-privileges.ts new file mode 100644 index 00000000..709a0549 --- /dev/null +++ b/src/hooks/use-edit-comment-privileges.ts @@ -0,0 +1,21 @@ +import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks'; + +interface EditCommentPrivileges { + commentAuthorAddress: string; + subplebbitAddress: string; +} + +const useEditCommentPrivileges = ({ commentAuthorAddress, subplebbitAddress }: EditCommentPrivileges) => { + const accountAuthorAddress = useAccount().author?.address; + const { roles } = useSubplebbit({ subplebbitAddress }) || {}; + + const commentAuthorRole = roles?.[commentAuthorAddress]?.role; + const isCommentAuthorMod = commentAuthorRole === 'admin' || commentAuthorRole === 'owner' || commentAuthorRole === 'moderator'; + const accountAuthorRole = roles?.[accountAuthorAddress]?.role; + const isAccountMod = accountAuthorRole === 'admin' || accountAuthorRole === 'owner' || accountAuthorRole === 'moderator'; + const isAccountCommentAuthor = accountAuthorAddress === commentAuthorAddress; + + return { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor }; +}; + +export default useEditCommentPrivileges;