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 && ( -
-
-
- )} -
-
-
- - {content && } -
- {!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 && } - -
-
-
+
+
+
+ + {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; }