[Refactoring] ESLint: Prevent falsy zero render (#2251)

.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",

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",

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",

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}>

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>

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 && (

src/components/left/settings/SettingsHeader.tsx

@@ -191,8 +191,7 @@ const SettingsHeader: FC<OwnProps> = ({
         return (
           <div className="settings-main-header">
             <h3>{lang('FilterEdit')}</h3>
-
+            {Boolean(editedFolderId) && (
-            {editedFolderId && (
               <DropdownMenu
                 className="settings-more-menu"
                 trigger={SettingsMenuButton}

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>

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>

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>
             );
           })}

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}

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>
   );
 };

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}

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')