diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 2d07539c..0d25cc2b 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/src/components/post-desktop/post-desktop.tsx @@ -22,6 +22,7 @@ import ReplyQuotePreview from '../reply-quote-preview'; import { PostProps } from '../../views/post/post'; import Timestamp from '../timestamp'; import _ from 'lodash'; +import { getFormattedDate } from '../../lib/utils/time-utils'; const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const { t } = useTranslation(); @@ -162,11 +163,13 @@ const PostMedia = ({ post }: PostProps) => { }; const PostMessage = ({ post }: PostProps) => { - const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; + const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; const { t } = useTranslation(); const params = useParams(); const location = useLocation(); const isInPostView = isPostPageView(location.pathname, params); + const [content, setContent] = useState(post?.content); + const [showOriginal, setShowOriginal] = useState(false); const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; @@ -189,7 +192,25 @@ const PostMessage = ({ post }: PostProps) => { ) : deleted ? ( {t('user_deleted_this_post')} ) : ( - + <> + + {edit && original?.content !== post?.content && ( + +
+ (Edited at {getFormattedDate(edit?.timestamp)},{' '} + { + setContent(showOriginal ? post?.content : original?.content); + setShowOriginal(!showOriginal); + }} + > + show {showOriginal ? 'edited' : 'original'} + + ) +
+ )} + )} {(removed || deleted) && reason && ( diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 3805e299..a79868e0 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/src/components/post-mobile/post-mobile.tsx @@ -5,6 +5,7 @@ import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import styles from '../../views/post/post.module.css'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import { getFormattedDate } from '../../lib/utils/time-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useHide from '../../hooks/use-hide'; @@ -118,7 +119,9 @@ const ReplyBacklinks = ({ post }: PostProps) => { const PostMessageMobile = ({ post }: PostProps) => { const { t } = useTranslation(); - const { cid, content, deleted, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; + const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {}; + const [content, setContent] = useState(post?.content); + const [showOriginal, setShowOriginal] = useState(false); const params = useParams(); const location = useLocation(); @@ -146,7 +149,25 @@ const PostMessageMobile = ({ post }: PostProps) => { ) : deleted ? ( {t('user_deleted_this_post')} ) : ( - + <> + + {edit && original?.content !== post?.content && ( + +
+ (Edited at {getFormattedDate(edit?.timestamp)},{' '} + { + setContent(showOriginal ? post?.content : original?.content); + setShowOriginal(!showOriginal); + }} + > + show {showOriginal ? 'edited' : 'original'} + + ) +
+ )} + )} {(removed || deleted) && reason && ( diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css index eb1f26fb..b4a4f564 100644 --- a/src/views/post/post.module.css +++ b/src/views/post/post.module.css @@ -462,6 +462,21 @@ padding: 1.5px 0; } +.editedInfo { + color: var(--post-mobile-abbr-text-color); +} + +.showOriginal { + color: var(--post-link-text-color); + text-decoration: var(--post-content-link-text-decoration); +} + +.showOriginal:hover { + cursor: pointer; + color: var(--post-link-text-color-hover); + text-decoration: var(--post-content-link-text-decoration-hover); +} + @media (max-width: 640px) { .replyQuotePreview { margin-right: 10px;