diff --git a/src/components/Achievement.js b/src/components/Achievement.js
index b790da7..12098a3 100644
--- a/src/components/Achievement.js
+++ b/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
{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"
>
{number}{letter}
@@ -49,14 +55,14 @@ export default({
};
return {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"
>
{number}{letter}
}
};
+
diff --git a/src/components/AchievementList.js b/src/components/AchievementList.js
index 2f541ad..9febe36 100644
--- a/src/components/AchievementList.js
+++ b/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,
diff --git a/src/components/AdventureList.js b/src/components/AdventureList.js
index 180f9b9..b12e507 100644
--- a/src/components/AdventureList.js
+++ b/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 Loading...
@@ -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 {
{
- //optionalAdventureList
+ optionalAdventureList
}
;
diff --git a/src/containers/CompleteAchievement.js b/src/containers/CompleteAchievement.js
index a289431..96b6e54 100644
--- a/src/containers/CompleteAchievement.js
+++ b/src/containers/CompleteAchievement.js
@@ -10,4 +10,6 @@ export default graphql(gql`
id
}
}
-`)
+`, {
+ name: 'completeAchievement'
+})
diff --git a/src/containers/UncompleteAchievement.js b/src/containers/UncompleteAchievement.js
new file mode 100644
index 0000000..700dc4a
--- /dev/null
+++ b/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'
+});