Как вывести список топ пользователей GitHub по конкретному городу, используя ReactJS и Redux?

Question

[Леонид Марков]

У меня стоит задача вывести список десяти топ пользователей GitHub по определенному городу. Проблема в том, что по GitHub API напрямую через запрос по https://api.github.com/search/users?q=ГОРОД выводятся не все нужные мне данные. Нет, например, имени, местоположения, биографии. Это все можно получить только через вывод одиночного пользователя через https://api.github.com/users/ИМЯ (или логин и т.п.)
Получается, нужно использовать одновременно два запроса (получить список логинов по указанному городу и потом на их основе вывести циклом нужный мне список). Я вот набросал вариант реализации данной задачи https://stackblitz.com/edit/react-github-search-us... только вот почему-то не работает как надо. Подскажите, пожалуйста, кто в теме, где ошибка или ваш вариант решения данной задачи. Заранее большое спасибо!

Comments

[Афанасий Захаров]

простите, а что вы пытаетесь сделать?
Вы пытаетесь передать getUsers() - метод класса, вне этого метода в mapDispatchToProps. Вы точно знаете достаточно JS, чтобы за такие задачки хвататься?
Извиняюсь.

Answer 1

[Афанасий Захаров]

Не смог сохранить в вашем онлайн редакторе, кину код app.js

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);

Comments

[Леонид Марков]

Спасибо огромное за помощь! Это то, что было нужно!

[Афанасий Захаров]

Леонид Марков, внимательно посмотрите на то, что я сделал, чтобы потом это сделать самому :)

Answer 2

[Антон Спирин]

getUsers = () => {
  const { dispatch } = this.props;

  fetch(`https://api.github.com/search/users?q=Donetsk`)
    .then(res => res.json())
    .then(res => {
      return Promise.all(
        res.items.map(user => fetch(`https://api.github.com/users/${user.login}`).then(res => res.json()))
      ).then(users =>  {
        dispatch({ type: 'GET_USERS', users });
      });
    });          
};