diff --git a/src/App.js b/src/App.js index 7f62eb4..4fe2c54 100644 --- a/src/App.js +++ b/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 (
- +
); } diff --git a/src/components/ScoutOverview.js b/src/components/ScoutOverview.js new file mode 100644 index 0000000..5efed7a --- /dev/null +++ b/src/components/ScoutOverview.js @@ -0,0 +1,16 @@ +import React from "react"; + +export default ScoutOverview = ( + {scoutID, + displayName, + advancementDeadline, + completedAdventures, + completedAchievements} +) => { + console.log(data); + return ( +
+ {displayName} +
+ ); +} diff --git a/src/containers/ScoutOverview.js b/src/containers/ScoutOverview.js index d73d8cf..d0fa6e0 100644 --- a/src/containers/ScoutOverview.js +++ b/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 ( -
- {data.getScout && data.getScout.displayName} -
- ); -} - 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 +});