1
\$\begingroup\$

What is the expected behavior?

  1. If there is a file in the state (file != null), then startUploadImage(file) should be executed, followed by startUpdateEvent(eventId, state).

  2. If there is no file (file === null) then only the startUpdateEvent(eventId, state) should be executed.

What is the problem I am encountering right now?

Currently I am struggling with writing a good piece of code, especially when it comes to conditional promises. In the code below you can see that I use some if / else (nested) methodology which leads to tremendously long code.

onSubmit = event => {
        event.preventDefault();
        if (
          (this.state,
          eventNameRegex.test(this.state.event_name) &&
            eventDescriptionRegex.test(this.state.event_description) &&
            priceRegex.test(this.state.ticket_price) &&
            eventDateRegex.test(this.state.event_date))
        ) {
          // check if image changed or not then continue
          this.props.handleLoading(true);

          if (this.state.file != null) {
            startUploadImage(this.state.file).then(response => {
              this.setState({ event_image: response.data });
              return this.props
                .startUpdateEvent(this.props.event.id, this.state)
                .then(() => {
                  this.props.handleLoading(false);
                  this.props.history.push("/events");
                })
                .catch(error => {
                  this.props.handleLoading(false);
                  this.setState({
                    error: error.status,
                    errorMessage: error.data
                  });
                });
            });
          } else {
            return this.props
              .startUpdateEvent(this.props.event.id, this.state)
              .then(() => {
                this.props.handleLoading(false);
                this.props.history.push("/events");
              })
              .catch(error => {
                console.log("error");
                this.props.handleLoading(false);
                this.setState({
                  error: error.status,
                  errorMessage: error.data
                });
              });
          }
        } else {
          this.setState({
            error: 400,
            errorMessage:
              "Please fill in all required fields with correct data. Please try again."
          });
        }
      };
\$\endgroup\$
1
\$\begingroup\$

I know nothing of react.js, so please forgive me if I missed something, but in a JS way I'd do it that way :

onSubmit = event => {
        event.preventDefault();
        //start with a dedicated part for testing values
        let fieldError="";
        if(!eventNameRegex.test(this.state.event_name))fieldError.="Name not correct.";
        if(!eventDescriptionRegex.test(this.state.event_description))fieldError.="Description not correct.";
        if(!priceRegex.test(this.state.ticket_price))fieldError.="Price not correct.";
        if(!eventDateRegex.test(this.state.event_date))fieldError.="Date not correct.";
        if(fieldError!=""){
          this.setState({
            error: 400,
            errorMessage:
              fieldError."Please fill in all required fields with correct data. Please try again."
          });
          return false;
        }
        // check if image changed or not then continue
        this.props.handleLoading(true);

        if (this.state.file != null) {
          startUploadImage(this.state.file).then(response => {
            this.setState({ event_image: response.data });
            return myUpdateEvent(this);
          });
        }
        else return myUpdateEvent(this);
      };

//when in doubt use a function ! here's hoping react.js can deal with it
function myUpdateEvent(myEvent){
  return myEvent.props.startUpdateEvent(myEvent.props.event.id, myEvent.state)
    .then(() => {
      myEvent.props.handleLoading(false);
      myEvent.props.history.push("/events");
    })
    .catch(error => {
      console.log("error");
      myEvent.props.handleLoading(false);
      myEvent.setState({
        error: error.status,
        errorMessage: error.data
      });
    });
}

Not tested but you get the gist.

\$\endgroup\$
  • \$\begingroup\$ Awesome bro! That definitely cleaned some things up. Thanks heaps. \$\endgroup\$ – Kevin Vugts Sep 3 '18 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.