{"size": 986, "ext": "js", "max_stars_repo_path": "src/components/PlanetResidentsTable/PlanetResidentsTable.js", "max_stars_repo_name": "n4d114-k/SWAPI_Challenge", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/PlanetResidentsTable/PlanetResidentsTable.js", "max_issues_repo_name": "n4d114-k/SWAPI_Challenge", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/PlanetResidentsTable/PlanetResidentsTable.js", "max_forks_repo_name": "n4d114-k/SWAPI_Challenge", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.65, "max_line_length": 86, "alphanum_fraction": 0.6561866126}
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import propTypes from 'prop-types';

import getPlanetResidents from '../../actions/getPlanetResidents';

import './PlanetResidentstable.css';

function PlanetResidentsTable({ location, allPlanetsProps, getPlanetResidents}) {

  const id = location.pathname.match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g);

  useEffect(() => {
    getPlanetResidents(id[0]);
  }, []);

  return (
    <div>
      {allPlanetsProps.planetResidents ?
      <React.Fragment>
        <h3>{allPlanetsProps.planetResidents[0]}</h3>
        {allPlanetsProps.planetResidents[1].map((resident, index) => (
          <p key={index}>{resident}</p>
        ))}
      </React.Fragment>
      : <p>Loading</p>}
    </div>
  );
}

PlanetResidentsTable.propTypes = {

}

const mapStateToProps = state => ({
  allPlanetsProps: state.allPlanetsState
});

export default connect(mapStateToProps, { getPlanetResidents })(PlanetResidentsTable);
