I was often annoyed to see the text "Still waiting for the following
players:" when it was followed by no players at all.
It would have been really awkward to try to achieve the result of this
commit withing the final return statement. It's funny how often I
forget that JSX doesn't require all content to be contained in a
single return statement. I often find myself migrating to an approach
that can be seen in this commit, and I seem to prefer it:
* Conditions are captured in JavaScript code, (and not within JSX)
* Various React componenents are each captured in separate JSX chunks
* The final return statement is often just listing previously
constructed components
+ let still_waiting = null;
+ if (Object.keys(this.props.players_judging).length) {
+ still_waiting = [
+ <p>
+ Still waiting for the following players:
+ </p>,
+ <ul>
+ {Object.keys(this.props.players_judging).map(player => {
+ return (
+ <li
+ key={player}
+ >
+ {player}
+ {this.props.players_judging[player] ?
+ <span className="typing"/> : null }
+ </li>
+ );
+ })}
+ </ul>
+ ];
+ }
+
if (this.props.players_judged.has(this.props.player.name)) {
return (
<div className="please-wait">
if (this.props.players_judged.has(this.props.player.name)) {
return (
<div className="please-wait">
The following players have completed judging:{' '}
{[...this.props.players_judged].join(', ')}
</p>
The following players have completed judging:{' '}
{[...this.props.players_judged].join(', ')}
</p>
- <p>
- Still waiting for the following players:
- </p>
- <ul>
- {Object.keys(this.props.players_judging).map(player => {
- return (
- <li
- key={player}
- >
- {player}
- {this.props.players_judging[player] ?
- <span className="typing"/> : null }
- </li>
- );
- })}
- </ul>
+ let still_waiting = null;
+ if (Object.keys(this.props.players_answering).length) {
+ still_waiting = [
+ <p>
+ Still waiting for the following players:
+ </p>,
+ <ul>
+ {Object.keys(this.props.players_answering).map(player => {
+ return (
+ <li
+ key={player}
+ >
+ {player}
+ {this.props.players_answering[player] ?
+ <span className="typing"/> : null }
+ </li>
+ );
+ })}
+ </ul>
+ ];
+ }
+
if (this.props.players_answered.has(this.props.player.name)) {
return (
<div className="please-wait">
if (this.props.players_answered.has(this.props.player.name)) {
return (
<div className="please-wait">
The following players have submitted their answers:{' '}
{[...this.props.players_answered].join(', ')}
</p>
The following players have submitted their answers:{' '}
{[...this.props.players_answered].join(', ')}
</p>
- <p>
- Still waiting for the following players:
- </p>
- <ul>
- {Object.keys(this.props.players_answering).map(player => {
- return (
- <li
- key={player}
- >
- {player}
- {this.props.players_answering[player] ?
- <span className="typing"/> : null }
- </li>
- );
- })}
- </ul>