diff --git a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index ff47969a..9f2f4e75 100644
--- a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/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 (
{
- copyShareLinkToClipboard(subplebbitAddress, cid);
+ 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) && (
+
{
+ hidden ? unhide() : hide();
+ onClose();
+ }}
+ >
+
+ {hidden ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
+
+
+ )
+ );
+};
+
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 }) => {
{cid && subplebbitAddress && }
+ {cid && subplebbitAddress && }
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && }
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 333baf00..fd1d956e 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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 (
+
+
+
+
+ {reply.content && !hidden &&
}
+
+
+
+
+ );
+};
+
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,57 +215,59 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
}, [location.pathname, replies, subplebbitAddress]);
return (
-
- {showReplies && (
-
-
-
- )}
-
-
-
- {!isInPostView && !isInPendingPostView && showReplies && (
-
-
- {replyCount > 0 && `${replyCount} Replies`}
- {linksCount > 0 && ` / ${linksCount} Links`}
-
-
- {t('view_thread')}
-
+ <>
+ {hidden && !isInPostPageView ? (
+ <>
+
+
+
+ Show Hidden Thread
+
+
+ >
+ ) : (
+
+ {showReplies && (
+
+
)}
-
- {!(pinned && !isInPostView) &&
- !isInPendingPostView &&
- !isDescription &&
- !isRules &&
- replies &&
- showReplies &&
- (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => {
- const isRouteLinkToReply = location.pathname.startsWith(`/p/${subplebbitAddress}/c/${reply?.cid}`);
- return (
-
(replyRefs.current[index] = el)}>
-
-
-
-
- {reply.content &&
}
-
-
-
-
+
+ {!isInPostView && !isInPendingPostView && showReplies && (
+
+
+ {replyCount > 0 && `${replyCount} Replies`}
+ {linksCount > 0 && ` / ${linksCount} Links`}
+
+
+ {t('view_thread')}
+
+
+ )}
+
+ {!(pinned && !isInPostView) &&
+ !isInPendingPostView &&
+ !isDescription &&
+ !isRules &&
+ replies &&
+ showReplies &&
+ (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
+
(replyRefs.current[index] = el)}>
+
+
+ ))}
+
+
+ )}
+ >
);
};
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 33d87525..4fc85fdf 100644
--- a/src/views/post/post.module.css
+++ b/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;
}