refactor: convert ternary / if statements to when

Wassup789 · May 29, 2024 · a21ad68 · a21ad68
1 parent b99098d
commit a21ad68
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/src/components/ExerciseSelectorFilterGroup.ts b/src/components/ExerciseSelectorFilterGroup.ts
@@ -2,6 +2,7 @@ import { customElement, property } from "lit/decorators.js";
 import { css, LitElement, html, PropertyValues } from "lit";
 import StorageService from "../services/StorageService";
 import { TypedLitElement } from "../models/TypedEventTarget";
+import { when } from "lit/directives/when.js";
 
 type FilterGroupStorageData = Record<string, boolean>;
 
@@ -198,22 +199,19 @@ export default class ExerciseSelectorFilterGroup extends (LitElement as TypedLit
     }
 
     protected render(): unknown {
-        let headerSuffix;
-        if (this.togglable) {
-            headerSuffix = html`
-                <span>${this.name}</span>
-                <div class="header-active"
-                     ?active=${this.filterActive} 
-                     @click=${(event: MouseEvent) => this.onHeaderActiveClick(event)}>ACTIVE</div>
-                <div class="header-toggle"></div>
-            `;
-        } else {
-            headerSuffix = html`${this.name}`;
-        }
-
         return html`
             <div class="container">
-                <div class="header" @click=${() => this.active = !this.active}>${headerSuffix}</div>
+                <div class="header" @click=${() => this.active = !this.active}>
+                    ${when(this.togglable, () => html`
+                        <span>${this.name}</span>
+                        <div class="header-active"
+                             ?active=${this.filterActive}
+                             @click=${(event: MouseEvent) => this.onHeaderActiveClick(event)}>ACTIVE</div>
+                        <div class="header-toggle"></div>
+                    `, () => html`
+                        ${this.name}
+                    `)}
+                </div>
                 <div class="content">
                     <slot></slot>
                 </div>

diff --git a/src/components/GenericSnackbar.ts b/src/components/GenericSnackbar.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { TypedLitElement } from "../models/TypedEventTarget";
+import { when } from "lit/directives/when.js";
 
 @customElement(GenericSnackbar.NAME)
 export default class GenericSnackbar extends (LitElement as TypedLitElement<GenericSnackbar, GenericSnackbarEventMap>) {
@@ -108,18 +109,15 @@ export default class GenericSnackbar extends (LitElement as TypedLitElement<Gene
     }
 
     protected render(): unknown {
-        const button = this.actionLabel
-            ? html`
-            <button @click=${() => this.onActionClick()}>
-                ${this.actionLabel}
-            </button>`
-            : "";
-
         return html`
             <div id="container">
                 <div id="content" ?removing=${this.isRemoving}>
                     <label>${this.label}</label>
-                    ${button}
+                    ${when(this.actionLabel, () => html`
+                        <button @click=${() => this.onActionClick()}>
+                            ${this.actionLabel}
+                        </button>
+                    `, () => "")}
                 </div>
             </div>
         `;

diff --git a/src/components/RadioGroupElement.ts b/src/components/RadioGroupElement.ts
@@ -3,6 +3,7 @@ import { css, html, LitElement, PropertyValues } from "lit";
 import { RadioGroup } from "../models/RadioGroup";
 import { RadioGroupValue } from "../models/RadioGroupValue";
 import { TypedLitElement } from "../models/TypedEventTarget";
+import { when } from "lit/directives/when.js";
 
 @customElement(RadioGroupElement.NAME)
 export default class RadioGroupElement<T> extends (LitElement as TypedLitElement<RadioGroupElement<unknown>, RadioGroupElementEventMap<unknown>>) {
@@ -43,8 +44,9 @@ export default class RadioGroupElement<T> extends (LitElement as TypedLitElement
     private checkedRadioGroupValue: RadioGroupValue<T> | null = null;
 
     protected render(): unknown {
-        return this.radioGroup ? html`
-            ${this.radioGroup.values.map((e) => html`
+        return html`
+            ${when(this.radioGroup, (radioGroup) => html`
+                ${radioGroup.values.map((e) => html`
                 <div
                         class="input-radio"
                         @click=${() => this.setValue(e.value)}
@@ -55,7 +57,8 @@ export default class RadioGroupElement<T> extends (LitElement as TypedLitElement
                         class="input-text"
                         @click=${() => this.setValue(e.value)}>${e.label}</span>
             `)}
-        ` : "";
+            `, () => "")}
+        `;
     }
 
     protected updated(changedProperties: PropertyValues) {