App.js

import React from 'react';
import InfoField from './InfoField.js';
import PersonButton from './PersonButton.js';
import store from './store/index.js'
import {changeItemsList} from './actions/index.js'
import {selectedItemChosen} from './actions/index.js'
import {urlChosen} from './actions/index.js'
import {connect} from 'react-redux'


class InfoPanel extends React.Component{ 

  componentWillMount(){
    fetch(store.getState().url)
    .then(response => response.json())
    .then( ({results: items}) => store.dispatch(changeItemsList(items))) 
  
    setTimeout(function(){
    store.dispatch(selectedItemChosen(store.getState().items.slice(0,1)));
    }, 3000);
    store.dispatch(urlChosen('http://swapi.co/api/people/?format=json'))
  }
  
  changeSelection(listID){ 
    store.dispatch(selectedItemChosen(store.getState().items.slice(listID, listID+1)))
  }

  render(){
    let items = store.getState().items
    var selection = store.getState().selectedItem
    const btnGrpStyle = {
      position: "absolute",
      top: "100px",
      width: '100 px',
      display: 'inline-block'
    };
    const attStyle = {
      position:"absolute", 
      top:"100px", 
      left:"200px", 
      width:"1300px", 
      height: "550px",
      border: '1px solid #ddd', 
      display: 'inline-block', 
      padding:"10px 20px",
      paddingTop:"150px",
      textAlign: 'center',
      boxShadow:'1 1 1px 1px #e5e5e5'
    }
    const headerStyle = {
      backgroundColor: 'slategrey', 
      width: "1920px", 
      height: "50px", 
      padding: "25px",
      fontFamily: 'Ubuntu, Helvetica, Arial, sans-serif', 
      fontSize: '18px', 
      lineHeight: '25px', 
      textShadow: '1px 1px 1px #ccc',
      boxShadow:'0 0 5px 5px #ddd'
    }
    return(
      <div className="panel" style={{display: 'inline-block', background: 'url(/img/cream_dust_transparent.png) repeat 0 0'}}>
        <div className="headerBar" style={headerStyle}>
          <h1 className="info" style={{color: "white"}}>Character Information</h1>
        </div>
        <div className="dynamic buttons" style={btnGrpStyle}>
          {items.map((item, i) => 
            <PersonButton key={i} onClick={this.changeSelection.bind(this, i)} btnText={item.name}/>
          )}
        </div>
          {selection.map((selected) =>
            <div className="att" style={attStyle}>
              <InfoField 
                url={selected.url}
                name={selected.name} 
                birth_year={selected.birth_year}
                eye_color={selected.eye_color}
                gender={selected.gender}
                hair_color={selected.hair_color}
                height={selected.height}
                mass={selected.mass}/> 
            </div>
          )}
      </div>
    );
  }
}

const mapDispatchToProps = {
  urlChosen,
  changeItemsList,
  selectedItemChosen
};

const mapStateToProps = (state, ownProps) =>({
  url: state.url,
  selectedItem: state.selectedItem,
  items: state.items
});

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(InfoPanel);

export default connect(mapStateToProps, mapDispatchToProps)(InfoPanel);