feat(post): add block options to mobile menu

This commit is contained in:
Tom (plebeius.eth)
2024-06-14 16:58:13 +02:00
parent 42a6fb4a70
commit 3206631e89
5 changed files with 26 additions and 15 deletions
@@ -1 +1 @@
export { default } from './post-menu-desktop';
export { BlockBoardButton, BlockUserButton, default } from './post-menu-desktop';
@@ -103,7 +103,7 @@ const ViewOnButton = ({ cid, isDescription, isInAllView, isInSubscriptionsView,
);
};
const BlockUserButton = ({ address }: { address: string }) => {
export const BlockUserButton = ({ address }: { address: string }) => {
const { blocked, unblock, block } = useBlock({ address });
return (
@@ -113,7 +113,7 @@ const BlockUserButton = ({ address }: { address: string }) => {
);
};
const BlockBoardButton = ({ address }: { address: string }) => {
export const BlockBoardButton = ({ address }: { address: string }) => {
const { blocked, unblock, block } = useBlock({ address });
return (
@@ -8,8 +8,9 @@ import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
import useHide from '../../../hooks/use-hide';
import { BlockBoardButton, BlockUserButton } from '../../post-desktop/post-menu-desktop';
import EditMenu from '../../edit-menu/edit-menu';
import { isPostPageView } from '../../../lib/utils/view-utils';
import { isBoardView, isPostPageView } from '../../../lib/utils/view-utils';
import { useLocation, useParams } from 'react-router-dom';
interface PostMenuMobileProps {
@@ -19,7 +20,7 @@ interface PostMenuMobileProps {
isRules?: boolean;
postCid?: string;
subplebbitAddress?: string;
onClose: () => void;
onClose?: () => void;
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
@@ -30,7 +31,7 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps
if (subplebbitAddress) {
copyShareLinkToClipboard(subplebbitAddress, cid);
}
onClose();
onClose && onClose();
}}
>
<div className={styles.postMenuItem}>{t('copy_link')}</div>
@@ -70,19 +71,14 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
);
};
const HidePostButton = ({ cid, isReply, postCid, onClose }: PostMenuMobileProps) => {
const HidePostButton = ({ cid, isReply, postCid }: PostMenuMobileProps) => {
const { t } = useTranslation();
const { hide, hidden, unhide } = useHide({ cid });
const isInPostView = isPostPageView(useLocation().pathname, useParams());
return (
(!isInPostView || isReply) && (
<div
onClick={() => {
hidden ? unhide() : hide();
onClose();
}}
>
<div onClick={hidden ? unhide : hide}>
<div className={styles.postMenuItem}>
{hidden ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
</div>
@@ -112,6 +108,8 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
const handleClose = () => setIsMenuOpen(false);
const isInBoardView = isBoardView(useLocation().pathname, useParams());
return (
<>
<span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
@@ -122,7 +120,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
<FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={post.postCid} onClose={handleClose} />}
{cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={post.postCid} />}
{cid && subplebbitAddress && <BlockUserButton address={author?.address} />}
{cid && subplebbitAddress && !isInBoardView && <BlockBoardButton address={subplebbitAddress} />}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
<ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
</div>