Improving a lengthy TypeScript function through refactoring

Question

Improving a lengthy TypeScript function through refactoring

Currently, I have this function that I am refactoring with the goal of making it more concise. For instance, by using a generic function.


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

    if (optionLabel === 'Registratie') {
       this.setFilterOptions(true, false, false, false, undefined, '', false, false, false, false);
    }

    if (optionLabel === 'Vcheq') {
        this.setFilterOptions(true, false, false, false, undefined, true, false, true, false, false);

    }

    if (optionLabel === 'Doelen') {
        this.setFilterOptions(true, false, false, false, undefined, ',', ',', ',', true, false);
    }
}

// Function to set filter options based on input
setFilterOptions(showDateOne: boolean, showDateTwo: boolean, showDateThree: boolean,
                  buttonFilterDisabled: boolean, startDateValue: any, 
                  isButtonVisible: any, showVcheqCode: boolean, showIndicator: boolean,
                  showMeasurement: boolean, showChallenge: boolean) {
    this.showDatePickerOne = showDateOne;
    this.showDatePickerTwo = showDateTwo;
    this.showDatePickerThree = showDateThree;
    this.buttonFilterDisabled = buttonFilterDisabled;
    this.startDate = startDateValue;
    this.isButtonVisible = isButtonVisible;
    this.showDropdownVcheqCode = showVcheqCode;
    this.showDropdownIndicator = showIndicator;
    this.showDropdownMeasurement = showMeasurement;
    this.showDropdownChallenge = showChallenge;
}

Although, I believe there might be a way to further shorten this function. Any ideas on how to achieve that?

Thank you

javascript angular typescript

Answer 1

Answer №1

If you want to organize the values neatly, consider using a "table" structure like this:

const LABELS = ['Registration', 'Verification', 'Goals'];

const OPTIONS = {
                             // Registration   Verification   Goals
    showDatePickerOne:    [             1,           1,         1],
    showDatePickerTwo:    [             0,           1,         0],
    showDatePickerThree:  [             1,           1,         0],
    ...etc

};

Then, update your code with the following:

let index = LABELS.indexOf(optionLabel);

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

This method allows you to maintain concise code while retaining flexibility.

Answer 2

If you want to organize the values neatly, consider using a "table" structure like this:

const LABELS = ['Registration', 'Verification', 'Goals'];

const OPTIONS = {
                             // Registration   Verification   Goals
    showDatePickerOne:    [             1,           1,         1],
    showDatePickerTwo:    [             0,           1,         0],
    showDatePickerThree:  [             1,           1,         0],
    ...etc

};

Then, update your code with the following:

let index = LABELS.indexOf(optionLabel);

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

This method allows you to maintain concise code while retaining flexibility.

Answer 3

Answer №2

My approach would be something along these lines:

  setChosenOptions(selectedOptionLabel: string) {
    this.selectedOption = selectedOptionLabel;
    this.selectedSearch = selectedOptionLabel;

    switch (selectedOptionLabel) {
      case 'Registration':
        this.registration();
        break;
      case 'Vcheq':
        this.vcheq();
        break;
      case 'Goals':
        this.goals();
        break;
    }
  }

  private registration() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.filterButtonDisabled = false;
    this.startDate = undefined;
    this.selectedValue = '';
    this.showChallengeDropdown = false;
    this.showVcheqCodeDropdown = false;
    this.showMeasurementDropdown = false;
    this.showIndicatorDropdown = false;
  }

  private vcheq() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.showMeasurementDropdown = false;
    this.isButtonVisible = true;
    this.startDate = undefined;
    this.showVcheqCodeDropdown = true;
    this.showChallengeDropdown = false;
    this.showQrCodeDropdown = false;
    this.showIndicatorDropdown = false;
  }

  private goals() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.showMeasurementDropdown = false;
    this.isButtonVisible = false;
    this.startDate = undefined;
    this.selectedValue = ',';
    this.selectedOption = ',';
    this.selectedProgress = ',';
    this.showQrCodeDropdown = true;
    this.showChallengeDropdown = false;
    this.showVcheqCodeDropdown = false;
    this.showIndicatorDropdown = false;
  }

Answer 4

My approach would be something along these lines:

  setChosenOptions(selectedOptionLabel: string) {
    this.selectedOption = selectedOptionLabel;
    this.selectedSearch = selectedOptionLabel;

    switch (selectedOptionLabel) {
      case 'Registration':
        this.registration();
        break;
      case 'Vcheq':
        this.vcheq();
        break;
      case 'Goals':
        this.goals();
        break;
    }
  }

  private registration() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.filterButtonDisabled = false;
    this.startDate = undefined;
    this.selectedValue = '';
    this.showChallengeDropdown = false;
    this.showVcheqCodeDropdown = false;
    this.showMeasurementDropdown = false;
    this.showIndicatorDropdown = false;
  }

  private vcheq() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.showMeasurementDropdown = false;
    this.isButtonVisible = true;
    this.startDate = undefined;
    this.showVcheqCodeDropdown = true;
    this.showChallengeDropdown = false;
    this.showQrCodeDropdown = false;
    this.showIndicatorDropdown = false;
  }

  private goals() {
    this.showDateSelectorOne = true;
    this.showDateSelectorTwo = false;
    this.showDateSelectorThree = false;
    this.showMeasurementDropdown = false;
    this.isButtonVisible = false;
    this.startDate = undefined;
    this.selectedValue = ',';
    this.selectedOption = ',';
    this.selectedProgress = ',';
    this.showQrCodeDropdown = true;
    this.showChallengeDropdown = false;
    this.showVcheqCodeDropdown = false;
    this.showIndicatorDropdown = false;
  }

Improving a lengthy TypeScript function through refactoring

Answer №1

Answer №2

Similar questions

What are some techniques for concealing a CSS transition beneath another element in both directions?

Issue updating @angular/core in Angular CLI caused by rxjs dependency

Error: It seems like Material UI has updated their export structure and now `makeStyles` is no longer available in the

"Can you explain the functioning of this Node.js middleware when it doesn't require any

Error management and callback handling in MSAL.js for Angular 6 Single Page Applications

Accessing a property's value from a different property within a Class' initialization function

When debugging in Visual Studio 2013, Typescript variables/fields consistently show up as undefined

Twice the data fetching through ajax on popup is observed using php mysql

Eliminate jQuery's delayed blinking effect with the use of an event

jQuery form validation with delay in error prompts

Vue.js axios method returns undefined; v-for directive fails to iterate - Issue on Wordpress site

Changing the width of the file input using css

Implementing fetch within a custom hook to display a loader within a return function

What is causing the issue with using transition(myComponent) in this React 18 application?

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

Ways to link a Javascript or Jquery function to an HTML form

Having trouble with your AngularJS ng-repeat functionality?

Dialogue box closes automatically within a dropdown menu

What steps can be taken to avoid being logged out automatically upon clicking the back button?

validation using ajax and php