Skip to content

Instantly share code, notes, and snippets.

@tjogin
Last active April 24, 2017 14:21
Show Gist options
  • Save tjogin/27e013666301cf30d024af8da7b03501 to your computer and use it in GitHub Desktop.
Save tjogin/27e013666301cf30d024af8da7b03501 to your computer and use it in GitHub Desktop.
// containers vs components, a component cannot use anything not passed in via props,
// and can only communicate via callbacks passed via props
// Approach: one provider per data
<GameDataProvider gameId={this.props.gameId}>
{gameData =>
<GameProvider gameId={this.props.gameId}>
{game =>
<ServerListContainer query={this.props.query}>
{servers =>
<ServerList servers={servers}>
<ServerListItemsContainer servers={servers}>
{(server, focusItem) => {
<ServerListItem server={server} focusItem={focusItem} game={game}
onJoin={(role) => GameActions.joinServer(createJoinOptions(server, role))}
onViewDetails={() => CoreActions.gotoLocation(game.serverDetailsRoute + "?blazeGameId=" + server.gameId)}/>
}}
</ServerListItemsContainer>
</ServerList>
}
</ServerListContainer>
}
</GameProvider>
}
</GameDataProvider>
// Approach: umbrella container
<ServerListContainer gameId={this.props.gameId}, query={this.props.query}>
{(servers, game, roles, hasUGCAccess, party) =>
<ServerList servers={servers} game={game}>
{servers.map(server =>
<Focusable debugName={"server" + server.gameId}>
{focusItem => <ServerListItem server={server} focusItem={focusItem} hasUGCAccess={hasUGCAccess} roles={roles} party={party}
onJoin={(role) => GameActions.joinServer(createJoinOptions(server, role))}
onViewDetails={() => CoreActions.gotoLocation(game.serverDetailsRoute + "?blazeGameId=" + server.gameId)}/>}
</Focusable>
)}
</ServerList>
}
</ServerListContainer>
// Approach: shrink wrapped container
<ServerListContainer gameId={this.props.gameId} query={this.props.query}/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment