Refactored component out of container.

src/App.js

@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
 import { getQueryParamByName } from './utils.js';
-import ScoutOverview from './containers/ScoutOverview.js';
+import ScoutOverviewCont from './containers/ScoutOverview.js';
+import ScoutOverview from './components/ScoutOverview.js';
 
 class App extends Component {
 	render() {
 		const scoutID = getQueryParamByName("id", this.props.slug);
+		var MainView = ScoutOverviewCont(ScoutOverview);
+
 		return (
 			<div className="App">
-				<ScoutOverview scoutID={scoutID} />
+				<MainView scoutID={scoutID} />
 			</div>
 		);
 	}

src/components/ScoutOverview.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default ScoutOverview = (
+	{scoutID, 
+	displayName, 
+	advancementDeadline,
+	completedAdventures,
+	completedAchievements}
+) => {
+	console.log(data);
+	return (
+		<div>
+			{displayName}
+		</div>
+	);
+}

src/containers/ScoutOverview.js

@@ -1,22 +1,21 @@
 import React from "react";
 import { gql, graphql } from 'react-apollo';
 
-function ScoutOverview({data, scoutID}) {
-	console.log(data);
-	return (
-		<div>
-			{data.getScout && data.getScout.displayName}
-		</div>
-	);
-}
-
 export default graphql(gql`
 	query GetScoutData($scoutID:ID!){
 		getScout(id: $scoutID){
-			displayName
+			displayName,
+			advancementDeadline,
+			adventures,
+			acheivments,
 		}
 	}
-`,{options : ({scoutID}) => {
-	console.log("Building var! scoutId: ", scoutID);
-	return {variables: {scoutID}};
-}})(ScoutOverview);
+`,{
+	options : ({scoutID}) => ({variables: {scoutID}}),
+	props: ({ ownProps, data }) => {
+		scoutID: ownProps.scoutID,
+		displayName: data.getScout.displayName,
+		completedAdventures: data.getScout.adventures,
+		completedAchievements: data.getScout.achievements,
+		advancementDeadline: data.getScout.advancementDeadline
+});