feat(post): block posts via the minus button (to collapse) or via the post menu

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;

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 (
     <div className={styles.postInfo}>
+      {!isBlocked && (
         <span className={styles.checkbox}>
           <input type='checkbox' />
         </span>
+      )}
       {title && <span className={styles.subject}>{displayTitle} </span>}
       <span className={styles.nameBlock}>
         <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')} />
           </span>
         )}
-        {!isInPostView && !isReply && (
+        {!isInPostView && !isReply && !isBlocked && (
           <span className={styles.replyButton}>
             [
             <Link
@@ -149,6 +151,7 @@ const PostMedia = ({ post }: PostProps) => {
         )}
       </div>
       {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
+        <div className={styles.fileThumbnail}>
           <CommentMedia
             commentMediaInfo={commentMediaInfo}
             isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
@@ -158,6 +161,7 @@ const PostMedia = ({ post }: PostProps) => {
             showThumbnail={showThumbnail}
             setShowThumbnail={setShowThumbnail}
           />
+        </div>
       )}
     </div>
   );
@@ -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,16 +234,17 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
       <div className={styles.hrWrapper}>
         <hr />
       </div>
-      {!isInPostView && (
+      <div className={blocked ? styles.postDesktopBlocked : ''}>
+        {!isInPostPageView && !isDescription && !isRules && (
           <span className={styles.hideButtonWrapper}>
-          <span className={`${styles.hideButton} ${styles.hideThread}`} />
+            <span className={`${styles.hideButton} ${blocked ? styles.unhideThread : styles.hideThread}`} onClick={blocked ? unblock : block} />
           </span>
         )}
-      {link && isValidURL(link) && <PostMedia post={post} />}
+        {link && !blocked && isValidURL(link) && <PostMedia post={post} />}
-      <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
+        <PostInfo isBlocked={blocked} openReplyModal={openReplyModal} post={post} roles={roles} />
-      {!content && <div className={styles.spacer} />}
+        {!blocked && !content && <div className={styles.spacer} />}
-      {content && <PostMessage post={post} />}
+        {!blocked && content && <PostMessage post={post} />}
-      {!isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostView && (
+        {!blocked && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
           <span className={styles.summary}>
             <span className={styles.expandButtonWrapper}>
               <span className={styles.expandButton} />
@@ -254,7 +261,8 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
             )}
           </span>
         )}
-      {!(pinned && !isInPostView) &&
+        {!blocked &&
+          !(pinned && !isInPostPageView) &&
           !isInPendingPostView &&
           !isDescription &&
           !isRules &&
@@ -272,6 +280,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
             </div>
           ))}
       </div>
+    </div>
   );
 };
 

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 }) => {
           <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} />}
+              {!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} />}
               <ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
             </div>

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 {

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[];

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) &&

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);
 }