Simplify if (…) classList.add(…) else classList.remove(…) anti-pattern.

Signed-off-by: Anders Kaseorg <[email protected]>

Author: andersk

app/renderer/js/components/server-tab.ts

@@ -59,13 +59,8 @@ export default class ServerTab extends Tab {
   }
 
   updateBadge(count: number): void {
-    if (count > 0) {
-      const formattedCount = count > 999 ? "1K+" : count.toString();
-      this.$badge.textContent = formattedCount;
-      this.$badge.classList.add("active");
-    } else {
-      this.$badge.classList.remove("active");
-    }
+    this.$badge.textContent = count > 999 ? "1K+" : count.toString();
+    this.$badge.classList.toggle("active", count > 0);
   }
 
   generateShortcutText(): string {

app/renderer/js/components/webview.ts

@@ -206,11 +206,7 @@ export default class WebView {
     }
 
     // To show or hide the loading indicator in the the active tab
-    if (this.loading) {
-      this.$webviewsContainer.remove("loaded");
-    } else {
-      this.$webviewsContainer.add("loaded");
-    }
+    this.$webviewsContainer.toggle("loaded", !this.loading);
 
     this.$el.classList.add("active");
     this.focus();
@@ -293,11 +289,7 @@ export default class WebView {
     const $backButton = document.querySelector(
       "#actions-container #back-action",
     )!;
-    if (this.getWebContents().canGoBack()) {
-      $backButton.classList.remove("disable");
-    } else {
-      $backButton.classList.add("disable");
-    }
+    $backButton.classList.toggle("disable", !this.getWebContents().canGoBack());
   }
 
   forward(): void {

app/renderer/js/main.ts

@@ -699,13 +699,8 @@ export class ServerManagerView {
   }
 
   showLoading(loading: boolean): void {
-    if (!loading) {
-      this.$reloadButton.removeAttribute("style");
-      this.$loadingIndicator.style.display = "none";
-    } else if (loading) {
-      this.$reloadButton.style.display = "none";
-      this.$loadingIndicator.removeAttribute("style");
-    }
+    this.$reloadButton.classList.toggle("hidden", loading);
+    this.$loadingIndicator.classList.toggle("hidden", !loading);
   }
 
   async destroyTab(name: string, index: number): Promise<void> {
@@ -772,11 +767,7 @@ export class ServerManagerView {
   }
 
   toggleSidebar(show: boolean): void {
-    if (show) {
-      this.$sidebar.classList.remove("sidebar-hide");
-    } else {
-      this.$sidebar.classList.add("sidebar-hide");
-    }
+    this.$sidebar.classList.toggle("sidebar-hide", !show);
   }
 
   // Toggles the dnd button icon.

app/renderer/js/pages/preference/find-accounts.ts

@@ -58,10 +58,9 @@ export function initFindAccounts(props: FindAccountsProps): void {
   });
 
   $serverUrlField.addEventListener("input", () => {
-    if ($serverUrlField.value) {
-      $serverUrlField.classList.remove("invalid-input-value");
-    } else {
-      $serverUrlField.classList.add("invalid-input-value");
-    }
+    $serverUrlField.classList.toggle(
+      "invalid-input-value",
+      $serverUrlField.value === "",
+    );
   });
 }

app/renderer/js/pages/preference/network-section.ts

@@ -83,11 +83,7 @@ export function initNetworkSection({$root}: NetworkSectionProps): void {
   });
 
   function toggleManualProxySettings(option: boolean): void {
-    if (option) {
-      $manualProxyBlock.classList.remove("hidden");
-    } else {
-      $manualProxyBlock.classList.add("hidden");
-    }
+    $manualProxyBlock.classList.toggle("hidden", !option);
   }
 
   function updateProxyOption(): void {

app/renderer/main.html

@@ -30,7 +30,7 @@
             <i class="material-icons md-48">notifications</i>
             <span id="dnd-tooltip" style="display: none">Do Not Disturb</span>
           </div>
-          <div class="action-button" id="reload-action">
+          <div class="action-button hidden" id="reload-action">
             <i class="material-icons md-48">refresh</i>
             <span id="reload-tooltip" style="display: none">Reload</span>
           </div>