From 5fbecda9f6a42cc2020009ba9f026259a8bd6682 Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Thu, 6 Jul 2017 10:28:41 -0700
Subject: [PATCH] Apollo and graphql working!

---
 src/App.js                      |  7 ++++---
 src/containers/ScoutOverview.js | 22 ++++++++++++++++++++++
 src/index.js                    |  6 +++++-
 src/utils.js                    |  8 ++++++++
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/ScoutOverview.js
 create mode 100644 src/utils.js

diff --git a/src/App.js b/src/App.js
index 22e1c2a..7f62eb4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { getQueryParamByName } from './utils.js';
+import ScoutOverview from './containers/ScoutOverview.js';
 
 class App extends Component {
 	render() {
+		const scoutID = getQueryParamByName("id", this.props.slug);
 		return (
 			<div className="App">
-				Hello World!
+				<ScoutOverview scoutID={scoutID} />
 			</div>
 		);
 	}
diff --git a/src/containers/ScoutOverview.js b/src/containers/ScoutOverview.js
new file mode 100644
index 0000000..d73d8cf
--- /dev/null
+++ b/src/containers/ScoutOverview.js
@@ -0,0 +1,22 @@
+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
+		}
+	}
+`,{options : ({scoutID}) => {
+	console.log("Building var! scoutId: ", scoutID);
+	return {variables: {scoutID}};
+}})(ScoutOverview);
diff --git a/src/index.js b/src/index.js
index 4412d87..90f88fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,9 +15,13 @@ const client = new ApolloClient({
 	})
 });
 
+const loc = window.location;
+
+console.log("location: ", loc);
+
 ReactDOM.render(
 	<ApolloProvider client={client}>
-		<App />
+		<App slug={loc.pathname} query={loc.search} />
 	</ApolloProvider>, 
 	document.getElementById('root')
 );
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..ba969dd
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,8 @@
+export function getQueryParamByName(name, url) {
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}