External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(post): improve original content display from edit

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-desktop/post-desktop.tsx
+5 -11
View File
@@ -163,12 +163,11 @@ const PostMedia = ({ post }: PostProps) => {
}; };
const PostMessage = ({ 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 { t } = useTranslation();
const params = useParams(); const params = useParams();
const location = useLocation(); const location = useLocation();
const isInPostView = isPostPageView(location.pathname, params); const isInPostView = isPostPageView(location.pathname, params);
const [content, setContent] = useState(post?.content);
const [showOriginal, setShowOriginal] = useState(false); const [showOriginal, setShowOriginal] = useState(false);
const displayContent = content && !isInPostView && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; 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> <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 && ( {edit && original?.content !== post?.content && (
<span className={styles.editedInfo}> <span className={styles.editedInfo}>
{showOriginal && <Markdown content={original?.content} />}
<br /> <br />
(Edited at {getFormattedDate(edit?.timestamp)},{' '} (Edited at {getFormattedDate(edit?.timestamp)},{' '}
<span <span className={styles.showOriginal} onClick={() => setShowOriginal(!showOriginal)}>
className={styles.showOriginal} {showOriginal ? 'hide original' : 'show original'}
onClick={() => {
setContent(showOriginal ? post?.content : original?.content);
setShowOriginal(!showOriginal);
}}
>
show {showOriginal ? 'edited' : 'original'}
</span> </span>
) )
</span> </span>
src/components/post-mobile/post-mobile.tsx
+5 -11
View File
@@ -119,8 +119,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
const PostMessageMobile = ({ post }: PostProps) => { const PostMessageMobile = ({ post }: PostProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
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 [content, setContent] = useState(post?.content);
const [showOriginal, setShowOriginal] = useState(false); const [showOriginal, setShowOriginal] = useState(false);
const params = useParams(); const params = useParams();
@@ -150,19 +149,14 @@ const PostMessageMobile = ({ post }: PostProps) => {
<span className={styles.removedContent}>{t('user_deleted_this_post')}</span> <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 && ( {edit && original?.content !== post?.content && (
<span className={styles.editedInfo}> <span className={styles.editedInfo}>
{showOriginal && <Markdown content={original?.content} />}
<br /> <br />
(Edited at {getFormattedDate(edit?.timestamp)},{' '} (Edited at {getFormattedDate(edit?.timestamp)},{' '}
<span <span className={styles.showOriginal} onClick={() => setShowOriginal(!showOriginal)}>
className={styles.showOriginal} {showOriginal ? 'hide original' : 'show original'}
onClick={() => {
setContent(showOriginal ? post?.content : original?.content);
setShowOriginal(!showOriginal);
}}
>
show {showOriginal ? 'edited' : 'original'}
</span> </span>
) )
</span> </span>