import React from 'react';
import { graphql } from 'react-apollo';
import PropTypes from 'prop-types';

import GameShow from '../components/GameShow/GameShow';
import Loader from '../components/Loader';

import fullGameQuery from '../graphql/fullGame.graphql';

const withGame = graphql(fullGameQuery, {
  props: ({ data }) => {
    if (!data.game) return { loading: data.loading };
    if (data.error) return { hasErrors: true };
    return {
      game: data.game,
    };
  },
  options: (props) => ({ variables: { id: props.match.params.id } })
});

const GamePage = ({ game, loading }) => (
  loading
  ? <Loader />
  : <GameShow game={game} />
);

GamePage.propTypes = {
  loading: PropTypes.bool,
  game: PropTypes.object,
};

GamePage.defaultProps = {
  loading: false,
  game: {}
};

const GamePageWithData = withGame(GamePage);

export default GamePageWithData;

@@ -60,16 +60,55 @@
 pollo';%0A
+import %7B connect %7D from 'react-redux';%0A
 import P
@@ -294,16 +294,80 @@
 phql';%0A%0A
+const mapStateToProps = (%7B game %7D) =%3E (%0A  %7B%0A    ...game%0A  %7D%0A);%0A%0A
 const wi
@@ -682,16 +682,45 @@
  loading
+, isDownloading, isInstalling
  %7D) =%3E (
@@ -758,16 +758,20 @@
 GameShow
+%0A   
  game=%7Bg
@@ -774,16 +774,84 @@
 e=%7Bgame%7D
+%0A    isDownloading=%7BisDownloading%7D%0A    isInstalling=%7BisInstalling%7D%0A 
  /%3E%0A);%0A%0A
@@ -930,70 +930,249 @@
 ct,%0A
-%7D;%0A%0AGamePage.defaultProps = %7B%0A  loading: false,%0A  game: %7B%7D%0A%7D;%0A
+  isDownloading: PropTypes.bool,%0A  isInstalling: PropTypes.bool%0A%7D;%0A%0AGamePage.defaultProps = %7B%0A  loading: false,%0A  game: %7B%7D,%0A  isDownloading: false,%0A  isInstalling: false%0A%7D;%0A%0Aconst GamePageWithProps = connect(mapStateToProps, null)(GamePage);
 %0Acon
@@ -1210,16 +1210,25 @@
 GamePage
+WithProps
 );%0A%0Aexpo

Add state to game page