From 533300fbcbfec8c219901cbde2d9c6f336939f97 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 28 Jun 2020 08:21:41 -0700
Subject: [PATCH] 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
---
 empathy/empathy.jsx | 78 ++++++++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 6133463..3869b3a 100644
--- 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>
-- 
2.43.0