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

2026-08-03 07:41:04 +02:00 · 2024-05-30 14:29:02 +02:00
parent be579df996
commit 32f52200b7
10 changed files with 96 additions and 64 deletions
@@ -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;
@@ -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}>
-      <span className={styles.checkbox}>
-        <input type='checkbox' />
-      </span>
+      {!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,15 +151,17 @@ const PostMedia = ({ post }: PostProps) => {
        )}
      </div>
      {(hasThumbnail || (!hasThumbnail && !showThumbnail)) && (
-        <CommentMedia
-          commentMediaInfo={commentMediaInfo}
-          isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
-          isReply={isReply}
-          linkHeight={linkHeight}
-          linkWidth={linkWidth}
-          showThumbnail={showThumbnail}
-          setShowThumbnail={setShowThumbnail}
-        />
+        <div className={styles.fileThumbnail}>
+          <CommentMedia
+            commentMediaInfo={commentMediaInfo}
+            isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
+            isReply={isReply}
+            linkHeight={linkHeight}
+            linkWidth={linkWidth}
+            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,49 +234,52 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
      <div className={styles.hrWrapper}>
        <hr />
      </div>
-      {!isInPostView && (
-        <span className={styles.hideButtonWrapper}>
-          <span className={`${styles.hideButton} ${styles.hideThread}`} />
-        </span>
-      )}
-      {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} />
+      <div className={blocked ? styles.postDesktopBlocked : ''}>
+        {!isInPostPageView && !isDescription && !isRules && (
+          <span className={styles.hideButtonWrapper}>
+            <span className={`${styles.hideButton} ${blocked ? styles.unhideThread : styles.hideThread}`} onClick={blocked ? unblock : block} />
          </span>
-          {linksCount > 0 ? (
-            <Trans
-              i18nKey={'replies_and_links_omitted'}
-              shouldUnescape={true}
-              components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }}
-              values={{ repliesCount, linksCount }}
-            />
-          ) : (
-            <Trans i18nKey={'replies_omitted'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} values={{ repliesCount }} />
-          )}
-        </span>
-      )}
-      {!(pinned && !isInPostView) &&
-        !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} />}
+        )}
+        {link && !blocked && isValidURL(link) && <PostMedia post={post} />}
+        <PostInfo isBlocked={blocked} openReplyModal={openReplyModal} post={post} roles={roles} />
+        {!blocked && !content && <div className={styles.spacer} />}
+        {!blocked && content && <PostMessage post={post} />}
+        {!blocked && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
+          <span className={styles.summary}>
+            <span className={styles.expandButtonWrapper}>
+              <span className={styles.expandButton} />
+            </span>
+            {linksCount > 0 ? (
+              <Trans
+                i18nKey={'replies_and_links_omitted'}
+                shouldUnescape={true}
+                components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }}
+                values={{ repliesCount, linksCount }}
+              />
+            ) : (
+              <Trans i18nKey={'replies_omitted'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} values={{ repliesCount }} />
+            )}
+          </span>
+        )}
+        {!blocked &&
+          !(pinned && !isInPostPageView) &&
+          !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>
  );
 };
@@ -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>
@@ -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 {
@@ -6,6 +6,7 @@ import PostMobile from './post-mobile';

 export interface PostProps {
  index?: number;
+  isBlocked?: boolean;
  post?: any;
  reply?: any;
  roles?: Role[];
@@ -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) &&
@@ -119,7 +119,6 @@
 }

 .list a {
-
  color: var(--homepage-box-link-text-color);
  text-decoration: var(--homepage-box-link-text-decoration);
 }