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): block posts via the minus button (to collapse) or via the post menu

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-30 14:29:02 +02:00
parent be579df996
commit 32f52200b7
10 changed files with 96 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.module.css
+1 -1
View File
@@ -4,7 +4,7 @@
height: var(--height); height: var(--height);
max-width: 250px; max-width: 250px;
max-height: 250px; max-height: 250px;
margin: 3px 20px 5px 0; margin: 3px 20px 5px 20px;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
src/components/post/mod-menu/mod-menu.module.css
View File
src/components/post/mod-menu/mod-menu.ts
View File
src/components/post/mod-menu/mod-menu.tsx
View File
src/components/post/post-desktop/post-desktop.tsx
+65 -56
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useAccount } from '@plebbit/plebbit-react-hooks'; import { useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../post.module.css'; import styles from '../post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -20,7 +20,7 @@ import PostMenuDesktop from './post-menu-desktop/';
import { PostProps } from '../post'; import { PostProps } from '../post';
import _ from 'lodash'; import _ from 'lodash';
const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { const PostInfo = ({ openReplyModal, post, roles, isBlocked }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {}; const { address, displayName, shortAddress } = author || {};
@@ -44,9 +44,11 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
return ( return (
<div className={styles.postInfo}> <div className={styles.postInfo}>
<span className={styles.checkbox}> {!isBlocked && (
<input type='checkbox' /> <span className={styles.checkbox}>
</span> <input type='checkbox' />
</span>
)}
{title && <span className={styles.subject}>{displayTitle} </span>} {title && <span className={styles.subject}>{displayTitle} </span>}
<span className={styles.nameBlock}> <span className={styles.nameBlock}>
<span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}> <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
@@ -90,7 +92,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => {
<img src='/assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} /> <img src='/assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
</span> </span>
)} )}
{!isInPostView && !isReply && ( {!isInPostView && !isReply && !isBlocked && (
<span className={styles.replyButton}> <span className={styles.replyButton}>
[ [
<Link <Link
@@ -149,15 +151,17 @@ const PostMedia = ({ post }: PostProps) => {
)} )}
</div> </div>
{(hasThumbnail || (!hasThumbnail && !showThumbnail)) && ( {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
<CommentMedia <div className={styles.fileThumbnail}>
commentMediaInfo={commentMediaInfo} <CommentMedia
isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded commentMediaInfo={commentMediaInfo}
isReply={isReply} isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
linkHeight={linkHeight} isReply={isReply}
linkWidth={linkWidth} linkHeight={linkHeight}
showThumbnail={showThumbnail} linkWidth={linkWidth}
setShowThumbnail={setShowThumbnail} showThumbnail={showThumbnail}
/> setShowThumbnail={setShowThumbnail}
/>
</div>
)} )}
</div> </div>
); );
@@ -212,10 +216,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {}; const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api const { isDescription, isRules } = post || {}; // custom properties, not from api
const { blocked, unblock, block } = useBlock({ address: cid });
const params = useParams(); const params = useParams();
const location = useLocation(); const location = useLocation();
const isInPendingPostView = isPendingPostView(location.pathname, params); const isInPendingPostView = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params); const isInPostPageView = isPostPageView(location.pathname, params);
const replies = useReplies(post); const replies = useReplies(post);
const visiblelinksCount = useCountLinksInReplies(post, 5); const visiblelinksCount = useCountLinksInReplies(post, 5);
@@ -228,49 +234,52 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
<div className={styles.hrWrapper}> <div className={styles.hrWrapper}>
<hr /> <hr />
</div> </div>
{!isInPostView && ( <div className={blocked ? styles.postDesktopBlocked : ''}>
<span className={styles.hideButtonWrapper}> {!isInPostPageView && !isDescription && !isRules && (
<span className={`${styles.hideButton} ${styles.hideThread}`} /> <span className={styles.hideButtonWrapper}>
</span> <span className={`${styles.hideButton} ${blocked ? styles.unhideThread : styles.hideThread}`} onClick={blocked ? unblock : block} />
)}
{link && isValidURL(link) && <PostMedia post={post} />}
<PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
{!content && <div className={styles.spacer} />}
{content && <PostMessage post={post} />}
{!isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostView && (
<span className={styles.summary}>
<span className={styles.expandButtonWrapper}>
<span className={styles.expandButton} />
</span> </span>
{linksCount > 0 ? ( )}
<Trans {link && !blocked && isValidURL(link) && <PostMedia post={post} />}
i18nKey={'replies_and_links_omitted'} <PostInfo isBlocked={blocked} openReplyModal={openReplyModal} post={post} roles={roles} />
shouldUnescape={true} {!blocked && !content && <div className={styles.spacer} />}
components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} {!blocked && content && <PostMessage post={post} />}
values={{ repliesCount, linksCount }} {!blocked && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
/> <span className={styles.summary}>
) : ( <span className={styles.expandButtonWrapper}>
<Trans i18nKey={'replies_omitted'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} values={{ repliesCount }} /> <span className={styles.expandButton} />
)} </span>
</span> {linksCount > 0 ? (
)} <Trans
{!(pinned && !isInPostView) && i18nKey={'replies_and_links_omitted'}
!isInPendingPostView && shouldUnescape={true}
!isDescription && components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }}
!isRules && values={{ repliesCount, linksCount }}
replies && />
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => ( ) : (
<div key={index} className={styles.replyContainer}> <Trans i18nKey={'replies_omitted'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} values={{ repliesCount }} />
<div className={styles.replyDesktop}> )}
<div className={styles.sideArrows}>{'>>'}</div> </span>
<div className={styles.reply}> )}
<PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} /> {!blocked &&
{reply.link && isValidURL(reply.link) && <PostMedia post={reply} />} !(pinned && !isInPostPageView) &&
{reply.content && <PostMessage post={reply} />} !isInPendingPostView &&
!isDescription &&
!isRules &&
replies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
<div key={index} className={styles.replyContainer}>
<div className={styles.replyDesktop}>
<div className={styles.sideArrows}>{'>>'}</div>
<div className={styles.reply}>
<PostInfo openReplyModal={openReplyModal} post={reply} roles={roles} />
{reply.link && isValidURL(reply.link) && <PostMedia post={reply} />}
{reply.content && <PostMessage post={reply} />}
</div>
</div> </div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
); );
}; };
src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+14 -4
View File
@@ -1,12 +1,12 @@
import { useState } from 'react'; import { useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useLocation } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import { Comment } from '@plebbit/plebbit-react-hooks'; import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-desktop.module.css'; import styles from './post-menu-desktop.module.css';
import { getCommentMediaInfo } from '../../../../lib/utils/media-utils'; import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils'; import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
import { isCatalogView } from '../../../../lib/utils/view-utils'; import { isCatalogView, isPostPageView } from '../../../../lib/utils/view-utils';
interface PostMenuDesktopProps { interface PostMenuDesktopProps {
cid: string; cid: string;
@@ -101,7 +101,12 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const { thumbnail, type, url } = commentMediaInfo || {}; const { thumbnail, type, url } = commentMediaInfo || {};
const [menuBtnRotated, setMenuBtnRotated] = useState(false); const [menuBtnRotated, setMenuBtnRotated] = useState(false);
const isInCatalogView = isCatalogView(useLocation().pathname); const { blocked, unblock, block } = useBlock({ address: cid });
const location = useLocation();
const params = useParams();
const isInCatalogView = isCatalogView(location.pathname);
const isInPostPageView = isPostPageView(location.pathname, params);
const { refs, floatingStyles, context } = useFloating({ const { refs, floatingStyles, context } = useFloating({
placement: 'bottom-start', placement: 'bottom-start',
@@ -135,6 +140,11 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
<FloatingFocusManager context={context} modal={false}> <FloatingFocusManager context={context} modal={false}>
<div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}> <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
{cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />} {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
{!isInPostPageView && !isDescription && !isRules && (
<div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
{blocked ? 'Unhide' : 'Hide'} {postCid === cid ? 'thread' : 'post'}
</div>
)}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />} {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
<ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} /> <ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
</div> </div>
src/components/post/post.module.css
+7 -2
View File
@@ -11,6 +11,8 @@
} }
.hideButtonWrapper { .hideButtonWrapper {
height: 15px;
width: 18px;
padding-right: 5px; padding-right: 5px;
float: left; float: left;
} }
@@ -26,6 +28,10 @@
transform: translateY(-1px); transform: translateY(-1px);
} }
.postDesktopBlocked {
opacity: 0.5;
}
/* clearfix to contain float elements */ /* clearfix to contain float elements */
.postDesktop::after { .postDesktop::after {
content: ""; content: "";
@@ -52,7 +58,6 @@
} }
.postDesktop .postInfo { .postDesktop .postInfo {
padding-top: 3px;
width: 100%; width: 100%;
} }
@@ -307,7 +312,7 @@
} }
.replyDesktop { .replyDesktop {
padding-bottom: 4px; padding-top: 4px;
} }
.replyDesktop .sideArrows { .replyDesktop .sideArrows {
src/components/post/post.tsx
+1
View File
@@ -6,6 +6,7 @@ import PostMobile from './post-mobile';
export interface PostProps { export interface PostProps {
index?: number; index?: number;
isBlocked?: boolean;
post?: any; post?: any;
reply?: any; reply?: any;
roles?: Role[]; roles?: Role[];
src/lib/utils/view-utils.ts
+8
View File
@@ -8,6 +8,12 @@ export const isAllView = (pathname: string): boolean => {
return pathname.startsWith('/p/all'); return pathname.startsWith('/p/all');
}; };
export const isBoardView = (pathname: string, params: ParamsType): boolean => {
// some subs might use emojis in their address, so we need to decode the pathname
const decodedPathname = decodeURIComponent(pathname);
return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}`) : false;
};
export const isCatalogView = (pathname: string): boolean => { export const isCatalogView = (pathname: string): boolean => {
return pathname.endsWith('/catalog') || pathname.endsWith('/catalog/settings'); return pathname.endsWith('/catalog') || pathname.endsWith('/catalog/settings');
}; };
@@ -44,6 +50,8 @@ export const isSubscriptionsView = (pathname: string): boolean => {
export const isNotFoundView = (pathname: string, params: ParamsType): boolean => { export const isNotFoundView = (pathname: string, params: ParamsType): boolean => {
return ( return (
!isAllView(pathname) &&
!isBoardView(pathname, params) &&
!isCatalogView(pathname) && !isCatalogView(pathname) &&
!isDescriptionView(pathname, params) && !isDescriptionView(pathname, params) &&
!isHomeView(pathname) && !isHomeView(pathname) &&
src/views/home/home.module.css
-1
View File
@@ -119,7 +119,6 @@
} }
.list a { .list a {
color: var(--homepage-box-link-text-color); color: var(--homepage-box-link-text-color);
text-decoration: var(--homepage-box-link-text-decoration); text-decoration: var(--homepage-box-link-text-decoration);
} }