Merge branch 'master' into gh-pages

README.md

@@ -2,7 +2,13 @@ I created this project because a) I always wished there was a better way to
 track the progress of my CubScouts in getting their ranks and b) I wanted to
 learn graphql with Apollo.
 
-Right now there is a [demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f) (unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so it may not connect/update properly) where you can tick off achievements for a single scout's wolf adventures.  I've mostly built this project to learn graphql so I started there, there-fore it's not pretty (yet) but that is what I'll start working on next. Currently the demo is subscribing to live updates from a graph.cool generated API to know which achievements are checked off. 
+Right now there is a
+[demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f)
+(unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so
+it may not connect/update properly) where you can tick off achievements for a
+single scout's wolf adventures. Currently the demo is subscribing to live updates
+from a graph.cool generated API to know which achievements are checked off.
 
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+This project was bootstrapped with [Create React
+App](https://github.com/facebookincubator/create-react-app).
 

package-lock.json

@@ -778,6 +778,11 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
       "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc="
     },
+    "brcast": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-2.0.1.tgz",
+      "integrity": "sha512-Hm6AjEjr2hg5P/+tfAi7IARUW6mRNweni7ezt7vvOF53qn4++rdJoPsg8dDGS7KcwT2cRDucuFNMRYi3nkCD6Q=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -1901,6 +1906,11 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha1-8UXFwiA5zt8KHU/2ylkq0CaEcMo="
+    },
     "fastparse": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
@@ -2618,6 +2628,16 @@
         }
       }
     },
+    "glamor": {
+      "version": "2.20.30",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.30.tgz",
+      "integrity": "sha512-loENOwfYk24QXdr4Ms3NUFl8cQN5SGJbIUCSnURx5NESb9/VdeNjH3r9XWzpmtTNr1iywcIfsgXdaesbHS7Dzg=="
+    },
+    "glamorous": {
+      "version": "3.23.5",
+      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-3.23.5.tgz",
+      "integrity": "sha1-SfYTop9kze6AlIZ5xm281AhOX9U="
+    },
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -2815,6 +2835,11 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
       "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4="
     },
+    "html-element-attributes": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.0.tgz",
+      "integrity": "sha1-8G69/OIt6XnbggICZcrFQfsX1Pw="
+    },
     "html-encoding-sniffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
@@ -2830,6 +2855,11 @@
       "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.2.tgz",
       "integrity": "sha1-1zvD/0SJQkCIGM5gm/P7DqfvTrc="
     },
+    "html-tag-names": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.2.tgz",
+      "integrity": "sha1-9lFolkxanIJnXv2ogoddyyqHXCI="
+    },
     "html-webpack-plugin": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
@@ -5123,6 +5153,11 @@
       "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.4.5.tgz",
       "integrity": "sha1-4+iVoJcM8U7o+JAROvaBl6vz0LE="
     },
+    "react-html-attributes": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.1.tgz",
+      "integrity": "sha1-l7XscQ2miDNZjIvm+JrENiFoQKU="
+    },
     "react-router": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.1.1.tgz",
@@ -5754,6 +5789,11 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
       "integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo="
     },
+    "svg-tag-names": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-1.1.1.tgz",
+      "integrity": "sha1-lkGynvcQJe4JTHBD983efZn71Qo="
+    },
     "svgo": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",

package.json

