diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 6a7db09c..b2926061 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -84,131 +84,135 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: const userIDBackgroundColor = hashStringToColor(userID); const userIDTextColor = getTextColorForBackground(userIDBackgroundColor); + const { hidden } = useHide(post); + return (
{!isHidden && } - {title && - (title.length <= 75 ? ( - {title} - ) : ( - {title.slice(0, 75) + '(...)'} } - content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`} - /> - ))} - - - {deleted ? ( - _.capitalize(t('deleted')) - ) : removed ? ( - _.capitalize(t('removed')) - ) : displayName ? ( - displayName.length <= 20 ? ( - displayName - ) : ( - - ) + + {title && + (title.length <= 75 ? ( + {title} ) : ( - _.capitalize(t('anonymous')) - )} - {!(deleted || removed) && {authorRole && ` ## Board ${authorRole}`} } - - {!(isDescription || isRules) && ( - <> - {author?.avatar && !(deleted || removed) && !hideAvatars ? ( - - - - ) : ( - ' ' - )} - (ID:{' '} - {deleted ? ( - t('deleted') - ) : removed ? ( - t('removed') - ) : ( - handleUserAddressClick(userID, postCid)} - style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }} - > - {userID} - - } - content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`} - showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)} - /> - )} - ){' '} - - )} - - - {getFormattedDate(timestamp)}} content={getFormattedTimeAgo(timestamp)} /> - {isDescription || isRules ? '' : ' '} - - - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( - - {' '} - p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}{' '} - - )} - {!(isDescription || isRules) && - (cid ? ( - - !cid && e.preventDefault()}> - c/ - - openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}> - {shortCid} - - - ) : ( - <> - c/ - - {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} - - + {title.slice(0, 75) + '(...)'} } + content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`} + /> ))} - {pinned && ( - - + + + {deleted ? ( + _.capitalize(t('deleted')) + ) : removed ? ( + _.capitalize(t('removed')) + ) : displayName ? ( + displayName.length <= 20 ? ( + displayName + ) : ( + + ) + ) : ( + _.capitalize(t('anonymous')) + )} + {!(deleted || removed) && {authorRole && ` ## Board ${authorRole}`} } - )} - {locked && ( - - - - )} - {!isInPostPageView && !isReply && !isHidden && ( - - [ - !cid && !isDescription && !isRules && e.preventDefault()} - > - {_.capitalize(t('reply'))} - - ] - - )} + {!(isDescription || isRules) && ( + <> + {author?.avatar && !(deleted || removed) && !hideAvatars ? ( + + + + ) : ( + ' ' + )} + (ID:{' '} + {deleted ? ( + t('deleted') + ) : removed ? ( + t('removed') + ) : ( + handleUserAddressClick(userID, postCid)} + style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }} + > + {userID} + + } + content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`} + showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)} + /> + )} + ){' '} + + )} + + + {getFormattedDate(timestamp)}} content={getFormattedTimeAgo(timestamp)} /> + {isDescription || isRules ? '' : ' '} + + + {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( + + {' '} + p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}{' '} + + )} + {!(isDescription || isRules) && + (cid ? ( + + !cid && e.preventDefault()}> + c/ + + openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}> + {shortCid} + + + ) : ( + <> + c/ + + {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} + + + ))} + {pinned && ( + + + + )} + {locked && ( + + + + )} + {!isInPostPageView && !isReply && !isHidden && ( + + [ + !cid && !isDescription && !isRules && e.preventDefault()} + > + {_.capitalize(t('reply'))} + + ] + + )} + + {!(removed || deleted) && } + {cid && + parentCid && + replies && + replies.map( + (reply: Comment, index: number) => reply?.parentCid === cid && reply?.cid && , + )} - {!(removed || deleted) && } - {cid && - parentCid && - replies && - replies.map( - (reply: Comment, index: number) => reply?.parentCid === cid && reply?.cid && , - )}
); }; @@ -396,12 +400,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { return (
{'>>'}
-
+
{link && !hidden && !(deleted || removed) && isValidURL(link) && } {!(hidden || removed || deleted) && } @@ -461,7 +460,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies )}
{link && !isHidden && !(deleted || removed) && isValidURL(link) && } - + {!isHidden && !content &&
} {!isHidden && content && }
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index d5fd8e30..15f1f0a3 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -66,112 +66,116 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P const userIDBackgroundColor = hashStringToColor(shortAddress || pendingShortAddress); const userIDTextColor = getTextColorForBackground(userIDBackgroundColor); + const { hidden } = useHide(post); + return ( <>
- - - {removed ? ( - _.capitalize(t('removed')) - ) : deleted ? ( - _.capitalize(t('deleted')) - ) : displayName ? ( - displayName.length <= 20 ? ( - displayName - ) : ( - - ) - ) : ( - _.capitalize(t('anonymous')) - )} - {!(deleted || removed) && {authorRole && ` ## Board ${authorRole}`} } - - {!(isDescription || isRules) && ( - <> - {author?.avatar && !(deleted || removed) && !hideAvatars ? ( - - - - ) : ( - ' ' - )} - (ID: {''} + + + {removed ? ( - _.lowerCase(t('removed')) + _.capitalize(t('removed')) ) : deleted ? ( - _.lowerCase(t('deleted')) + _.capitalize(t('deleted')) + ) : displayName ? ( + displayName.length <= 20 ? ( + displayName + ) : ( + + ) ) : ( - handleUserAddressClick(shortAddress || pendingShortAddress, postCid)} - style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }} - > - {shortAddress || pendingShortAddress} - - } - content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`} - showTooltip={isInPostPageView || postReplyCount < 6} - /> + _.capitalize(t('anonymous')) )} - ){' '} - - )} - {pinned && ( - - + {!(deleted || removed) && {authorRole && ` ## Board ${authorRole}`} } - )} - {locked && ( - - - - )} - {title && ( - - {title.length <= 30 ? ( - {title} - ) : ( - {title.slice(0, 30) + '(...)'}} - content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`} - /> - )} - - )} - - - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( -
- {' '} - p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)} -
- )} - {getFormattedDate(timestamp)}
} content={getFormattedTimeAgo(timestamp)} />{' '} - {!(isDescription || isRules) && - (cid ? ( - - !cid && e.preventDefault()}> - c/ - - openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}> - {shortCid.slice(0, -4)} - - - ) : ( + {!(isDescription || isRules) && ( <> - c/ - - {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} - + {author?.avatar && !(deleted || removed) && !hideAvatars ? ( + + + + ) : ( + ' ' + )} + (ID: {''} + {removed ? ( + _.lowerCase(t('removed')) + ) : deleted ? ( + _.lowerCase(t('deleted')) + ) : ( + handleUserAddressClick(shortAddress || pendingShortAddress, postCid)} + style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }} + > + {shortAddress || pendingShortAddress} +
+ } + content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`} + showTooltip={isInPostPageView || postReplyCount < 6} + /> + )} + ){' '} - ))} + )} + {pinned && ( + + + + )} + {locked && ( + + + + )} + {title && ( + + {title.length <= 30 ? ( + {title} + ) : ( + {title.slice(0, 30) + '(...)'}} + content={title.length < 1000 ? title : title.slice(0, 1000) + `... ${t('title_too_long')}`} + /> + )} + + )} + + + {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( +
+ {' '} + p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)} +
+ )} + {getFormattedDate(timestamp)}
} content={getFormattedTimeAgo(timestamp)} />{' '} + {!(isDescription || isRules) && + (cid ? ( + + !cid && e.preventDefault()}> + c/ + + openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}> + {shortCid.slice(0, -4)} + + + ) : ( + <> + c/ + + {state === 'failed' || stateString === 'Failed' ? _.capitalize(t('failed')) : state === 'pending' ? _.capitalize(t('pending')) : ''} + + + ))} +
{(hasThumbnail || link) && !(deleted || removed) && ( @@ -322,7 +326,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {