feat(post): add deleted and removed styling, mod reason, file deleted

src/components/comment-media/comment-media.tsx

@@ -9,6 +9,7 @@ import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
+  isDeleted?: boolean;
   isOutOfFeed?: boolean; // virtuoso wrapper unneeded
   isReply: boolean;
   linkHeight?: number;
@@ -17,7 +18,7 @@ interface MediaProps {
   setShowThumbnail: (showThumbnail: boolean) => void;
 }
 
-const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
   const [hasError, setHasError] = useState(false);
   const handleError = () => setHasError(true);
@@ -64,16 +65,12 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid
     thumbnailComponent = <audio src={url} controls />;
   }
 
-  if (hasError) {
-    thumbnailComponent = <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />;
-  }
-
   const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
   const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
 
   const linkWithoutThumbnail = url && new URL(url);
 
-  return hasError ? (
+  return hasError || isDeleted ? (
     <img className={styles.fileDeleted} src='/assets/filedeleted-res.gif' alt='File deleted' />
   ) : isOutOfFeed ? (
     <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
@@ -136,7 +133,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
   );
 };
 
-const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const { type, url } = commentMediaInfo || {};
@@ -147,6 +144,7 @@ const CommentMedia = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, link
         {url && (
           <Thumbnail
             commentMediaInfo={commentMediaInfo}
+            isDeleted={isDeleted}
             isOutOfFeed={isOutOfFeed}
             isReply={isReply}
             linkHeight={linkHeight}

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-import { useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -111,7 +111,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
 const PostMedia = ({ post }: PostProps) => {
   const { t } = useTranslation();
-  const { link, linkHeight, linkWidth, parentCid } = post || {};
+  const { deleted, link, linkHeight, linkWidth, parentCid, removed } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const commentMediaInfo = getCommentMediaInfo(post);
   const { type, url } = commentMediaInfo || {};
@@ -155,6 +155,7 @@ const PostMedia = ({ post }: PostProps) => {
           <CommentMedia
             commentMediaInfo={commentMediaInfo}
             isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
+            isDeleted={removed || deleted}
             isReply={isReply}
             linkHeight={linkHeight}
             linkWidth={linkWidth}
@@ -168,7 +169,7 @@ const PostMedia = ({ post }: PostProps) => {
 };
 
 const PostMessage = ({ post }: PostProps) => {
-  const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
+  const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
 
   const params = useParams();
   const location = useLocation();
@@ -195,7 +196,20 @@ const PostMessage = ({ post }: PostProps) => {
           <br />
         </>
       )}
-      <Markdown content={displayContent} />
+      {removed ? (
+        <span className={styles.removedContent}>(THIS POST WAS REMOVED)</span>
+      ) : deleted ? (
+        <span className={styles.removedContent}>User deleted this post.</span>
+      ) : (
+        <Markdown content={displayContent} />
+      )}
+      {(removed || deleted) && reason && (
+        <span>
+          <br />
+          <br />
+          reason: {reason}
+        </span>
+      )}
       {!isReply && content.length > 1000 && !isInPostView && (
         <span className={styles.abbr}>
           <br />
@@ -213,6 +227,11 @@ const PostMessage = ({ post }: PostProps) => {
 };
 
 const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
+  // handle pending mod or author edit
+  const { editedComment } = useEditedComment({ comment: post });
+  if (editedComment) {
+    post = editedComment;
+  }
   const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
 

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -19,7 +19,7 @@ import _ from 'lodash';
 
 const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, link, linkHeight, linkWidth, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, removed, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, displayName, shortAddress } = author || {};
 
@@ -98,6 +98,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
         <CommentMedia
           commentMediaInfo={commentMediaInfo}
           isOutOfFeed={isDescription || isRules} // virtuoso wrapper unneeded
+          isDeleted={removed || deleted}
           isReply={isReply}
           linkHeight={linkHeight}
           linkWidth={linkWidth}
@@ -110,7 +111,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
 };
 
 const PostMessageMobile = ({ post }: PostProps) => {
-  const { cid, content, parentCid, postCid, state, subplebbitAddress } = post || {};
+  const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
 
   const params = useParams();
   const location = useLocation();
@@ -138,7 +139,20 @@ const PostMessageMobile = ({ post }: PostProps) => {
             <br />
           </>
         )}
-        <Markdown content={displayContent} />
+        {removed ? (
+          <span className={styles.removedContent}>(THIS POST WAS REMOVED)</span>
+        ) : deleted ? (
+          <span className={styles.removedContent}>User deleted this post.</span>
+        ) : (
+          <Markdown content={displayContent} />
+        )}
+        {(removed || deleted) && reason && (
+          <span>
+            <br />
+            <br />
+            reason: {reason}
+          </span>
+        )}
         {!isReply && content.length > 1000 && !isInPostView && (
           <span className={styles.abbr}>
             <br />
@@ -157,6 +171,11 @@ const PostMessageMobile = ({ post }: PostProps) => {
 };
 
 const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) => {
+  // handle pending mod or author edit
+  const { editedComment } = useEditedComment({ comment: post });
+  if (editedComment) {
+    post = editedComment;
+  }
   const { t } = useTranslation();
   const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api

src/components/post/post.module.css

@@ -392,6 +392,11 @@
   cursor: pointer;
 }
 
+.removedContent {
+  font-weight: 700;
+  color: red;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;