fix(post-status): base pending and failed labels on cid and state

Pending now means cid is missing, failed now means state is 'failed'.

src/components/comment-content/comment-content.tsx

@@ -114,13 +114,16 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
   const shouldShowReplyingToReply = isReplyingToReply && (parentCid ? !contentNumbers.has(cidToNumber[parentCid] ?? -1) : true);
 
   const stateString = useStateString(post);
+  const hasFailedState = state === 'failed';
 
-  const loadingString = <div className={styles.stateString}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString || t('loading')} /> : stateString}</div>;
+  const loadingString = (
+    <div className={styles.stateString}>{!hasFailedState ? <LoadingEllipsis string={stateString || t('loading')} /> : stateString || capitalize(t('failed'))}</div>
+  );
 
   return (
     <blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines}`}>
       {isReply &&
-        state !== 'failed' &&
+        !hasFailedState &&
         !(deleted || removed) &&
         (filteredQuotedCids.length > 0
           ? filteredQuotedCids.map((cid: string) => <QuotedCidLink key={cid} cid={cid} postCid={postCid} />)
@@ -206,7 +209,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
           />
         </span>
       )}
-      {!cid && state === 'pending' && stateString !== 'Failed' && (
+      {!cid && !hasFailedState && (
         <>
           <br />
           <br />

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

@@ -86,7 +86,7 @@ const PostInfo = ({
   const { address, shortAddress } = author || {};
   const displayName = author?.displayName?.trim();
   const authorRole = roles?.[address]?.role?.replace('moderator', 'mod');
-  const stateString = useStateString(post);
+  const hasFailedState = state === 'failed';
   const isReply = parentCid;
   const { showOmittedReplies } = useShowOmittedReplies();
   const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
@@ -335,9 +335,7 @@ const PostInfo = ({
           ) : (
             <>
               <span>No.</span>
-              <span className={styles.pendingCid}>
+              <span className={styles.pendingCid}>{hasFailedState ? capitalize(t('failed')) : capitalize(t('pending'))}</span>
-                {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''}
-              </span>
             </>
           )}
           {pinned && (
@@ -702,6 +700,7 @@ const PostDesktop = ({
   const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
 
   const stateString = useStateString(post) || t('downloading_board');
+  const hasFailedState = state === 'failed';
 
   const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -910,13 +909,13 @@ const PostDesktop = ({
             </div>
           ))}
       </div>
-      {!isInPendingPostView && stateString && stateString !== 'Failed' && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
+      {!isInPendingPostView && stateString && !hasFailedState && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
         <div className={styles.stateString}>
           <br />
           <LoadingEllipsis string={stateString} />
         </div>
       ) : (
-        state === 'failed' && <span className={styles.error}>{t('failed')}</span>
+        hasFailedState && <span className={styles.error}>{t('failed')}</span>
       )}
     </div>
   );

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

@@ -168,7 +168,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
   const alertThresholdSeconds = getAlertThresholdSeconds();
   const isOverThreshold = isAwaitingApproval && timeWaiting > alertThresholdSeconds;
 
-  const stateString = useStateString(post);
+  const hasFailedState = state === 'failed';
   const postMenuProps = useMemo(() => selectPostMenuProps(post), [post]);
 
   const pseudonymityMode = useSubplebbitField(subplebbitAddress, (sub) => sub?.features?.pseudonymityMode);
@@ -326,9 +326,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
             ) : (
               <>
                 <span>No.</span>
-                <span className={styles.pendingCid}>
+                <span className={styles.pendingCid}>{hasFailedState ? capitalize(t('failed')) : capitalize(t('pending'))}</span>
-                  {state === 'failed' || stateString === 'Failed' ? capitalize(t('failed')) : state === 'pending' ? capitalize(t('pending')) : ''}
-                </span>
               </>
             )}
             {shouldShowPendingApprovalButtons && (
@@ -513,6 +511,7 @@ const PostMobile = ({
   const { hidden, unhide } = useHide({ cid });
 
   const stateString = useStateString(post) || t('loading_post');
+  const hasFailedState = state === 'failed';
 
   // Filter out deleted replies with no children for both virtuoso and non-virtuoso rendering
   const filteredReplies = useMemo(() => (replies || []).filter((reply) => !(reply.deleted && (reply.replyCount === 0 || !reply.replyCount))), [replies]);
@@ -669,12 +668,12 @@ const PostMobile = ({
                 </div>
               ))}
           </div>
-          {!isInPendingPostView && stateString && stateString !== 'Failed' && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
+          {!isInPendingPostView && stateString && !hasFailedState && state !== 'succeeded' && isInPostPageView && !(!showReplies && !showAllReplies) ? (
             <div className={styles.stateString}>
               <LoadingEllipsis string={stateString} />
             </div>
           ) : (
-            state === 'failed' && <span className={styles.error}>{t('failed')}</span>
+            hasFailedState && <span className={styles.error}>{t('failed')}</span>
           )}
         </div>
       )}