allow passing props to Board from Client?

[jstacoder]

it would be very useful for my flow if i could pass a function into the Board component as a prop, maybe through the config object passed to Client? ie:

class MyGame extends React.Component {
    state = {numPlayers: 0}
    render(){
      const resetGame = () => this.setState({numPlayers: 0})
      const GameClient = Client({game, board, resetGame,  debug: false, numPlayers: this.state.numPlayers})
      return this.state.numPlayers === 0 ? (<PickPlayersComponent />) : (<GameClient />)
  }
}

so in my Board component i could do this.props.resetGame() to completeley reset the whole flow. or to just update the parent for any reason, (for me its so i can restart the game flow, but it could be for anything) i initially tried the provided reset function, but i need the entire Client component reset, so the number of players can be updated, since i dont believe there is anyway currently to dynamically update that value, i will submit a pull request to allow passing props through the Client, thoughts ideas?

[nicolodavis]

I don't understand. Why don't you just pass the prop directly to GameClient?

[jstacoder]

Because it’s defined in client/react.js and in that file the props are not being passed from GameClient into its children, because Client is a hoc and hoc’s hijack the props of the component they wrap unless they pass them through

[jstacoder]

So any props passed to GameClient are just ignored

[scally]

FWIW, I am using React context to accomplish this same thing (passing props into Board from outside), although I suspect just modifying the HOC to accept props would be a more elegant solution.

It does also make me wonder how other people are handling app state outside of what boardgame.io offers. Another separate Redux store? Context? Ensuring everything is expressed via flow/moves?

[nicolodavis]

@jstacoder So let's just allow props passed to GameClient to be passed through rather than have keys from the client config be interpreted as props?

[jstacoder]

I can update the pull request to do that, I think that’s a good idea, I was just thinking in terms of adding config because it seemed less tied to react that way

[philihp]

Isn't this what a move is? A function passed to the board from the client?

[jstacoder]

@philihp yes, but as I understand it, the purpose of a move is to provide a reducer that returns a new (possibly mutated) G, it can only alter ctx indirectly through events, I want to completely override ctx externally. Which is outside of the scope of moves.

[jstacoder]

@nicolodavis I can pass it through the GameClient, but because you are selectively grabbing GameClients props already ie: gameID, playerID and debug, I would either need to remove those and just pass {...this.props} or I would need to extract them, which was my original idea, but the best way I know to do it would be using the rest operator, but it seems like you are avoiding using rest, but it would be as simple as

const { gameID, playerID, debug:debugProp, ...rest} = this.props;

Then just passing those values and using the spread operator to pass the rest of the props, I could update my pull request to do that?

[nicolodavis]

Using rest sounds good to me!

[jstacoder]

ok, updated on #173 to use rest/spread to extract the currently used props, and pass the remainder.

[nicolodavis]

Thanks! Merged.