CODEWITHSUNDEEP
javascriptreactjsswitch-statement
Sog t
Sog t

Reputation: 177

Is There A Way to Avoid Nested Switch Statements

I am working on a React project using nested switch statements to route the user depending on their selection. The first case has two more nested switch statements. The second case has one nested switch statement. Is there another way I could do this without all the nested switch statements? Any help is greatly appreciated.

clickConfirm = () => {
        switch (this.props.serviceType) {
            case 'car_service':
                switch (this.props.loadType) {
                    case 0: 
                        switch (this.props.photoMode) {
                            case 0:
                                this.props.push('/payment/');
                                break;
                            case 1:
                                this.props.push('/payment/');
                                // capture image here
                                break;
                            case 2:
                                this.props.push('/capture/');
                                break;
                        }
                        break;
                    case 1:
                        switch (this.props.photoMode) {
                            case 0:
                                this.props.history.push('/address/');
                                this.props.setToPhoneNumber(false);
                                break;
                            case 1:
                                this.props.history.push('/address/');
                                this.props.setToPhoneNumber(false);
                                // capture image here
                                break;
                            case 2:
                                this.props.push('/capture/');
                                break;
                        }
                        break;
                    case 2:
                        this.props.history.push('/phone/');
                        this.props.setToPhoneNumber(true);
                        break;
                }
                break;
            case 'phone_service':
                switch (this.props.photoMode) {
                    case 0:
                        this.props.history.push('/address/');
                        break;
                    case 1:
                        this.props.history.push('/address/');
                        // capture image here
                        break;
                    case 2: 
                        this.props.history.push('/capture/');
                        break;
                }
                break;
        }
    };

Upvotes: 0

Views: 773

Answers (2)

lissettdm
lissettdm

Reputation: 13078

You can store the data in an object like this:

const SERVICES = {
 'car_service': {
      0: {
          0: ()=> {
              this.props.push('/payment/');
           }
       }
  }
}

Then you can replace the switch part with:

clickConfirm = () => {
 SERVICES[this.props.serviceType][this.props.loadType][this.props.photoMode]();
}

Upvotes: 1

Chase
Chase

Reputation: 3126

I don't suggest this, seems like your component should maybe take in the option directly or otherwise be broken up instead of combined in the way it is.

But without knowing your use-case or why you're "pushing to props"(?), purely to "flatten" your condition, you could combine the various values and enumerate the known combinations.

NOTE: I haven't tested this or attempted to map this to your conditions exactly, but the general idea...

const combined = [this.props.serviceType, this.props.photoMode, this.props.loadType || 'NA'].join('|');

switch (combined) {
    case 'car_service|0|0':
        this.props.push('/payment/'); break;
    case 'car_service|1|0':
        this.props.push('/payment/'); break; // capture image here
    case 'car_service|2|0':
        this.props.push('/capture/'); break;
    case 'car_service|0|1':
        this.props.push('/address/'); this.props.setToPhoneNumber(false); break;
    case 'car_service|1|1':
        this.props.push('/address/'); this.props.setToPhoneNumber(false); break;  // capture image here
    case 'car_service|2|1':
        this.props.push('/capture/'); break;
    case 'car_service|0|2':
    case 'car_service|1|2':
    case 'car_service|2|2':
        this.props.history.push('/phone/'); this.props.setToPhoneNumber(true); break;
    case 'phone_service|0|NA':
        this.props.history.push('/address/'); break;
    case 'phone_service|1|NA':
        this.props.history.push('/address/'); break; // capture image here
    case 'phone_service|2|NA':
        this.props.history.push('/address/'); break;

Upvotes: 0

Related Questions