CODEWITHSUNDEEP
javascriptreactjsfrontend
user7605119
user7605119

Reputation:

ReactJS and making concurrent API calls DRY

I'm having an issue with this code:

let tmpContributors = [...this.state.contributors];
for (let i = 0; i < 10; i++) {//10 most active contributors because of performance and github limits
    contributorPropertiesPromises.push(axios.get(`${this.state.contributors[i].followers_url}?per_page=100&${API_KEY}`)
    .then(res => {
        if(res.data.length > 100) {
            tmpContributors[i].contributorFollowers = res.data.length;
        } 
        else {
            for(let page = 1; page <= 5; page++) {//5 pages because of github limitation - can be done by recursion checking if res.headers.link.includes('rel="next"')
                axios.get(`${this.state.contributors[i].followers_url}?page=${page}&per_page=100&${API_KEY}`)
                tmpContributors[i].contributorFollowers += res.data.length;
            }
        }
    }))
}
for (let i = 0; i < 10; i++) {//10 most active contributors because of performance and github limits
    contributorPropertiesPromises.push(axios.get(`${this.state.contributors[i].repos_url}?per_page=100&${API_KEY}`)
    .then(res => {
        if(res.data.length > 100) {
            tmpContributors[i].contributorRepositories = res.data.length;
        } 
        else {
            for(let page = 1; page <= 5; page++) {//5 pages because of github limitation - can be done by recursion checking if res.headers.link.includes('rel="next"')
                axios.get(`${this.state.contributors[i].repos_url}?page=${page}&per_page=100&${API_KEY}`)
                tmpContributors[i].contributorRepositories += res.data.length;
            }
        }
    }))
}
for (let i = 0; i < 10; i++) {//10 most active contributors because of performance and github limits
    contributorPropertiesPromises.push(axios.get(`${this.state.contributors[i].gists_url}?per_page=100&${API_KEY}`)
    .then(res => {
        if(res.data.length > 100) {
            tmpContributors[i].contributorGists = res.data.length;
        } 
        else {
            for(let page = 1; page <= 5; page++) {//5 pages because of github limitation - can be done by recursion checking if res.headers.link.includes('rel="next"')
                axios.get(`${this.state.contributors[i].gists_url}?page=${page}&per_page=100&${API_KEY}`)
                tmpContributors[i].contributorGists += res.data.length;
            }
        }
    }))
}

It works but it's not very DRY. I've tried calling a function with two parameters (e.g. propertyUrl, contributorProperty) and with strings as parameters. Doesn't work for me. Can you guys help me with that one?

Upvotes: 0

Views: 153

Answers (2)

Steven Scaffidi
Steven Scaffidi

Reputation: 2307

What about this:

let tmpContributors = [...this.state.contributors];
const getAxiosPromise = (index, path, query = '') =>
  axios.get(
    `${this.state.contributors[index][path]}?${query}per_page=100&${API_KEY}`
  );

const dealWithResp = (res, path, index) => {
  if (res.data.length > 100) {
    tmpContributors[index].contributorFollowers = res.data.length;
  } else {
    for (let page = 1; page <= 5; page++) {
      getAxiosPromise(index, path, `page=${page}&`);
      tmpContributors[index].contributorFollowers += res.data.length;
    }
  }
};

for (let i = 0; i < 10; i++) {
  //10 most active contributors because of performance and github limits
  contributorPropertiesPromises.push(
    getAxiosPromise(i, followers_url).then(res => dealWithResp(res, followers_url, i))
  );
  contributorPropertiesPromises.push(
    getAxiosPromise(i, repos_url).then(res => dealWithResp(res, repos_url, i))
  );
  contributorPropertiesPromises.push(
    getAxiosPromise(i, repos_url).then(res => dealWithResp(res, gists_url, i))
  );
}

Upvotes: 0

SlimSim
SlimSim

Reputation: 616

function getStuff(propertyUrl, contributorProperty) {
    for (let i = 0; i < 10; i++) {
        contributorPropertiesPromises.push(axios.get(`${this.state.contributors[i][propertyUrl]}?per_page=100&${API_KEY}`)
            .then(res => {
                if(res.data.length > 100) {
                    tmpContributors[i][contributorProperty]= res.data.length;
                } 
                else {
                    for(let page = 1; page <= 5; page++) {
                        axios.get(`${this.state.contributors[i][propertyUrl]}?page=${page}&per_page=100&${API_KEY}`)
                        tmpContributors[i][contributorProperty] += res.data.length;
                    }
                }
            })
        )
    }
}

then call it three times,

getStuff('gists_url', 'contributorGists')
//... etc

Upvotes: 1

Related Questions