refactoring a long function in typescript

Question

I have this function? And I try to do some refactoring. So with for example a generic function

setSelectedSearchOptions(optionLabel: string) {
    //this.filterSection.reset();
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;

    if (optionLabel === 'Registratie') {
       this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.buttonFilterDisabled = false;
      this.startDate = undefined;
      this.selectedValue = '';
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownMeasurement = false;
      this.showDropdownIndicator = false;
    }

    if (optionLabel === 'Vcheq') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = true;
      this.startDate = undefined;
      this.showDropdownVcheqCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownQrCode = false;
      this.showDropdownIndicator = false;

    }

    if (optionLabel === 'Doelen') {
      this.showDatePickerOne = true;
      this.showDatePickerTwo = false;
      this.showDatePickerThree = false;
      this.showDropdownMeasurement = false;
      this.isButtonVisible = false;
      this.startDate = undefined;
      this.selectedValue = ',';
      this.selectedValueOptie = ',';
      this.selectedValueProgressie = ',';
      this.showDropdownQrCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownIndicator = false;

    }
}

But seems for me that it can be shorten. But I don't know how exactly.

So my question is, how to make this function shorter?

Thank you

Answer 1

You can put the values in a "table" like

const LABELS = ['Registratie', 'Vcheq', 'Doelen'];

const OPTIONS = {
                             // Registratie   Vcheq   Doelen
    showDatePickerOne:    [             1,      1,       1],
    showDatePickerTwo:    [             0,      1,       0],
    showDatePickerThree:  [             1,      1,       0],
    ...etc

};

and then replace your code with

let index = LABELS.indexOf(optionLabel);

for (let [k, v] of Object.entries(OPTIONS)) {
    this[k] = v[index];
}

This way you keep the code compact without losing the flexibility.

Answer 2

i would do something like this:

  setSelectedSearchOptions(optionLabel: string) {
    this.selectedOption = optionLabel;
    this.selectedSearch = optionLabel;

    switch (optionLabel) {
      case 'Registratie':
        this.registratie();
        break;
      case 'Vcheq':
        this.vcheq();
        break;
      case 'Doelen':
        this.doelen();
        break;
    }
  }

  private registratie() {
    this.showDatePickerOne = true;
    this.showDatePickerTwo = false;
    this.showDatePickerThree = false;
    this.buttonFilterDisabled = false;
    this.startDate = undefined;
    this.selectedValue = '';
    this.showDropdownChallenge = false;
    this.showDropdownVcheqCode = false;
    this.showDropdownMeasurement = false;
    this.showDropdownIndicator = false;
  }

  private vcheq() {
    this.showDatePickerOne = true;
    this.showDatePickerTwo = false;
    this.showDatePickerThree = false;
    this.showDropdownMeasurement = false;
    this.isButtonVisible = true;
    this.startDate = undefined;
    this.showDropdownVcheqCode = true;
    this.showDropdownChallenge = false;
    this.showDropdownQrCode = false;
    this.showDropdownIndicator = false;
  }

  private doelen() {
    this.showDatePickerOne = true;
    this.showDatePickerTwo = false;
    this.showDatePickerThree = false;
    this.showDropdownMeasurement = false;
    this.isButtonVisible = false;
    this.startDate = undefined;
    this.selectedValue = ',';
    this.selectedValueOptie = ',';
    this.selectedValueProgressie = ',';
    this.showDropdownQrCode = true;
    this.showDropdownChallenge = false;
    this.showDropdownVcheqCode = false;
    this.showDropdownIndicator = false;
  }