import React from 'react'

import GameCard from './GameCard'
import { simpleFilter } from '../../lib/filter'
import { searchByAll } from '../../lib/search'

export default (props) => {
  const userId = props.userId
  const isAdmin = props.isAdmin || false
  const teams = props.teams
  let games = []
  const gamesObj = props.games
  const filterObj = props.filter || {}
  const searchField = props.search || ''
  for (let key in gamesObj) {
    const game = gamesObj[key]
    game.gameKey = key
    game.ownedByCurrentUser = game.owner_id === userId
    games.push(game)
  }
  games = simpleFilter(games, filterObj)
  games = searchByAll(games, searchField)
  const fetchingGames = props.fetchingGames
  const deleteGame = props.deleteGame
  return (
    <div className='games'>
      {!fetchingGames
        ? (games.length
          ? games.map((game, key) => <GameCard key={key} game={game} deleteGame={deleteGame} isAdmin={isAdmin}
            homeTeam={teams[game.home_team_key || game.home_team.key || game.home_team].name || "Can't find team"}
            awayTeam={teams[game.away_team_key || game.away_team.key || game.away_team].name || "Can't find team"} />)
          : <h3>No Games Found</h3>)
        : <h3>Loading Games...</h3>
      }
    </div>
  )
}

@@ -980,34 +980,19 @@
 _key
- %7C%7C game.home_team.key %7C%7C 
+%5D && teams%5B
 game
@@ -997,24 +997,28 @@
 me.home_team
+_key
 %5D.name %7C%7C %22C
@@ -1084,34 +1084,19 @@
 _key
- %7C%7C game.away_team.key %7C%7C 
+%5D && teams%5B
 game
@@ -1105,16 +1105,20 @@
 way_team
+_key
 %5D.name %7C

Change team key to use only new [side]_team_key, add extra checks