External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(post mobile): add hide and unhide posts and replies

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-14 12:51:43 +02:00
parent 8959945722
commit 0c02a6b9b6
3 changed files with 118 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+32 -4
View File
@@ -7,13 +7,18 @@ 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-author-privileges';
import useHide from '../../../hooks/use-hide';
import EditMenu from '../../edit-menu/edit-menu';
import { isPostPageView } from '../../../lib/utils/view-utils';
import { useLocation, useParams } from 'react-router-dom';
interface PostMenuMobileProps {
cid: string;
isDescription?: boolean;
isReply?: boolean;
isRules?: boolean;
subplebbitAddress: string;
postCid?: string;
subplebbitAddress?: string;
onClose: () => void;
}
@@ -22,7 +27,9 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps
return (
<div
onClick={() => {
copyShareLinkToClipboard(subplebbitAddress, cid);
if (subplebbitAddress) {
copyShareLinkToClipboard(subplebbitAddress, cid);
}
onClose();
}}
>
@@ -63,13 +70,33 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
);
};
const HidePostButton = ({ cid, isReply, postCid, onClose }: 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 className={styles.postMenuItem}>
{hidden ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
</div>
</div>
)
);
};
const PostMenuMobile = ({ post }: { post: Comment }) => {
const { author, cid, isDescription, isRules, link, subplebbitAddress } = post || {};
const { author, cid, isDescription, isRules, link, parentCid, 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);
const { refs, floatingStyles, context } = useFloating({
placement: 'bottom-start',
open: isMenuOpen,
@@ -95,6 +122,7 @@ 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} />}
{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>