Rendering UI.

components/ConfirmBattle.js

@@ -1,20 +1,48 @@
 import React from "react";
+import { Link } from "react-router";
+import styles from "../styles/";
+import UserDetails from "../components/UserDetails";
+import UserDetailsWrapper from "../components/UserDetailsWrapper";
+
+const PropTypes = React.PropTypes;
 
 function puke(obj) {
-  return <pre>{JSON.stringify(obj, null, '  ')}</pre>;
+  return <pre>{JSON.stringify(obj, null, "  ")}</pre>;
 }
 
 const ConfirmBattle = (props) => {
-  return props.isLoading ? (
-    <p>
-      Loading
-    </p>
-  ) : (
-    <div>
-      Confirm battle!
-      {puke(props.playerInfo)}
+  return props.isLoading === true
+    ? <p>LOADING</p>
+    : (
+    <div className="jumbotron col-sm-12 text-center" style={styles.transparentBg}>
+      <h1>Confirm Players</h1>
+      <div className="col-sm-8 col-sm-offset-2">
+        <UserDetailsWrapper header="Player One">
+          <UserDetails info={props.playerInfo[0]} />
+        </UserDetailsWrapper>
+        <UserDetailsWrapper header="Player Two">
+          <UserDetails info={props.playerInfo[1]} />
+        </UserDetailsWrapper>
+      </div>
+      <div className="col-sm-8 col-sm-offset-2">
+        <div className="col-sm-12" style={styles.space}>
+          <button type="button" className="btn btn-lg btn-success" onClick={props.onInitiateBattle}>
+            Initiate Battle!</button>
+        </div>
+        <div className="col-sm-12" style={styles.space}>
+          <Link to="playerOne">
+            <button type="button" className="btn btn-lg btn-danger">Reselect players!</button>
+          </Link>
+        </div>
+      </div>
     </div>
   );
 };
 
+ConfirmBattle.propTypes = {
+  onInitiateBattle: PropTypes.func.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  playerInfo: PropTypes.array.isRequired
+};
+
 export default ConfirmBattle;

components/UserDetails.js

@@ -0,0 +1,37 @@
+import React from "react";
+const PropTypes = React.PropTypes;
+
+const UserDetails = (user) => {
+  console.log("Details", 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.isRequired,
+    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
+  })
+};
+
+export default UserDetails;

components/UserDetailsWrapper.js

@@ -0,0 +1,42 @@
+import React from "react";
+import UserDetails from "./UserDetails";
+
+const PropTypes = React.PropTypes;
+
+class UserDetailsWrapper extends React.Component {
+  constructor(props, context, updater) {
+    super(props, context, updater);
+  }
+
+  score() {
+    const result = this.props.info.followers - this.props.info.following;
+    console.log("score for ", this.props.info.login, result);
+    return result;
+  }
+
+  render() {
+    return (
+      <div className="col-sm-6">
+        <p className="lead">{this.props.header}</p>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+UserDetailsWrapper.propTypes = {
+  header: PropTypes.string.isRequired,
+  info: PropTypes.shape({
+    avatar_url: PropTypes.string.isRequired,
+    blog: PropTypes.string.isRequired,
+    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
+  })
+};
+
+export default UserDetailsWrapper;

containers/ConfirmBattleContainer.js

@@ -10,6 +10,8 @@ class ConfirmBattleContainer extends React.Component {
       isLoading: true,
       playerInfo: []
     };
+
+    this.handleInitiateBattle = this.handleInitiateBattle.bind(this);
   }
 
   componentWillMount() {
@@ -37,14 +39,21 @@ class ConfirmBattleContainer extends React.Component {
     console.log("componentWillUnmount");
   }
 
-  componentWillUpdate(nextProps, nextState) {
-    console.log("componentWillUpdate: loading ?", nextState.isLoading);
+  handleInitiateBattle() {
+    console.log("Handling initiate battle");
+    this.context.router.push({
+      pathname: "/results",
+      state: {
+        playerInfo: this.state.playerInfo
+      }
+    });
   }
 
   render() {
     return (
       <ConfirmBattle
         isLoading={this.state.isLoading}
+        onInitiateBattle={this.handleInitiateBattle}
         playerInfo={this.state.playerInfo}
       />
     );

styles/index.js

@@ -1,4 +1,8 @@
 const styles = {
+  space: {
+    marginTop: "25px"
+  },
+
   transparentBg: {
     background: "transparent"
   }

utils/githubHelpers.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
-const id = "YOUR CLIENT ID";
-const sec = "YOUR CLIENT SECRET";
+const id = "b2226ece2b6fce3bb116";
+const sec = "be0525b65ff757d7e70e19589655fe5a41d4e2aa";
 const param = `?client_id=${id}&client_secret=${sec}`;
 
 function getUserInfo(username) {