@@ -4,7 +4,10 @@
   "private": true,
   "homepage": "https://bobjohnbob.github.io/scouttracker/build",
   "dependencies": {
+    "glamor": "^2.20.30",
+    "glamorous": "^3.23.5",
     "material-ui": "^0.18.6",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-apollo": "^1.4.2",
     "react-dom": "^15.6.1",

src/components/Achievement.js

@@ -1,5 +1,10 @@
 import React from 'react';
-import { gql, graphql } from 'react-apollo';
+import { Div } from 'glamorous';
+
+const blue = "#00BCD4";
+const size = 2.6;
+const size_rem = `${size}rem`;
+const pad = "0.5rem";
 
 export default({
 	id, 
@@ -9,12 +14,36 @@ export default({
 	description, 
 	additionalText,
 	scoutID,
-	mutate
+	completeAchievement,
+	uncompleteAchievement
 }) => {
 	if(completed) {
-		return <div className='completed-achievement'>
+		const variables = {
-			{number}{letter}
+			id: completed.id
-		</div>;
+		};
+		return <Div 
+			onClick={()=>{uncompleteAchievement({variables})}}
+			fontSize={`${size/2}rem`}
+			border={`0.2rem solid ${blue}`}
+			display="inline-flex"
+			color="white"
+			backgroundColor={blue}
+			width={size_rem}
+			height={size_rem}
+			borderRadius={size_rem}
+			margin={pad}
+			cursor="pointer"
+		>
+			<Div 
+				display="flex" 
+				width={size_rem} 
+				height={size_rem} 
+				justifyContent="center" 
+				alignItems="center"
+			>
+				<Div display="inline-flex">{number}{letter}</Div>
+			</Div>
+		</Div>
 	} else {
 
 		const variables = {
@@ -23,8 +52,28 @@ export default({
 			date: (new Date(Date.now())).toISOString()
 		};
 
-		return <button onClick={() => mutate({variables})} className='achievement'>
+		return <Div
-			{number}{letter}
+			onClick={()=>{completeAchievement({variables})}}
-		</button>;
+			fontSize={`${size/2}rem`}
+			border={`0.15rem solid ${blue}`}
+			display="inline-flex"
+			color={blue}
+			width={size_rem}
+			height={size_rem}
+			borderRadius={size_rem}
+			margin={pad}
+			cursor="pointer"
+		>
+			<Div 
+				display="flex" 
+				width={size_rem} 
+				height={size_rem} 
+				justifyContent="center" 
+				alignItems="center"
+			>
+				<Div display="inline-flex">{number}{letter}</Div>
+			</Div>
+		</Div>
 	}
 };
+

src/components/AchievementList.js

@@ -1,8 +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 UncompleteAchievement from '../containers/UncompleteAchievement.js';
 
-const AchievementButton = CompleteAchievement(Achievement);
+const AchievementButton = compose(
+	CompleteAchievement,
+	UncompleteAchievement
+)(Achievement);
 
 export default class AchievementList extends React.Component {
 	
@@ -30,9 +36,13 @@ export default class AchievementList extends React.Component {
 		}
 		
 		const list = [...allAchievements].sort((a, b) => {
-			if (a.number === b.number)
+			if (a.number === b.number) {
-				return a.letter > b.letter;
+				if(!a.letter) return -1;
-			return a.number > b.number;
+				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,
@@ -43,9 +53,9 @@ export default class AchievementList extends React.Component {
 			return <AchievementButton {...props} />
 		});
 		
-		return <div>
+		return <Div disply="flex" padding="0.5rem">
 			{list}
-		</div>
+		</Div>
 	}
 
 	componentWillUnmount() {

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/components/ScoutOverview.js

@@ -17,7 +17,6 @@ export default class ScoutOverview extends React.Component {
 		const {
 			scoutID, 
 			displayName, 
-			advancementDeadline,
 		} = this.props;
 		const appBarProps = {
 			title: displayName,

src/containers/CompleteAchievement.js

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

src/containers/GetAchievementsForAdventure.js

@@ -70,7 +70,6 @@ export default graphql(gql`
 				},
 				updateQuery: (prev, response) => {
 					const subscriptionData = response.subscriptionData.data.CompletedAchievement;
-					console.log("UPDATE! :", response);
 
 					let updatedAchievements;
 					const oldAchievements = prev.completed

src/containers/GetAllAdventures.js

@@ -49,7 +49,6 @@ export default graphql(gql`
 					scoutID: params.scoutID
 				},
 				updateQuery: (prev, {subscriptionData}) => {
-					console.log("SubscriptionData: ", subscriptionData);
 					if(!subscriptionData.data) {
 						return prev;
 					}

src/containers/GetScoutData.js

@@ -35,7 +35,6 @@ export default graphql(gql`
 				},
 				updateQuery: (prev, {subscriptionData}) => {
 					if(!subscriptionData.data) {
-						console.log('no data!');
 						return prev;
 					}
 					console.log('data! : ', prev, ':', subscriptionData);

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'
+});