From c6ae1062b7c9e93e5a61b093fa7742a86f156c26 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 8 Jan 2023 04:04:52 +0100
Subject: [PATCH] [Refactoring] ESLint: Prevent falsy zero render (#2251)

---
 .eslintrc                                     |  7 ++++++
 package-lock.json                             | 23 +++++++++++++++++++
 package.json                                  |  1 +
 src/components/common/Audio.tsx               |  4 ++--
 src/components/common/File.tsx                |  4 ++--
 src/components/left/main/ForumPanel.tsx       |  2 +-
 .../left/settings/SettingsHeader.tsx          |  3 +--
 src/components/main/premium/GiftOption.tsx    |  2 +-
 .../mediaViewer/MediaViewerFooter.tsx         |  2 +-
 src/components/middle/ReactorListModal.tsx    |  4 ++--
 src/components/middle/composer/Composer.tsx   |  6 ++---
 .../middle/composer/InlineBotTooltip.tsx      |  2 +-
 src/components/right/PollResults.tsx          |  2 +-
 .../right/management/ManageInviteInfo.tsx     |  2 +-
 14 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 749affb19..01683a87e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,6 +6,7 @@
     "airbnb-typescript"
   ],
   "plugins": [
+    "jsx-expressions",
     "no-async-without-await",
     "teactn",
     "no-null"
@@ -88,6 +89,12 @@
         "ignoreDOMComponents": true
       }
     ],
+    "jsx-expressions/strict-logical-expressions": [
+      "error",
+      {
+        "allowString": true
+      }
+    ],
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/label-has-associated-control": "off",
diff --git a/package-lock.json b/package-lock.json
index da1c3a882..e4dc0f03a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
         "eslint-plugin-flowtype": "^8.0.3",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-jsx-expressions": "^1.3.1",
         "eslint-plugin-no-async-without-await": "^1.2.0",
         "eslint-plugin-no-null": "^1.0.2",
         "eslint-plugin-react": "^7.31.11",
@@ -7313,6 +7314,28 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/eslint-plugin-jsx-expressions": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-expressions/-/eslint-plugin-jsx-expressions-1.3.1.tgz",
+      "integrity": "sha512-7PTIx62Oy4l3Igtat361C/SCrJ4yXNNJRh/pzXMbzvPzFkvOpHBkTXITkH8PMLDu1RAdilDpjaOUv1m14DbY7w==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "^5.5.0",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "12.x || 14.x || >= 16"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^4.0.0 || ^5.0.0",
+        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-no-async-without-await": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-no-async-without-await/-/eslint-plugin-no-async-without-await-1.2.0.tgz",
diff --git a/package.json b/package.json
index 07fefb1ae..3fb15252c 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-jsx-expressions": "^1.3.1",
     "eslint-plugin-no-async-without-await": "^1.2.0",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-react": "^7.31.11",
diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx
index 2d85c14c0..75fe96fc8 100644
--- a/src/components/common/Audio.tsx
+++ b/src/components/common/Audio.tsx
@@ -312,7 +312,7 @@ const Audio: FC<OwnProps> = ({
           <p className="title" dir="auto" title={renderFirstLine()}>{renderText(renderFirstLine())}</p>
 
           <div className="message-date">
-            {date && (
+            {Boolean(date) && (
               <Link
                 className="date"
                 onClick={handleDateClick}
@@ -469,7 +469,7 @@ function renderAudio(
               <span className="performer" dir="auto" title={performer}>{renderText(performer)}</span>
             </>
           )}
-          {date && (
+          {Boolean(date) && (
             <>
               <span className="bullet">&bull;</span>
               <Link className="date" onClick={handleDateClick}>
diff --git a/src/components/common/File.tsx b/src/components/common/File.tsx
index 96830ca6d..d619e6fe2 100644
--- a/src/components/common/File.tsx
+++ b/src/components/common/File.tsx
@@ -146,7 +146,7 @@ const File: FC<OwnProps> = ({
             {isTransferring && transferProgress ? `${Math.round(transferProgress * 100)}%` : sizeString}
           </span>
           {sender && <span className="file-sender">{renderText(sender)}</span>}
-          {!sender && timestamp && (
+          {!sender && Boolean(timestamp) && (
             <>
               <span className="bullet" />
               <Link onClick={onDateClick}>{formatMediaDateTime(lang, timestamp * 1000, true)}</Link>
@@ -154,7 +154,7 @@ const File: FC<OwnProps> = ({
           )}
         </div>
       </div>
-      {sender && timestamp && (
+      {sender && Boolean(timestamp) && (
         <Link onClick={onDateClick}>{formatPastTimeShort(lang, timestamp * 1000)}</Link>
       )}
     </div>
diff --git a/src/components/left/main/ForumPanel.tsx b/src/components/left/main/ForumPanel.tsx
index a29058043..b8f53aaf2 100644
--- a/src/components/left/main/ForumPanel.tsx
+++ b/src/components/left/main/ForumPanel.tsx
@@ -243,7 +243,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
         sensitiveArea={TOPIC_LIST_SENSITIVE_AREA}
         beforeChildren={<div ref={scrollTopHandlerRef} className={styles.scrollTopHandler} />}
       >
-        {viewportIds?.length && (
+        {Boolean(viewportIds?.length) && (
           renderTopics()
         )}
         {isLoading && !viewportIds?.length && (
diff --git a/src/components/left/settings/SettingsHeader.tsx b/src/components/left/settings/SettingsHeader.tsx
index e1ba390d7..995727bde 100644
--- a/src/components/left/settings/SettingsHeader.tsx
+++ b/src/components/left/settings/SettingsHeader.tsx
@@ -191,8 +191,7 @@ const SettingsHeader: FC<OwnProps> = ({
         return (
           <div className="settings-main-header">
             <h3>{lang('FilterEdit')}</h3>
-
-            {editedFolderId && (
+            {Boolean(editedFolderId) && (
               <DropdownMenu
                 className="settings-more-menu"
                 trigger={SettingsMenuButton}
diff --git a/src/components/main/premium/GiftOption.tsx b/src/components/main/premium/GiftOption.tsx
index a2dc12afe..337449714 100644
--- a/src/components/main/premium/GiftOption.tsx
+++ b/src/components/main/premium/GiftOption.tsx
@@ -51,7 +51,7 @@ const GiftOption: FC<OwnProps> = ({
         <div className={styles.month}>{lang('Months', months)}</div>
         <div className={styles.perMonth}>
           {lang('PricePerMonth', formatCurrency(perMonth, currency, lang.code))}
-          {discount && (
+          {Boolean(discount) && (
             <span className={styles.discount} title={lang('GiftDiscount')}> &minus;{discount}% </span>
           )}
         </div>
diff --git a/src/components/mediaViewer/MediaViewerFooter.tsx b/src/components/mediaViewer/MediaViewerFooter.tsx
index 0fc7f9168..6ed119cf6 100644
--- a/src/components/mediaViewer/MediaViewerFooter.tsx
+++ b/src/components/mediaViewer/MediaViewerFooter.tsx
@@ -60,7 +60,7 @@ const MediaViewerFooter: FC<OwnProps> = ({
 
   return (
     <div className={classNames} onClick={stopEvent}>
-      {text && (
+      {Boolean(text) && (
         <div className="media-viewer-footer-content" onClick={!IS_SINGLE_COLUMN_LAYOUT ? onClick : undefined}>
           <p className={`media-text custom-scroll ${isMultiline ? 'multiline' : ''}`} dir="auto">{text}</p>
         </div>
diff --git a/src/components/middle/ReactorListModal.tsx b/src/components/middle/ReactorListModal.tsx
index f83027dac..5043cec6c 100644
--- a/src/components/middle/ReactorListModal.tsx
+++ b/src/components/middle/ReactorListModal.tsx
@@ -147,7 +147,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
             onClick={() => setChosenTab(undefined)}
           >
             <i className="icon-heart" />
-            {reactors?.count && formatIntegerCompact(reactors.count)}
+            {Boolean(reactors?.count) && formatIntegerCompact(reactors.count)}
           </Button>
           {allReactions.map((reaction) => {
             const count = reactions?.results
@@ -166,7 +166,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
                   className="reaction-filter-emoji"
                   availableReactions={availableReactions}
                 />
-                {count && formatIntegerCompact(count)}
+                {Boolean(count) && formatIntegerCompact(count)}
               </Button>
             );
           })}
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index dea7be37d..4d4f9c08f 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1280,7 +1280,7 @@ const Composer: FC<OwnProps & StateProps> = ({
               <i className="icon-schedule" />
             </Button>
           )}
-          {botKeyboardMessageId && !activeVoiceRecording && !editingMessage && (
+          {Boolean(botKeyboardMessageId) && !activeVoiceRecording && !editingMessage && (
             <ResponsiveHoverButton
               className={isBotKeyboardOpen ? 'activated' : ''}
               round
@@ -1291,7 +1291,7 @@ const Composer: FC<OwnProps & StateProps> = ({
               <i className="icon-bot-command" />
             </ResponsiveHoverButton>
           )}
-          {activeVoiceRecording && currentRecordTime && (
+          {activeVoiceRecording && Boolean(currentRecordTime) && (
             <span className="recording-state">
               {formatVoiceRecordDuration(currentRecordTime - startRecordTimeRef.current!)}
             </span>
@@ -1309,7 +1309,7 @@ const Composer: FC<OwnProps & StateProps> = ({
             peerType={attachMenuPeerType}
             theme={theme}
           />
-          {botKeyboardMessageId && (
+          {Boolean(botKeyboardMessageId) && (
             <BotKeyboardMenu
               messageId={botKeyboardMessageId}
               isOpen={isBotKeyboardOpen}
diff --git a/src/components/middle/composer/InlineBotTooltip.tsx b/src/components/middle/composer/InlineBotTooltip.tsx
index bea34bfdc..acb72d09b 100644
--- a/src/components/middle/composer/InlineBotTooltip.tsx
+++ b/src/components/middle/composer/InlineBotTooltip.tsx
@@ -202,7 +202,7 @@ const InlineBotTooltip: FC<OwnProps> = ({
       sensitiveArea={160}
     >
       {switchPm && renderSwitchPm()}
-      {renderedInlineBotResults?.length && renderContent()}
+      {Boolean(renderedInlineBotResults?.length) && renderContent()}
     </InfiniteScroll>
   );
 };
diff --git a/src/components/right/PollResults.tsx b/src/components/right/PollResults.tsx
index 396e22345..434965daa 100644
--- a/src/components/right/PollResults.tsx
+++ b/src/components/right/PollResults.tsx
@@ -54,7 +54,7 @@ const PollResults: FC<OwnProps & StateProps> = ({
     <div className="PollResults" dir={lang.isRtl ? 'rtl' : undefined}>
       <h3 className="poll-question" dir="auto">{renderText(summary.question, ['emoji', 'br'])}</h3>
       <div className="poll-results-list custom-scroll">
-        {lastSyncTime && summary.answers.map((answer) => (
+        {Boolean(lastSyncTime) && summary.answers.map((answer) => (
           <PollAnswerResults
             key={`${message.id}-${answer.option}`}
             chat={chat}
diff --git a/src/components/right/management/ManageInviteInfo.tsx b/src/components/right/management/ManageInviteInfo.tsx
index 5dd1ca2d0..9bf225fdd 100644
--- a/src/components/right/management/ManageInviteInfo.tsx
+++ b/src/components/right/management/ManageInviteInfo.tsx
@@ -146,7 +146,7 @@ const ManageInviteInfo: FC<OwnProps & StateProps> = ({
                 onClick={handleCopyClicked}
               />
               <Button className="copy-link" onClick={handleCopyClicked}>{lang('CopyLink')}</Button>
-              {expireDate && (
+              {Boolean(expireDate) && (
                 <p className="text-muted">
                   {isExpired
                     ? lang('ExpiredLink')