fix(post): deleted or removed comments still showed display name, avatar, role and ID

src/components/post-desktop/post-desktop.tsx

@@ -46,7 +46,7 @@ const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
 
 const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp } = post || {};
+  const { author, cid, deleted, locked, pinned, parentCid, postCid, removed, replyCount, shortCid, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
   const replies = useReplies(post);
   const { address, shortAddress } = author || {};
@@ -72,7 +72,8 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   const handleUserAddressClick = useAuthorAddressClick();
   const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
 
-  const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
+  const userID = shortAddress || accountShortAddress;
+  const userIDBackgroundColor = hashStringToColor(userID);
   const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
 
   return (
@@ -88,8 +89,12 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
           />
         ))}
       <span className={styles.nameBlock}>
-        <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
+        <span className={`${styles.name} ${(isDescription || isRules || authorRole) && !(deleted || removed) && styles.capcodeMod}`}>
-          {displayName ? (
+          {deleted ? (
+            _.capitalize(t('deleted'))
+          ) : removed ? (
+            _.capitalize(t('removed'))
+          ) : displayName ? (
             displayName.length <= 20 ? (
               displayName
             ) : (
@@ -101,30 +106,38 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
           ) : (
             _.capitalize(t('anonymous'))
           )}
-          <span className='capitalize'>{authorRole && ` ## Board ${authorRole}`} </span>
+          {!(deleted || removed) && <span className='capitalize'>{authorRole && ` ## Board ${authorRole}`} </span>}
         </span>
         {!(isDescription || isRules) && (
           <>
-            {author?.avatar && (
+            {author?.avatar && !(deleted || removed) ? (
               <span className={styles.authorAvatar}>
                 <img src={avatarImageUrl} alt='' />
               </span>
+            ) : (
+              ' '
             )}
             (ID:{' '}
+            {deleted ? (
+              t('deleted')
+            ) : removed ? (
+              t('removed')
+            ) : (
               <Tooltip
                 children={
                   <span
                     title={t('highlight_posts')}
                     className={styles.userAddress}
-                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
+                    onClick={() => handleUserAddressClick(userID, postCid)}
                     style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
                   >
-                  {shortAddress || accountShortAddress}
+                    {userID}
                   </span>
                 }
                 content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
                 showTooltip={isInPostPageView || showOmittedReplies[postCid] || (postReplyCount < 6 && !pinned)}
               />
+            )}
             ){' '}
           </>
         )}
@@ -280,7 +293,11 @@ const PostMessage = ({ post }: PostProps) => {
           showTooltip={!!reason}
         />
       ) : deleted ? (
-        <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
+        <Tooltip
+          children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>}
+          content={reason && `${t('reason')}: ${reason}`}
+          showTooltip={!!reason}
+        />
       ) : (
         <>
           {!showOriginal && <Markdown content={displayContent} />}

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

@@ -24,7 +24,7 @@ import _ from 'lodash';
 
 const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, link, locked, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = post || {};
+  const { author, cid, deleted, link, locked, parentCid, pinned, postCid, removed, shortCid, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, shortAddress } = author || {};
@@ -61,8 +61,12 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
       <div className={styles.postInfo}>
         <PostMenuMobile post={post} />
         <span className={styles.nameBlock}>
-          <span className={`${styles.name} ${(isDescription || isRules || authorRole) && styles.capcodeMod}`}>
+          <span className={`${styles.name} ${(isDescription || isRules || authorRole) && !(deleted || removed) && styles.capcodeMod}`}>
-            {displayName ? (
+            {removed ? (
+              _.capitalize(t('removed'))
+            ) : deleted ? (
+              _.capitalize(t('deleted'))
+            ) : displayName ? (
               displayName.length <= 20 ? (
                 displayName
               ) : (
@@ -74,16 +78,23 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
             ) : (
               _.capitalize(t('anonymous'))
             )}
-            <span className='capitalize'>{authorRole && ` ## Board ${authorRole}`} </span>
+            {!(deleted || removed) && <span className='capitalize'>{authorRole && ` ## Board ${authorRole}`} </span>}
           </span>
           {!(isDescription || isRules) && (
             <>
-              {author?.avatar && (
+              {author?.avatar && !(deleted || removed) ? (
                 <span className={styles.authorAvatar}>
                   <img src={avatarImageUrl} alt='' />
                 </span>
+              ) : (
+                ' '
               )}
               (ID: {''}
+              {removed ? (
+                _.lowerCase(t('removed'))
+              ) : deleted ? (
+                _.lowerCase(t('deleted'))
+              ) : (
                 <Tooltip
                   children={
                     <span
@@ -98,6 +109,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
                   content={`${numberOfPostsByAuthor === 1 ? t('1_post_by_this_id') : t('x_posts_by_this_id', { number: numberOfPostsByAuthor })}`}
                   showTooltip={isInPostPageView || postReplyCount < 6}
                 />
+              )}
               ){' '}
             </>
           )}
@@ -204,7 +216,11 @@ const PostMessageMobile = ({ post }: PostProps) => {
           showTooltip={!!reason}
         />
       ) : deleted ? (
-        <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
+        <Tooltip
+          children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>}
+          content={reason && `${t('reason')}: ${reason}`}
+          showTooltip={!!reason}
+        />
       ) : (
         <>
           {!showOriginal && <Markdown content={displayContent} />}