Concurrent requests with axios

Question

In a React app I need to post data from a form. The post creates a new dashboard object. Once that's done, I need to immediately update a select dropdown in the component to include the newly added dashboard name. The axios documentation says it should be done like so:

function getUserAccount() {
   return axios.get('/user/12345');
}

function getUserPermissions() {
   return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));

So this is what I've done:

class DashboardForm extends Component {

saveDashboard() {
    var siteId = this.state.siteId;
    var self= this;
    return axios.post('/path/to/save/dashboard' + siteId + '/dashboards', {
        slug: this.refs.dashboardUrl.value,
        name: this.refs.dashboardName.value,
    }).then(function (response) {
        self.setState({
            dashboardId: response.data.dashboardId,
            dashboardName: response.data.dashboardName,
            submitMessage: (<p>Successfully Created</p>)
        });
        self.setUrl(siteId, response.data.dashboardId);

    }).catch(function (error) {
        console.log(error);
        self.setState({
            submitMessage: (<p>Failed</p>)
        });
    });
}

getAllDashboards(){
    var self = this;
    self.setState({siteId: this.props.selectedSiteID});
    var getDashboardsPath = "path/to/get/dashboards/" + self.props.selectedSiteID + "/dashboards";

    axios(getDashboardsPath, {
        credentials: 'include',
        method: 'GET',
        cache: 'no-cache'
    }).then(function (response) {
        return response.data.dashboards;
    }).then(function (arrDashboards) {   //populate options for the select
        var options = [];
        for (var i = 0; i < arrDashboards.length; i++) {
            var option = arrDashboards[i];
            options.push(
                (<option className="dashboardOptions" key={option.dashboardId} value={option.slug}>{option.name}</option>)
            );
        }
        self.setState({
            options: options
        });
    });
}

saveAndRepopulate() {
    axios.all([saveDashboard(), getAllDashboards()])
        .then(axios.spread(function (savedDashboard, listOfDashboards) {
            // Both requests are now complete
        }));
     }

}

The saveAndRepopulate is called when the form submits.

The problem is that I get the following errors:

error    'saveDashboard' is not defined             no-undef
error    'getAllDashboards' is not defined          no-undef

I've tried doing

function saveDashboard() { 

but then I get

Syntax error: Unexpected token, expected ( (175:13)

  | 
  |     function saveDashboard() {
  |              ^

How do I call these two functions? Also, am I going to need to change the promise (.then) from the individual calls to the saveAndPopulate?

Many thanks for any guidance.

Answer 1

First, as @Jaromanda X pointed out, you should call your inside components functions with this , and you need to bind these functions to this . There are multiple ways to do that, one of then is to bind it inside the component constructor like:

this.saveDashboard = this.saveDashboard.bind(this)

Other good thing to do is to return the axios call inside the saveDashboard() and getAllDashboards()