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 (
- Hello World!
+
);
}
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 (
+
+ {data.getScout && data.getScout.displayName}
+
+ );
+}
+
+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(
-
+
,
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, " "));
+}