How to list top GitHub users by city using ReactJS and Redux?

Question

GitHub

I have a task to display a list of top ten GitHub users for a certain city. The problem is that not all the data I need is displayed directly via the GitHub API via a request to https://api.github.com/search/users?q=CITY . No, for example, name, location, biography. All this can be obtained only through the output of a single user via https://api.github.com/users/NAME (or login, etc.)
It turns out that you need to use two requests at the same time (get a list of logins for the specified city and then based on a cycle to output the list I need). I've sketched an implementation of this task https://stackblitz.com/edit/react-github-search-us... but for some reason it doesn't work as it should. Tell me, please, who is in the topic, where is the error or your solution to this problem. Thank you very much in advance!

Answer 1

I could not save in your online editor, I will throw the app.js code

import React, { Component } from 'react';
import { connect } from 'react-redux';

class UsersList extends Component {

  componentDidMount() {
    this.getUsers();
  }

  getUsers = () => {
    let { dispatch } = this.props;
    let arr = [];
    fetch(`https://api.github.com/search/users?q=Donetsk`)
      .then(res => { return res.json() })
      .then(res => {
        return res.items.map((result) => {
          return result.login
        });
      }).then(logins=>{
        const promises = logins.map((login)=> fetch(`https://api.github.com/users/${login}`).then(res=>res.json()));
        return Promise.all(promises);
      }).then((users)=>{
        if(users){
          dispatch({ type: 'GET_USERS', users });
        }
      })

  }

  render() {

    let { users } = this.props;
    return (
      <div>
        <h2>Users</h2>
        {users.map((user) => {
          return (
            <div>
              <p>{user.login}</p>
              <p>{user.name}</p>
              <p>{user.location}</p>
            </div>
          );
        })}


      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    users: state.users
  }
}

export default connect(mapStateToProps)(UsersList);