Refactor four methods in just two in lit-element

Question

Is it possible to refactor these four methods in just two in lit-element?

I have the same counter but duplicate, one for case 0 and one for case 1. As the variables are different, I have done the same method twice to take every variable baceuse I haven't found a way to do it together.

Here is my code:

import { LitElement, html } from 'lit-element';

class TypeSelect extends LitElement {
    static get properties() {
        return {
            numAdults: {type: Number},
            numChildren: {type: Number},
        };
    }

    constructor() {
        super();
        this.numAdults = 1;
        this.numChildren = 0;
        this.adultsType = {
            min: 1,
            max: 5
        };
        this.childrenType = {
            min: 0,
            max: 5
        };
        this.numPassengers = 1;
    }

    adultIncrement(e) {
        e.preventDefault();
        if (this.numAdults < this.adultsType.max) this.numAdults++;
    }

    adultDecrement(e) {
        e.preventDefault();
        if (this.numAdults > this.adultsType.min) this.numAdults--;
    }

    childrenIncrement(e) {
        e.preventDefault();
        if (this.numChildren < this.childrenType.max) this.numChildren++;
    }

    childrenDecrement(e) {
        e.preventDefault();
        if (this.numChildren > this.childrenType.min) this.numChildren--;
    }

    createRenderRoot() {
        return this;
    }

    render(){
        return html`
          <div class="counter">
              <button @click="${this.adultDecrement}"></button>
              <span>${this.numAdults}</span>
              <button @click="${this.adultIncrement}"></button>
          </div>
          <div class="counter">
              <button @click="${this.childrenDecrement}"></button>
              <span>${this.numChildren}</span>
              <button @click="${this.childrenIncrement}"></button>
          </div>
        `;
    }
}

customElements.define('type-select', TypeSelect);

use event.target to know where the click event comes from – Supersharp Feb 25 '20 at 23:12 — Supersharp, Feb 25 '20 at 23:12

score 0 · Answer 1 · answered Feb 27 '20 at 13:23

Something like this should work but if you only have those two fields I'm not sure I would bother trying to refactor it. It's better to just be explicit with the four methods.

import { LitElement, html } from 'lit-element';

class TypeSelect extends LitElement {
    static get properties() {
        return {
            numAdults: {type: Number},
            numChildren: {type: Number},
        };
    }

    constructor() {
        super();
        this.numAdults = 1;
        this.numChildren = 0;
        this.validations = {
          numAdults: {
            min: 1,
            max: 5
          },
          numChildren: {
            min: 0,
            max: 5
          }
        };
        this.numPassengers = 1;
    }

    increment(e, countType) {
      e.preventDefault();
      if (this[countType] < this.validations[countType].max) this[countType]++;
    }

    decrement(e, countType) {
      e.preventDefault();
      if (this[countType] > this.validations[countType].max) this[countType]--;
    }

    createRenderRoot() {
        return this;
    }

    render(){
        return html`
          <div class="counter">
              <button @click="${(e) => this.decrement(e, 'numAdults')}"></button>
              <span>${this.numAdults}</span>
              <button @click="${(e) => this.increment(e, 'numAdults')}"></button>
          </div>
          <div class="counter">
              <button @click="${(e) => this.decrement(e, 'numChildren')}"></button>
              <span>${this.numChildren}</span>
              <button @click="${(e) => this.increment(e, 'numChildren')}"></button>
          </div>
        `;
    }
}

customElements.define('type-select', TypeSelect);

If you do want to refactor create a child component that accepts validation params and maintains a local count so that the TypeSelect render looks something like this.

render(){
  return html`
    <type-counter name="adults" count="${this.numAdults}" min="1" max="5"></type-counter>
    <type-counter name="children" count="${this.numChildren}" min="0" max="5"></type-counter>
  `;
}

Refactor four methods in just two in lit-element

1 Answers1