diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css index f3732cba..be69e7cf 100644 --- a/src/components/comment-media/comment-media.module.css +++ b/src/components/comment-media/comment-media.module.css @@ -4,7 +4,7 @@ height: var(--height); max-width: 250px; max-height: 250px; - margin: 3px 20px 5px 0; + margin: 3px 20px 5px 20px; display: inline-flex; justify-content: center; align-items: center; diff --git a/src/components/post/mod-menu/mod-menu.module.css b/src/components/post/mod-menu/mod-menu.module.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/mod-menu/mod-menu.ts b/src/components/post/mod-menu/mod-menu.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/mod-menu/mod-menu.tsx b/src/components/post/mod-menu/mod-menu.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index a74f8256..c00c5e8c 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 } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useBlock } 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'; @@ -20,7 +20,7 @@ import PostMenuDesktop from './post-menu-desktop/'; import { PostProps } from '../post'; import _ from 'lodash'; -const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { +const PostInfo = ({ openReplyModal, post, roles, isBlocked }: PostProps) => { const { t } = useTranslation(); const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; @@ -44,9 +44,11 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { return (
- - - + {!isBlocked && ( + + + + )} {title && {displayTitle} } @@ -90,7 +92,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} - {!isInPostView && !isReply && ( + {!isInPostView && !isReply && !isBlocked && ( [ { )}
{(hasThumbnail || (!hasThumbnail && !showThumbnail)) && ( - +
+ +
)} ); @@ -212,10 +216,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api + const { blocked, unblock, block } = useBlock({ address: cid }); + const params = useParams(); const location = useLocation(); const isInPendingPostView = isPendingPostView(location.pathname, params); - const isInPostView = isPostPageView(location.pathname, params); + const isInPostPageView = isPostPageView(location.pathname, params); const replies = useReplies(post); const visiblelinksCount = useCountLinksInReplies(post, 5); @@ -228,49 +234,52 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)

- {!isInPostView && ( - - - - )} - {link && isValidURL(link) && } - - {!content &&
} - {content && } - {!isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostView && ( - - - +
+ {!isInPostPageView && !isDescription && !isRules && ( + + - {linksCount > 0 ? ( - }} - values={{ repliesCount, linksCount }} - /> - ) : ( - }} values={{ repliesCount }} /> - )} - - )} - {!(pinned && !isInPostView) && - !isInPendingPostView && - !isDescription && - !isRules && - replies && - (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => ( -
-
-
{'>>'}
-
- - {reply.link && isValidURL(reply.link) && } - {reply.content && } + )} + {link && !blocked && isValidURL(link) && } + + {!blocked && !content &&
} + {!blocked && content && } + {!blocked && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && ( + + + + + {linksCount > 0 ? ( + }} + values={{ repliesCount, linksCount }} + /> + ) : ( + }} values={{ repliesCount }} /> + )} + + )} + {!blocked && + !(pinned && !isInPostPageView) && + !isInPendingPostView && + !isDescription && + !isRules && + replies && + (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => ( +
+
+
{'>>'}
+
+ + {reply.link && isValidURL(reply.link) && } + {reply.content && } +
-
- ))} + ))} +
); }; diff --git a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx index a363b952..41d5b89b 100644 --- a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx +++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; 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 { Comment } from '@plebbit/plebbit-react-hooks'; +import { Comment, useBlock } from '@plebbit/plebbit-react-hooks'; import styles from './post-menu-desktop.module.css'; import { getCommentMediaInfo } from '../../../../lib/utils/media-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 { cid: string; @@ -101,7 +101,12 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => { const { thumbnail, type, url } = commentMediaInfo || {}; 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({ placement: 'bottom-start', @@ -135,6 +140,11 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
{cid && subplebbitAddress && } + {!isInPostPageView && !isDescription && !isRules && ( +
+ {blocked ? 'Unhide' : 'Hide'} {postCid === cid ? 'thread' : 'post'} +
+ )} {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && }
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 8cfe0d3b..d3b1df28 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -11,6 +11,8 @@ } .hideButtonWrapper { + height: 15px; + width: 18px; padding-right: 5px; float: left; } @@ -26,6 +28,10 @@ transform: translateY(-1px); } +.postDesktopBlocked { + opacity: 0.5; +} + /* clearfix to contain float elements */ .postDesktop::after { content: ""; @@ -52,7 +58,6 @@ } .postDesktop .postInfo { - padding-top: 3px; width: 100%; } @@ -307,7 +312,7 @@ } .replyDesktop { - padding-bottom: 4px; + padding-top: 4px; } .replyDesktop .sideArrows { diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 2dc6569b..d1f4e853 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,6 +6,7 @@ import PostMobile from './post-mobile'; export interface PostProps { index?: number; + isBlocked?: boolean; post?: any; reply?: any; roles?: Role[]; diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index cb209a3d..1f3918a4 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -8,6 +8,12 @@ export const isAllView = (pathname: string): boolean => { 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 => { 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 => { return ( + !isAllView(pathname) && + !isBoardView(pathname, params) && !isCatalogView(pathname) && !isDescriptionView(pathname, params) && !isHomeView(pathname) && diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index be829aaa..721bb6c3 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -119,7 +119,6 @@ } .list a { - color: var(--homepage-box-link-text-color); text-decoration: var(--homepage-box-link-text-decoration); }