jshaver/scouttracker
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse source
This commit is contained in:
John Shaver 2017-07-22 22:44:14 -07:00
commit b303df2c12
12 changed files with 143 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -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).

40
package-lock.json generated
View file

@ -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",

3
package.json
View file

@ -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",

65
src/components/Achievement.js
View file

@ -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'>
{number}{letter}
</div>;
const variables = {
id: completed.id
};
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'>
{number}{letter}
</button>;
return <Div
onClick={()=>{completeAchievement({variables})}}
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>
}
};

22
src/components/AchievementList.js
View file

@ -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)
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,
@ -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() {

7
src/components/AdventureList.js
View file

@ -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>;

1
src/components/ScoutOverview.js
View file

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

4
src/containers/CompleteAchievement.js
View file

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

1
src/containers/GetAchievementsForAdventure.js
View file

@ -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

1
src/containers/GetAllAdventures.js
View file

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

1
src/containers/GetScoutData.js
View file

@ -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);

13
src/containers/UncompleteAchievement.js Normal file
View file

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