diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 9e3f9d29..768afb7b 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -364,7 +364,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => { const { t } = useTranslation(); - const { author, cid, content, link, pinned, postCid, subplebbitAddress } = post || {}; + const { author, cid, content, link, pinned, postCid, state, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const params = useParams(); const location = useLocation(); @@ -391,6 +391,8 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies } }, [location.pathname, replies, subplebbitAddress]); + const stateString = useStateString(post); + return (
{showReplies ? ( @@ -450,6 +452,14 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
))} + {stateString && stateString !== 'Failed' ? ( +
+
+ +
+ ) : ( + state === 'failed' && {t('failed')} + )} ); }; diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 283edf32..980e7ec3 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -285,7 +285,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => { const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => { const { t } = useTranslation(); - const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {}; + const { author, cid, content, pinned, postCid, replyCount, state, subplebbitAddress } = post || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const params = useParams(); const location = useLocation(); @@ -307,6 +307,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = } }, [location.pathname, replies, subplebbitAddress]); + const stateString = useStateString(post); + return ( <> {hidden && !isInPostPageView ? ( @@ -363,6 +365,13 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = ))} + {stateString && stateString !== 'Failed' ? ( +
+ +
+ ) : ( + state === 'failed' && {t('failed')} + )} )} diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css index b623960d..2583f8a3 100644 --- a/src/views/post/post.module.css +++ b/src/views/post/post.module.css @@ -514,6 +514,15 @@ vertical-align: top; } + +.stateString { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: calc(100vw - 28px); + width: 100vw; +} + @media (max-width: 640px) { .replyQuotePreview { margin-right: 10px; @@ -535,6 +544,10 @@ .authorAvatar { vertical-align: middle; } + + .stateString { + padding-left: 5px; + } } @media (min-width: 640px) { @@ -555,4 +568,8 @@ .replyMobile { display: none; } + + .stateString { + padding-top: 10px; + } } \ No newline at end of file