<commit_before>
import {createSelector, createStructuredSelector} from 'reselect'
import React, {Component, PropTypes} from 'react'
import classNames from 'classnames'
import {connect} from './connect'

import getDominantColor from './get-dominant-color'

import GameActions from './game-actions'
import GameStats from './game-stats'
import {pathToId} from '../util/navigation'

import {findWhere} from 'underline'

import GameBrowserContextActions from './game-browser-context-actions'

export class GameBrowserContext extends Component {
  constructor () {
    super()
    this.state = {}
  }

  render () {
    const barStyle = {}

    const {browserState, game} = this.props
    const {loading} = browserState
    const barClasses = classNames('browser-context', 'game-browser-context', {loading})

    const coverStyle = {
      backgroundImage: `url('${game.coverUrl}')`
    }

    return <div className={barClasses} style={barStyle}>
      <div className='cover' style={coverStyle}/>
      <GameStats game={game} mdash={false}/>
      {this.gameActions()}
    </div>
  }

  gameActions () {
    const {game} = this.props
    if (!game) return ''

    return <GameActions game={game} CustomSecondary={GameBrowserContextActions}/>
  }

  componentWillReceiveProps () {
    this.updateColor()
  }

  componentDidMount () {
    this.updateColor()
  }

  updateColor () {
    const {game} = this.props
    if (game) {
      getDominantColor(game.coverUrl, (palette) => {
        this.setState({dominantColor: getDominantColor.pick(palette)})
      })
    }
  }
}

GameBrowserContext.propTypes = {
  gameId: PropTypes.number,
  game: PropTypes.object,
  cave: PropTypes.object,
  downloadKey: PropTypes.object,

  t: PropTypes.func.isRequired
}

const mapStateToProps = () => {
  const marketSelector = createStructuredSelector({
    gameId: (state, props) => +pathToId(props.tabPath),
    userMarket: (state, props) => state.market,
    globalMarket: (state, props) => state.globalMarket,
    tabData: (state, props) => props.tabData
  })

  return createSelector(
    marketSelector,
    (cs) => {
      const getGame = (market) => ((market || {}).games || {})[cs.gameId]
      const game = getGame(cs.userMarket) || getGame(cs.tabData)
      const downloadKey = ((cs.userMarket || {}).downloadKeys || {})::findWhere({gameId: cs.gameId})
      const cave = cs.globalMarket.cavesByGameId[cs.gameId]
      return {game, downloadKey, cave}
    }
  )
}

const mapDispatchToProps = (dispatch) => ({})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GameBrowserContext)
<commit_msg>don't load undefined background image<commit_after>
import {createSelector, createStructuredSelector} from 'reselect'
import React, {Component, PropTypes} from 'react'
import classNames from 'classnames'
import {connect} from './connect'

import getDominantColor from './get-dominant-color'

import GameActions from './game-actions'
import GameStats from './game-stats'
import {pathToId} from '../util/navigation'

import {findWhere} from 'underline'

import GameBrowserContextActions from './game-browser-context-actions'

export class GameBrowserContext extends Component {
  constructor () {
    super()
    this.state = {}
  }

  render () {
    const barStyle = {}

    const {browserState, game} = this.props
    const {loading} = browserState
    const barClasses = classNames('browser-context', 'game-browser-context', {loading})

    const coverStyle = {}
    if (game.coverUrl) {
      coverStyle.backgroundImage = `url('${game.coverUrl}')`
    }

    return <div className={barClasses} style={barStyle}>
      <div className='cover' style={coverStyle}/>
      <GameStats game={game} mdash={false}/>
      {this.gameActions()}
    </div>
  }

  gameActions () {
    const {game} = this.props
    if (!game) return ''

    return <GameActions game={game} CustomSecondary={GameBrowserContextActions}/>
  }

  componentWillReceiveProps () {
    this.updateColor()
  }

  componentDidMount () {
    this.updateColor()
  }

  updateColor () {
    const {game} = this.props
    if (game) {
      getDominantColor(game.coverUrl, (palette) => {
        this.setState({dominantColor: getDominantColor.pick(palette)})
      })
    }
  }
}

GameBrowserContext.propTypes = {
  gameId: PropTypes.number,
  game: PropTypes.object,
  cave: PropTypes.object,
  downloadKey: PropTypes.object,

  t: PropTypes.func.isRequired
}

const mapStateToProps = () => {
  const marketSelector = createStructuredSelector({
    gameId: (state, props) => +pathToId(props.tabPath),
    userMarket: (state, props) => state.market,
    globalMarket: (state, props) => state.globalMarket,
    tabData: (state, props) => props.tabData
  })

  return createSelector(
    marketSelector,
    (cs) => {
      const getGame = (market) => ((market || {}).games || {})[cs.gameId]
      const game = getGame(cs.userMarket) || getGame(cs.tabData)
      const downloadKey = ((cs.userMarket || {}).downloadKeys || {})::findWhere({gameId: cs.gameId})
      const cave = cs.globalMarket.cavesByGameId[cs.gameId]
      return {game, downloadKey, cave}
    }
  )
}

const mapDispatchToProps = (dispatch) => ({})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GameBrowserContext)

{'fraction_non_alphanumeric': 0.1397869912514264, 'fraction_numerical': 0.0, 'mean_word_length': 3.7592760180995475, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '660853', 'n_tokens_mistral': 1628, 'n_tokens_neox': 1606, 'n_words': 358}