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

A Step-by-Step Guide to Launching PDF Blob from AJAX Response in a Fresh Chrome Tab

When trying to use the exported Ionic 3 class in TypeScript, the error "Cannot find name 'ClassName'" occurs

How can I set up a KeyboardEvent listener in JavaScript?

Link the selector and assign it with its specific value

Having trouble getting my Angular project up and running - facing issues with dependency tree resolution (ERESOLVE)

How can I write an if-else statement in JavaScript with Mongoose for MongoDB?

Hacking through external script injections into the browser

Include an Open OnClick event in the React/JSX script

Webstorm seems to be having trouble identifying Next.js

Converting a Curl command to a JavaScript POST request: best practices

Exploring the functionalities of Angular components

The front end button stubbornly refuses to comply and redirect to another page

HTML various button designs - such as a cogwheel

Anticipating the completion of multiple observable subscription functions

Why won't JavaScript functions within the same file recognize each other?

How can a custom event bus from a separate account be incorporated into an event rule located in a different account within the CDK framework?

What is the process for identifying children records of a parent (Adonis Lucid Many-to-Many) that match a specific criteria?

Displaying Angular Material slider with minimum and maximum labels visible

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod