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

src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -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={() => {
+        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>

src/components/post-mobile/post-mobile.tsx

@@ -7,6 +7,7 @@ import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
+import useHide from '../../hooks/use-hide';
 import useReplies from '../../hooks/use-replies';
 import useStateString from '../../hooks/use-state-string';
 import CommentMedia from '../comment-media';
@@ -171,6 +172,24 @@ const PostMessageMobile = ({ post }: PostProps) => {
   );
 };
 
+const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
+  const { subplebbitAddress, cid } = reply || {};
+  const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
+  const { hidden } = useHide({ cid });
+
+  return (
+    <div className={styles.replyMobile}>
+      <div className={styles.reply}>
+        <div className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight}`} id={reply?.cid}>
+          <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
+          {reply.content && !hidden && <PostMessageMobile post={reply} />}
+          <ReplyBacklinks post={reply} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
   const { t } = useTranslation();
   const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
@@ -183,6 +202,9 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
   const linksCount = useCountLinksInReplies(post);
   const replies = useReplies(post);
 
+  const isInPostPageView = isPostPageView(location.pathname, params);
+  const { hidden, unhide } = useHide({ cid });
+
   // scroll to reply if pathname is reply permalink (backlink)
   const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
   useEffect(() => {
@@ -193,6 +215,17 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
   }, [location.pathname, replies, subplebbitAddress]);
 
   return (
+    <>
+      {hidden && !isInPostPageView ? (
+        <>
+          <hr className={styles.unhideButtonHr} />
+          <span className={styles.mobileUnhideButton}>
+            <span className='button' onClick={unhide}>
+              Show Hidden Thread
+            </span>
+          </span>
+        </>
+      ) : (
         <div className={styles.postMobile}>
           {showReplies && (
             <div className={styles.hrWrapper}>
@@ -226,24 +259,15 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
               !isRules &&
               replies &&
               showReplies &&
-          (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => {
+              (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
-            const isRouteLinkToReply = location.pathname.startsWith(`/p/${subplebbitAddress}/c/${reply?.cid}`);
-            return (
                 <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
-                <div className={styles.replyMobile}>
+                  <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
-                  <div className={styles.reply}>
-                    <div className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight}`} id={reply?.cid}>
-                      <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
-                      {reply.content && <PostMessageMobile post={reply} />}
-                      <ReplyBacklinks post={reply} />
                 </div>
-                  </div>
+              ))}
-                </div>
-              </div>
-            );
-          })}
           </div>
         </div>
+      )}
+    </>
   );
 };
 

src/views/post/post.module.css

@@ -216,6 +216,20 @@
   padding-bottom: 30px;
 }
 
+.mobileUnhideButton {
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.mobileUnhideButton span {
+  padding: 5px 18px 5px;
+}
+
+.unhideButtonHr {
+  margin: 0;
+}
+
 .quotePreview {
   padding: 3px;
 }