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 = compose( CompleteAchievement, UncompleteAchievement )(Achievement); export default class AchievementList extends React.Component { componentWillMount() { this.unsubscribe = this.props.subscribeToAchievements({ scoutID: this.props.scoutID, adventureID: this.props.adventureID }); } render() { const { allAchievements, completedAchievements, scoutID } = this.props; const completedMap = completedAchievements.reduce((map, ach) => { map[ach.achievement.id] = ach; return map }, {}); if(!allAchievements || !allAchievements.length) { return