style(post): improve original content display from edit

This commit is contained in:
Tom (plebeius.eth)
2024-06-20 13:17:38 +02:00
parent 73f4136f53
commit 6ec780217a
2 changed files with 10 additions and 22 deletions
+5 -11
View File
@@ -163,12 +163,11 @@ const PostMedia = ({ post }: PostProps) => {
};
const PostMessage = ({ post }: PostProps) => {
const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
const { cid, content, 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;
@@ -193,19 +192,14 @@ const PostMessage = ({ post }: PostProps) => {
<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>
) : (
<>
<Markdown content={displayContent} spoiler={spoiler} />
{!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
{edit && original?.content !== post?.content && (
<span className={styles.editedInfo}>
{showOriginal && <Markdown content={original?.content} />}
<br />
(Edited at {getFormattedDate(edit?.timestamp)},{' '}
<span
className={styles.showOriginal}
onClick={() => {
setContent(showOriginal ? post?.content : original?.content);
setShowOriginal(!showOriginal);
}}
>
show {showOriginal ? 'edited' : 'original'}
<span className={styles.showOriginal} onClick={() => setShowOriginal(!showOriginal)}>
{showOriginal ? 'hide original' : 'show original'}
</span>
)
</span>
+5 -11
View File
@@ -119,8 +119,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
const PostMessageMobile = ({ post }: PostProps) => {
const { t } = useTranslation();
const { cid, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
const [content, setContent] = useState(post?.content);
const { cid, content, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
const [showOriginal, setShowOriginal] = useState(false);
const params = useParams();
@@ -150,19 +149,14 @@ const PostMessageMobile = ({ post }: PostProps) => {
<span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
) : (
<>
<Markdown content={displayContent} spoiler={spoiler} />
{!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
{edit && original?.content !== post?.content && (
<span className={styles.editedInfo}>
{showOriginal && <Markdown content={original?.content} />}
<br />
(Edited at {getFormattedDate(edit?.timestamp)},{' '}
<span
className={styles.showOriginal}
onClick={() => {
setContent(showOriginal ? post?.content : original?.content);
setShowOriginal(!showOriginal);
}}
>
show {showOriginal ? 'edited' : 'original'}
<span className={styles.showOriginal} onClick={() => setShowOriginal(!showOriginal)}>
{showOriginal ? 'hide original' : 'show original'}
</span>
)
</span>