From b260fa35bfcb75c823b5a79c8ef74198d0e62b54 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 3 Jun 2024 21:32:00 +0200 Subject: [PATCH] refactor: rename mod menu to edit menu, add author edit --- .../edit-menu.module.css} | 0 .../mod-menu.tsx => edit-menu/edit-menu.tsx} | 134 ++++++++++-------- src/components/post/edit-menu/index.ts | 1 + src/components/post/mod-menu/index.ts | 1 - .../post/post-desktop/post-desktop.tsx | 15 +- 5 files changed, 88 insertions(+), 63 deletions(-) rename src/components/post/{mod-menu/mod-menu.module.css => edit-menu/edit-menu.module.css} (100%) rename src/components/post/{mod-menu/mod-menu.tsx => edit-menu/edit-menu.tsx} (54%) create mode 100644 src/components/post/edit-menu/index.ts delete mode 100644 src/components/post/mod-menu/index.ts diff --git a/src/components/post/mod-menu/mod-menu.module.css b/src/components/post/edit-menu/edit-menu.module.css similarity index 100% rename from src/components/post/mod-menu/mod-menu.module.css rename to src/components/post/edit-menu/edit-menu.module.css diff --git a/src/components/post/mod-menu/mod-menu.tsx b/src/components/post/edit-menu/edit-menu.tsx similarity index 54% rename from src/components/post/mod-menu/mod-menu.tsx rename to src/components/post/edit-menu/edit-menu.tsx index 5e490c81..77f97c36 100644 --- a/src/components/post/mod-menu/mod-menu.tsx +++ b/src/components/post/edit-menu/edit-menu.tsx @@ -2,19 +2,21 @@ import { 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 './mod-menu.module.css'; +import styles from './edit-menu.module.css'; import { alertChallengeVerificationFailed } from '../../../lib/utils/challenge-utils'; import useChallengesStore from '../../../stores/use-challenges-store'; import _ from 'lodash'; const { addChallenge } = useChallengesStore.getState(); -type ModMenuProps = { +type EditMenuProps = { cid: string; + isAccountMod?: boolean; + isAccountCommentAuthor?: boolean; isCommentAuthorMod?: boolean; }; -const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { +const EditMenu = ({ cid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMod }: EditMenuProps) => { const { t } = useTranslation(); let post: any; @@ -26,9 +28,10 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { post = comment; } const isReply = post?.parentCid; - const [isModMenuOpen, setIsModMenuOpen] = useState(false); + const [isEditMenuOpen, setIsEditMenuOpen] = useState(false); const defaultPublishOptions: PublishCommentEditOptions = { + deleted: post?.deleted, removed: post?.removed, locked: post?.locked, spoiler: post?.spoiler, @@ -81,8 +84,8 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const { refs, floatingStyles, context } = useFloating({ placement: 'bottom-start', - open: isModMenuOpen, - onOpenChange: setIsModMenuOpen, + open: isEditMenuOpen, + onOpenChange: setIsEditMenuOpen, middleware: [offset(2), flip({ fallbackAxisSideDirection: 'end' }), shift()], whileElementsMounted: autoUpdate, }); @@ -97,65 +100,82 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { const handleSaveClick = async () => { await publishCommentEdit(); - setIsModMenuOpen(false); + setIsEditMenuOpen(false); }; return ( <> - cid && setIsModMenuOpen(!isModMenuOpen)} checked={isModMenuOpen} /> + cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} /> - {isModMenuOpen && ( + {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && (
-
-
- -
- {!isReply && ( -
- [ - - ] -
+
+ {isAccountCommentAuthor && ( + <> +
+ +
+ )} -
- [ - - ] -
-
- [ - - ] -
- {!isCommentAuthorMod && ( -
- [ - - ] -
+ {isAccountMod && ( + <> +
+ +
+ {!isReply && ( +
+ [ + + ] +
+ )} +
+ [ + + ] +
+
+ [ + + ] +
+ {!isCommentAuthorMod && ( +
+ [ + + ] +
+ )} + )}
{_.capitalize(t('reason'))}? @@ -172,4 +192,4 @@ const ModMenu = ({ cid, isCommentAuthorMod }: ModMenuProps) => { ); }; -export default ModMenu; +export default EditMenu; diff --git a/src/components/post/edit-menu/index.ts b/src/components/post/edit-menu/index.ts new file mode 100644 index 00000000..017edf8a --- /dev/null +++ b/src/components/post/edit-menu/index.ts @@ -0,0 +1 @@ +export { default } from './edit-menu'; diff --git a/src/components/post/mod-menu/index.ts b/src/components/post/mod-menu/index.ts deleted file mode 100644 index cc8304d4..00000000 --- a/src/components/post/mod-menu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './mod-menu'; diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 2ab016c2..633dde82 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 } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useBlock, useEditedComment, useSubplebbit } 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'; @@ -17,9 +17,9 @@ import { canEmbed } from '../../embed'; import LoadingEllipsis from '../../loading-ellipsis'; import Markdown from '../../markdown'; import PostMenuDesktop from './post-menu-desktop/'; +import EditMenu from '../edit-menu/edit-menu'; import { PostProps } from '../post'; import _ from 'lodash'; -import ModMenu from '../mod-menu'; const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const { t } = useTranslation(); @@ -39,13 +39,18 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const authorRole = roles?.[address]?.role; const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; - // pending reply by account is not yet published const account = useAccount(); - const accountShortAddress = account?.author?.shortAddress; + 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; return (
- {!isHidden && } + {!isHidden && } {title && {displayTitle} }