Private functional stateless components.

components/ConfirmBattle.js

@@ -1,20 +1,17 @@
 import React from "react";
 import { Link } from "react-router";
 import styles from "../styles/";
+import MainContainer from "../containers/MainContainer";
 import UserDetails from "../components/UserDetails";
 import UserDetailsWrapper from "../components/UserDetailsWrapper";
 
 const PropTypes = React.PropTypes;
 
-function puke(obj) {
-  return <pre>{JSON.stringify(obj, null, "  ")}</pre>;
-}
-
 const ConfirmBattle = (props) => {
   return props.isLoading === true
     ? <p>LOADING</p>
     : (
-    <div className="jumbotron col-sm-12 text-center" style={styles.transparentBg}>
+    <MainContainer>
       <h1>Confirm Players</h1>
       <div className="col-sm-8 col-sm-offset-2">
         <UserDetailsWrapper header="Player One">
@@ -35,7 +32,7 @@ const ConfirmBattle = (props) => {
           </Link>
         </div>
       </div>
-    </div>
+    </MainContainer>
   );
 };
 

components/Home.js

@@ -1,17 +1,17 @@
 import React from "react";
 import { Link } from "react-router";
-const transparentBg = require("../styles/").transparentBg;
+import MainContainer from "../containers/MainContainer";
 
 class Home extends React.Component {
   render() {
     return (
-      <div className="jumbotron col-sm-12 text-center" style={transparentBg}>
+      <MainContainer>
         <h1>Github Battle</h1>
         <p className="lead">Some fancy motto</p>
         <Link to="/playerOne">
           <button type="button" className="btn btn-lg btn-success">Get started</button>
         </Link>
-      </div>
+      </MainContainer>
     );
   }
 }

components/Results.js

@@ -1,15 +1,55 @@
 import React from "react";
+import { Link } from "react-router";
+import styles from "../styles";
+import MainContainer from "../containers/MainContainer";
+import UserDetails from "../components/UserDetails";
+import UserDetailsWrapper from "../components/UserDetailsWrapper";
+
 const PropTypes = React.PropTypes;
 
-function puke(obj) {
-  return <pre>{JSON.stringify(obj, null, "  ")}</pre>;
-}
+const StartOver = () => {
+  return (
+    <div className="col-sm-12" style={styles.space}>
+      <Link to="/playerOne">
+        <button type="button" className="btn btn-lg btn-danger">Start over</button>
+      </Link>
+    </div>
+  );
+};
 
 const Results = (props) => {
+  if (props.isLoading) {
+    return (
+      <p> LOADING </p>
+    );
+  }
+
+  if (props.scores[0] === props.scores[1]) {
+    return (
+      <MainContainer>
+        <h1>It's a tie</h1>
+        <StartOver path="/playerOne" />
+      </MainContainer>
+    );
+  }
+
+  const winningIndex = props.scores[0] > props.scores[1] ? 0 : 1;
+  const losingIndex = winningIndex ? 0 : 1;
+
   return (
-    <div>
-      Results: {puke(props)}
-    </div>
+    <MainContainer>
+      <h1>Results</h1>
+      <div className="col-sm-8 col-sm-offset-2">
+        <UserDetailsWrapper header="Winner">
+          <UserDetails score={props.scores[winningIndex]} info={props.playerInfo[winningIndex]} />
+        </UserDetailsWrapper>
+        <UserDetailsWrapper header="Loser">
+          <UserDetails score={props.scores[losingIndex]} info={props.playerInfo[losingIndex]}  />
+        </UserDetailsWrapper>
+      </div>
+
+      <StartOver />
+    </MainContainer>
   );
 };
 

components/UserDetails.js

@@ -22,7 +22,7 @@ UserDetails.propTypes = {
   score: PropTypes.number,
   info: PropTypes.shape({
     avatar_url: PropTypes.string.isRequired,
-    blog: PropTypes.string.isRequired,
+    blog: PropTypes.string,
     company: PropTypes.string,
     followers: PropTypes.number.isRequired,
     following: PropTypes.number.isRequired,

containers/MainContainer.js

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "../styles";
+
+const MainContainer = (props) => {
+  return (
+    <div className="jumbotron col-sm-12 text-center" style={styles.transparentBg}>
+      {props.children}
+    </div>
+  );
+};
+
+export default MainContainer;

styles/index.js

@@ -9,4 +9,3 @@ const styles = {
 };
 
 module.exports = styles;
-

utils/index.js

@@ -0,0 +1,3 @@
+export function puke(obj) {
+  return <pre>{JSON.stringify(obj, null, "  ")}</pre>;
+}