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

2023-01-08 04:04:52 +01:00 · 2023-01-08 04:04:52 +01:00 · c6ae1062b7
commit c6ae1062b7
parent a6f7c64174
14 changed files with 47 additions and 17 deletions
--- 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",
--- 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",
--- 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",
--- 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}>
--- 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>
--- 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 && (
--- 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}
--- 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>
--- 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>
--- 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>
            );
          })}
--- 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}
--- 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>
  );
 };
--- 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}
--- 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')