Axios, promises, Github API.

components/ConfirmBattle.js

@@ -1,12 +1,19 @@
 import React from "react";
 
+function puke(obj) {
+  return <pre>{JSON.stringify(obj, null, '  ')}</pre>;
+}
+
 const ConfirmBattle = (props) => {
   return props.isLoading ? (
     <p>
       Loading
     </p>
   ) : (
-    <div>Confirm battle!</div>
+    <div>
+      Confirm battle!
+      {puke(props.playerInfo)}
+    </div>
   );
 };
 

containers/ConfirmBattleContainer.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ConfirmBattle from "../components/ConfirmBattle";
+import githubHelpers from "../utils/githubHelpers";
 
 class ConfirmBattleContainer extends React.Component {
   constructor(props) {
@@ -19,10 +20,13 @@ class ConfirmBattleContainer extends React.Component {
     console.log("componentDidMount");
     const query = this.props.location.query;
     // Fetch info from Github then update state.
-    this.setState({
-      isLoading: true
-    });
-    setTimeout(() => { this.setState({ isLoading: false }); }, 2000);
+    githubHelpers.getPlayersInfo([query.playerOne, query.playerTwo])
+      .then((info) => {
+        this.setState({
+          isLoading: false,
+          playerInfo: info
+        });
+      });
   }
 
   componentWillReceiveProps() {

package.json

@@ -12,6 +12,7 @@
   "author": "Tyler McGinnis <tylermcginnis33@gmail.com> (http://ylermcginnis.com)",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.9.1",
     "if-env": "^1.0.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",

utils/githubHelpers.js

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const id = "YOUR CLIENT ID";
+const sec = "YOUR CLIENT SECRET";
+const param = `?client_id=${id}&client_secret=${sec}`;
+
+function getUserInfo(username) {
+  return axios.get(`https://api.github.com/users/${username}${param}`);
+}
+
+const helpers = {
+  getPlayersInfo(players) {
+    // fetch some data from Github
+    return axios.all(players.map((username) => {
+      return getUserInfo(username);
+    })).then((info) => {
+      return info.map((item) => {
+        return item.data;
+      });
+    }).catch((err) => {
+      console.warn("Error in getPlayerInfo", err);
+    });
+  }
+};
+
+export default helpers;