Added unselecting achievements. Fixed some sorting issues.

src/components/Achievement.js

@@ -15,18 +15,24 @@ export default({
 	description, 
 	additionalText,
 	scoutID,
-	mutate
+	completeAchievement,
+	uncompleteAchievement
 }) => {
 	if(completed) {
+		console.log("Completed: ", completed);
+		const variables = {
+			id: completed.id
+		};
 		return <Div 
+			onClick={()=>{uncompleteAchievement({variables})}}
 			fontSize={`${size/2}rem`}
 			border={`0.2rem solid ${blue}`}
 			display="inline-flex"
 			color="white"
-			background-color={blue}
+			backgroundColor={blue}
 			width={size_rem}
 			height={size_rem}
-			border-radius={size_rem}
+			borderRadius={size_rem}
 			margin={pad}
 			cursor="pointer"
 		>
@@ -34,8 +40,8 @@ export default({
 				display="flex" 
 				width={size_rem} 
 				height={size_rem} 
-				justify-content="center" 
-				align-items="center"
+				justifyContent="center" 
+				alignItems="center"
 			>
 				<Div display="inline-flex">{number}{letter}</Div>
 			</Div>
@@ -49,14 +55,14 @@ export default({
 		};
 
 		return <Div
-			onClick={()=>{mutate({variables})}}
+			onClick={()=>{completeAchievement({variables})}}
 			fontSize={`${size/2}rem`}
 			border={`0.15rem solid ${blue}`}
 			display="inline-flex"
 			color={blue}
 			width={size_rem}
 			height={size_rem}
-			border-radius={size_rem}
+			borderRadius={size_rem}
 			margin={pad}
 			cursor="pointer"
 		>
@@ -64,11 +70,12 @@ export default({
 				display="flex" 
 				width={size_rem} 
 				height={size_rem} 
-				justify-content="center" 
-				align-items="center"
+				justifyContent="center" 
+				alignItems="center"
 			>
 				<Div display="inline-flex">{number}{letter}</Div>
 			</Div>
 		</Div>
 	}
 };
+

src/components/AchievementList.js

@@ -1,9 +1,14 @@
 import React from 'react';
+import {Div} from 'glamorous';
+import { compose } from 'react-apollo';
 import Achievement from './Achievement.js';
 import CompleteAchievement from '../containers/CompleteAchievement.js';
-import {Div} from 'glamorous';
+import UncompleteAchievement from '../containers/UncompleteAchievement.js';
 
-const AchievementButton = CompleteAchievement(Achievement);
+const AchievementButton = compose(
+	CompleteAchievement,
+	UncompleteAchievement
+)(Achievement);
 
 export default class AchievementList extends React.Component {
 	
@@ -31,9 +36,13 @@ export default class AchievementList extends React.Component {
 		}
 		
 		const list = [...allAchievements].sort((a, b) => {
-			if (a.number === b.number)
-				return a.letter > b.letter;
-			return a.number > b.number;
+			if (a.number === b.number) {
+				if(!a.letter) return -1;
+				if(!b.letter) return 1;
+				
+				return a.letter.toLowerCase().localeCompare(b.letter.toLowerCase());
+			}
+			return a.number - b.number;
 		}).map(achievement => {
 			const props = {
 				key: achievement.id,

src/components/AdventureList.js

@@ -16,7 +16,6 @@ export default class AdventureList extends React.Component {
 			allAdventures,
 			completedAdventures
 		} = this.props;
-		console.log("completed!: ", completedAdventures);
 
 		if(!allAdventures || !allAdventures.length) {
 			return <div> Loading... </div>
@@ -27,7 +26,8 @@ export default class AdventureList extends React.Component {
 			return map;
 		}, {});
 		
-		const sortedAdventures = [...allAdventures].sort((a,b) => (a.number > b.number));
+		const newArray = [...allAdventures];
+		const sortedAdventures = newArray.sort((a,b) => (parseInt(a.number) - parseInt(b.number)));
 
 		const [
 			requiredAdventures, 
@@ -45,7 +45,6 @@ export default class AdventureList extends React.Component {
 		});
 
 		const optionalAdventureList = optionalAdventures.map(adventure => {
-			console.log("ADVENTURE!: ", adventure);
 			const props = {
 				key: adventure.id,
 				scoutID: scoutID,
@@ -61,7 +60,7 @@ export default class AdventureList extends React.Component {
 			</div>
 			<div>
 				{
-					//optionalAdventureList
+					optionalAdventureList
 				}
 			</div>
 		</div>;

src/containers/CompleteAchievement.js

@@ -10,4 +10,6 @@ export default graphql(gql`
 			id
 		}
 	}
-`)
+`, {
+	name: 'completeAchievement'
+})

src/containers/UncompleteAchievement.js

@@ -0,0 +1,13 @@
+import { gql, graphql } from 'react-apollo';
+
+export default graphql(gql`
+		mutation UnmarkAchievementComplete($id:ID!){
+		deleteCompletedAchievement(
+			id: $id
+		) {
+			id
+		}
+	}
+`, {
+	name: 'uncompleteAchievement'
+});