Adding UI

app/components/Battle.js

@@ -1,7 +1,35 @@
-var React = require("react");
+var React = require('react');
+var PropTypes = React.PropTypes;
+var ReactRouter = require('react-router');
+var Link = ReactRouter.Link;
+var UserDetails = require('./UserDetails');
 
-function Battle(props){
-  return props.isLoading === true ? <p> Loading </p> : <p> Battle Muthafucka </p>
+function ConfirmBattle (props) {
+  return props.isLoading === true
+    ? <p>LOADING</p>
+    : <div className="jumbotron col-sm-12 text-center" >
+        <h1>Confirm Players</h1>
+        <div className='col-sm-8 col-sm-offset-2'>
+            <UserDetails info={props.playersInfo[0]} />
+            <UserDetails info={props.playersInfo[1]} />
+        </div>
+        <div className='col-sm-8 col-sm-offset-2'>
+          <div className='col-sm-12'>
+            <button type='button' className='btn btn-lg btn-success' onClick={props.onInitiateBattle}>Initiate Battle!</button>
+          </div>
+          <div className='col-sm-12'>
+            <Link to='/playerOne'>
+              <button type='button' className='btn btn-lg btn-danger'>Reselect Players</button>
+            </Link>
+          </div>
+        </div>
+      </div>
 }
 
-module.exports = Battle;
+ConfirmBattle.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  onInitiateBattle: PropTypes.func.isRequired,
+  playersInfo: PropTypes.array.isRequired,
+}
+
+module.exports = ConfirmBattle;

app/components/UserDetails.js

@@ -0,0 +1,36 @@
+var React = require('react');
+var PropTypes = React.PropTypes
+
+function UserDetails (user) {
+  return (
+    <div>
+      {!!user.score && <li className="list-group-item"><h3>Score: {user.score}</h3></li>}
+      <li className="list-group-item"> <img src={user.info.avatar_url} className="img-rounded img-responsive"/></li>
+      {user.info.name && <li className="list-group-item">Name: {user.info.name}</li>}
+      <li className="list-group-item">Username: {user.info.login}</li>
+      {user.info.location && <li className="list-group-item">Location: {user.info.location}</li>}
+      {user.info.company && <li className="list-group-item">Company: {user.info.company}</li>}
+      <li className="list-group-item">Followers: {user.info.followers}</li>
+      <li className="list-group-item">Following: {user.info.following}</li>
+      <li className="list-group-item">Public Repos: {user.info.public_repos}</li>
+      {user.info.blog && <li className="list-group-item">Blog: <a href={user.info.blog}> {user.info.blog}</a></li>}
+    </div>
+  )
+}
+
+UserDetails.propTypes = {
+  score: PropTypes.number,
+  info: PropTypes.shape({
+    avatar_url: PropTypes.string.isRequired,
+    blog: PropTypes.string,
+    company: PropTypes.string,
+    followers: PropTypes.number.isRequired,
+    following: PropTypes.number.isRequired,
+    location: PropTypes.string,
+    login: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    public_repos: PropTypes.number.isRequired,
+  })
+}
+
+module.exports = UserDetails;

app/containers/BattleContainer.js

@@ -16,14 +16,28 @@ var BattleContainer = React.createClass({
   componentDidMount: function(){
     var query = this.props.location.query;
     githubHelpers.getPlayersInfo([query.playerOne, query.playerTwo]).then(function(players){
-      console.log('Players', players);
+      this.setState({
+        isLoading: false,
+        playerInfo: [players[0], players[1]]
+      })
+    }.bind(this));
+  },
+
+  handleInitiateBattle: function(){
+    this.context.router.push({
+      pathname: '/results',
+      state: {
+        playerInfo: this.state.playerInfo
+      }
     })
   },
+
   render: function(){
     return (
       <Battle
         isLoading={this.state.isLoading}
-        playerInfo={this.state.playerInfo}
+        onInitiateBattle={this.handleInitiateBattle}
+        playersInfo={this.state.playerInfo}
       />
     )
   }

app/utils/githubHelpers.js

@@ -13,6 +13,8 @@ var helpers = {
       return info.map(function(user){
         return user.data;
       })
+    }).catch(function(err){
+        console.warn("Error in getPlayersInfo");
     })
 
   }