mirror/seedit
1
0
Fork 0
mirror of https://github.com/plebbit/seedit.git synced 2026-06-14 11:06:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor(post tools): optimize by conditionally rendering labels

Browse Source
This commit is contained in:
plebeius.eth
2023-11-16 11:49:29 +01:00
parent aee35ef435
commit 1dddc95d9b
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/post/post-tools/post-tools.tsx
View File

@@ -11,27 +11,35 @@ interface PostToolsProps {
showReplyForm?: () => void;
}
const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress, showReplyForm }: PostToolsProps) => {
const SpoilerLabel = () => {
const { t } = useTranslation();
const validReplyCount = isNaN(replyCount) ? 0 : replyCount;
const commentCount = validReplyCount === 0 ? t('post_no_comments') : `${validReplyCount} ${validReplyCount === 1 ? t('post_comment') : t('post_comments')}`;
const hasLabel = spoiler || cid === undefined;
const spoilerLabel = (
return (
<li>
<span className={`${styles.stamp} ${styles.stampSpoiler}`}>
<span className={`${styles.content} ${styles.contentSpoiler}`}>{spoiler && t('spoiler').toUpperCase()}</span>
<span className={`${styles.content} ${styles.contentSpoiler}`}>{t('spoiler').toUpperCase()}</span>
</span>
</li>
);
};
const pendingLabel = (
const PendingLabel = () => {
const { t } = useTranslation();
return (
<li>
<span className={`${styles.stamp} ${styles.stampPending}`}>
<span className={`${styles.content} ${styles.contentPending}`}>{t('pending').toUpperCase()}</span>
</span>
</li>
);
};
const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress, showReplyForm }: PostToolsProps) => {
const { t } = useTranslation();
const validReplyCount = isNaN(replyCount) ? 0 : replyCount;
const commentCount = validReplyCount === 0 ? t('post_no_comments') : `${validReplyCount} ${validReplyCount === 1 ? t('post_comment') : t('post_comments')}`;
const hasLabel = spoiler || cid === undefined;
const postLabels = (
<>
@@ -78,8 +86,8 @@ const PostTools = ({ cid, isReply, replyCount, spoiler, subplebbitAddress, showR
return (
<ul className={`${styles.buttons} ${isReply ? styles.buttonsReply : ''}`}>
{spoiler && spoilerLabel}
{cid === undefined && pendingLabel}
{spoiler && <SpoilerLabel />}
{cid === undefined && <PendingLabel />}
{isReply ? replyLabels : postLabels}
</ul>
);