Achievements are loading.

src/App.js

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

src/components/Achievement.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default({id, number, description, additionalText}) => {
+	return <div>{number}</div>;
+};

src/components/AchievementList.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Achievement from "./Achievement.js";
+
+export default ({achievements, id, completed}) => {
+	console.log("completed: ", completed);
+	if(!achievements) {
+		return <div>Loading...</div>
+	}
+	
+	const list = achievements.sort((a, b) => {
+		if (a.number === b.number)
+			return a.letter > b.letter;
+		return a.number > b.number;
+	}).map(achievement => (
+		<Achievement key={achievement.id} {...achievement} />
+	));
+	
+	return <div>
+		{list}
+	</div>
+}

src/components/Adventure.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import GetAchievements from "../containers/GetAchievementsForAdventure.js";
+import AchievementList from "./AchievementList.js";
+
+export default ({id, name, number, isRequired, achievements,
+		completedAdventures, completedAchievements}) => {
+
+	const AchievementListComp = GetAchievements(AchievementList);
+	return <div>
+		<div>{name}</div> 
+		<AchievementListComp adventureID={id} completed={completedAchievements}/>
+	</div>
+}
+

src/components/AdventureList.js

@@ -0,0 +1,39 @@
+import React from "react"
+import { splitFilter } from '../utils.js';
+import Adventure from './Adventure.js';
+
+export default ({
+	allAdventures,
+	completedAdventures
+}) => {
+	if(!allAdventures) {
+		return <div> Loading... </div>
+	}
+
+	const sortedAdventures =  allAdventures.sort((a,b) => (a.number > b.number));
+
+	const [
+		requiredAdventures, 
+		optionalAdventures
+	] = splitFilter(sortedAdventures, a => a.required);
+
+	const requiredAdventureList = requiredAdventures.map(adventure => {
+		return <Adventure key={adventure.id} {...adventure} />;
+	});
+
+	const optionalAdventureList = optionalAdventures.map(adventure => {
+		return <Adventure key={adventure.id} {...adventure} />;
+	});
+
+	return <div>
+		<div>
+			{requiredAdventureList}
+		</div>
+		<div>
+			{
+				//optionalAdventureList
+			}
+		</div>
+	</div>;
+}
+

src/components/ScoutOverview.js

@@ -1,4 +1,6 @@
 import React from "react";
+import AllAdventures from '../containers/GetAllAdventures.js'
+import AdventureList from './AdventureList.js';
 
 export default ({
 	scoutID, 
@@ -7,10 +9,14 @@ export default ({
 	completedAdventures,
 	completedAchievements
 }) => {
+	const AdventureListComp = AllAdventures(AdventureList);
 	console.log(displayName)
 	return (
 		<div>
 			{displayName}
+			<AdventureListComp 
+				{...{scoutID, completedAdventures, completedAchievements}}
+			/>
 		</div>
 	);
 }

src/containers/GetAchievementsForAdventure.js

@@ -0,0 +1,35 @@
+import { gql, graphql } from 'react-apollo';
+import { stripEdges } from '../utils.js';
+
+export default graphql(gql`
+	query GetAchievementsForAdventure($adventureID:ID!){
+		getAdventure(id:$adventureID) {
+			achievements {
+				edges {
+					node {
+						id,
+						number,
+						letter,
+						description,
+						additionalText
+					}
+				}
+			}
+		}
+	}
+`,{
+	options: ({adventureID}) => {
+		return {
+			variables: {
+				adventureID
+			}
+		};
+	},
+	props: ({ownProps, data}) => {
+		return data.getAdventure ? {
+			achievements: stripEdges(data.getAdventure.achievements),
+			...ownProps
+		} : {...ownProps}
+
+	}
+});

src/containers/GetAllAdventures.js

@@ -0,0 +1,30 @@
+import { gql, graphql } from 'react-apollo';
+
+import { stripEdges } from '../utils.js';
+
+export default graphql(gql`
+	query GetAllAdventuresForRank{
+		viewer {
+			allAdventures {
+				edges {
+					node {
+						name,
+						number,
+						required,
+						id
+					}
+				}
+			}
+		}
+	}
+`,{
+	props: ({ownProps, data}) => (
+		data.viewer ? {
+			allAdventures: stripEdges(data.viewer.allAdventures),
+			...ownProps
+		} : {...ownProps})
+});
+
+
+
+

src/containers/GetScoutData.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { gql, graphql } from 'react-apollo';
 
 export default graphql(gql`
@@ -16,7 +15,8 @@ export default graphql(gql`
 			achievements {
 				edges {
 					node {
-						name
+						number,
+						letter
 					}
 				}
 			}

src/index.js

@@ -2,7 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+//import registerServiceWorker from './registerServiceWorker';
+
+import injectTapEventPlugin from 'react-tap-event-plugin';
+
+// Needed for onTouchTap
+// http://stackoverflow.com/a/34015469/988941
+injectTapEventPlugin();
+
 import { 
 	ApolloClient, 
 	createNetworkInterface,

src/utils.js

@@ -1,8 +1,22 @@
 export function getQueryParamByName(name, url) {
-    name = name.replace(/[\[\]]/g, "\\$&");
+    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, " "));
 }
+
+export function stripEdges({edges}) {
+	return edges.map(stripEdge);
+}
+export function stripEdge({node}) {
+	return node;
+}
+
+export function splitFilter(array, check) {
+	return array.reduce((result, item) => {
+		check(item) ? result[0].push(item) : result[1].push(item);
+		return result;
+	}, [[],[]]);
+}