Eliminate lead-in text when there is nothing following

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

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 6133463f35a7a9d6ba4d58cbe8e4188bf4af48a9..3869b3a249f12ff169a62e7dca85a789c4beb2da 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -569,6 +569,28 @@ class Ambiguities extends React.PureComponent {
       );
     }
 
+    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">
@@ -577,22 +599,7 @@ class Ambiguities extends React.PureComponent {
             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>
+          {still_waiting}
           {move_on_button}
 
         </div>
@@ -732,6 +739,28 @@ class ActivePrompt extends React.PureComponent {
       );
     }
 
+    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">
@@ -740,22 +769,7 @@ class ActivePrompt extends React.PureComponent {
             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>
+          {still_waiting}
           {move_on_button}
 
         </div>