From 1dddc95d9bb228fe6ac85f95a0d2fd161c60edbe Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Thu, 16 Nov 2023 11:49:29 +0100
Subject: [PATCH] refactor(post tools): optimize by conditionally rendering
 labels

---
 src/components/post/post-tools/post-tools.tsx | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/post/post-tools/post-tools.tsx b/src/components/post/post-tools/post-tools.tsx
index 24e35bfd..d40e3833 100644
--- a/src/components/post/post-tools/post-tools.tsx
+++ b/src/components/post/post-tools/post-tools.tsx
@@ -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>
   );