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

fix(comment-content): render reason text as comment content

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-05-31 16:09:01 +07:00
parent d48cf10ee8
commit d3b5c40321
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-content/__tests__/comment-content.test.tsx
+4 -3
View File
@@ -408,11 +408,11 @@ describe('CommentContent', () => {
cid: 'post-2', cid: 'post-2',
content: 'ignored', content: 'ignored',
postCid: 'post-2', postCid: 'post-2',
reason: 'spam', reason: 'duplicate of >>96',
removed: true, removed: true,
}); });
expect(container.textContent).toContain('this_post_was_removed'); expect(container.textContent).toContain('this_post_was_removed');
expect(container.textContent).toContain('Reason: "spam"'); expect(queryMarkdownText()).toEqual(['Reason: duplicate of >>96']);
await renderContent({ await renderContent({
cid: 'post-3', cid: 'post-3',
@@ -422,7 +422,7 @@ describe('CommentContent', () => {
reason: 'self-delete', reason: 'self-delete',
}); });
expect(container.textContent).toContain('user_deleted_this_post'); expect(container.textContent).toContain('user_deleted_this_post');
expect(container.textContent).toContain('Reason: "self-delete"'); expect(queryMarkdownText()).toEqual(['Reason: self-delete']);
}); });
it('renders pending approval, ban details, and loading or failed states', async () => { it('renders pending approval, ban details, and loading or failed states', async () => {
@@ -442,6 +442,7 @@ describe('CommentContent', () => {
expect(container.textContent).toContain('pending_mod_approval'); expect(container.textContent).toContain('pending_mod_approval');
expect(container.textContent).toContain('pending-reason:rules violation'); expect(container.textContent).toContain('pending-reason:rules violation');
expect(queryMarkdownText()).toEqual(['queued body', 'pending-reason:rules violation']);
const tooltip = container.querySelector('[data-testid="tooltip"]'); const tooltip = container.querySelector('[data-testid="tooltip"]');
expect(tooltip?.getAttribute('title')).toContain('ban:short:music-posting.eth:2024-01-01 12:00:00'); expect(tooltip?.getAttribute('title')).toContain('ban:short:music-posting.eth:2024-01-01 12:00:00');
src/components/comment-content/comment-content.tsx
+14 -12
View File
@@ -156,7 +156,14 @@ const CommentContent = ({
const failedError = getFailedCommentError(resolvedPost); const failedError = getFailedCommentError(resolvedPost);
const failedErrorMessage = formatErrorMessageForDisplay(failedError); const failedErrorMessage = formatErrorMessageForDisplay(failedError);
const shouldShowUnpublishedStateDetails = !cid && (!hasFailedState || Boolean(failedError)); const shouldShowUnpublishedStateDetails = !cid && (!hasFailedState || Boolean(failedError));
const reasonMessage = reason ? `${capitalize(t('reason'))}: ${reason}` : undefined;
const pendingApprovalReason = pendingApproval ? reason?.trim() : undefined; const pendingApprovalReason = pendingApproval ? reason?.trim() : undefined;
const pendingApprovalReasonMessage = pendingApprovalReason
? t('pending_mod_approval_reason', {
reason: pendingApprovalReason,
interpolation: { escapeValue: false },
})
: undefined;
const loadingString = ( const loadingString = (
<div className={styles.stateString}> <div className={styles.stateString}>
@@ -193,21 +200,21 @@ const CommentContent = ({
{purged ? ( {purged ? (
<span className={styles.grayEditMessage}>{capitalize(t('this_post_was_purged'))}</span> <span className={styles.grayEditMessage}>{capitalize(t('this_post_was_purged'))}</span>
) : removed ? ( ) : removed ? (
reason ? ( reasonMessage ? (
<> <>
<span className={styles.redEditMessage}>({t('this_post_was_removed')})</span> <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
<br /> <br />
<br /> <br />
<span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span> {renderContent(reasonMessage)}
</> </>
) : ( ) : (
<span className={styles.grayEditMessage}>{capitalize(t('this_post_was_removed'))}.</span> <span className={styles.grayEditMessage}>{capitalize(t('this_post_was_removed'))}.</span>
) )
) : deleted ? ( ) : deleted ? (
reason ? ( reasonMessage ? (
<> <>
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '} <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
<span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span> {renderContent(reasonMessage)}
</> </>
) : ( ) : (
<span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span> <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
@@ -220,18 +227,13 @@ const CommentContent = ({
<br /> <br />
<br /> <br />
<span className={styles.pendingApproval}>({t('pending_mod_approval')})</span> <span className={styles.pendingApproval}>({t('pending_mod_approval')})</span>
{pendingApprovalReason && ( {pendingApprovalReasonMessage ? (
<> <>
<br /> <br />
<br /> <br />
<span className={styles.grayEditMessage}> {renderContent(pendingApprovalReasonMessage)}
{t('pending_mod_approval_reason', {
reason: pendingApprovalReason,
interpolation: { escapeValue: false },
})}
</span>
</> </>
)} ) : null}
</> </>
)} )}
{((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && !isPrivilegedAuthor && ( {((!isInPostView && content?.length > 1000 && !showFullComment) || (isInPostView && content?.length > 2000 && !showFullComment)) && !isPrivilegedAuthor && (