Showing only first 5 games by default.

src/components/join-game/JoinGame.jsx

@@ -26,19 +26,23 @@ import { start } from '../app/actions.js'
 import LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
+import { faArrowCircleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons'
 
 import NewGame from '../new-game/NewGame.jsx'
 
 const JoinGameScreens = { list: 'list', details: 'details' };
 
+const defaultMaxGames = 5;
+
 class JoinGame extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             screen: JoinGameScreens.list,
             game: null,
-            showSignIn: false
+            showSignIn: false,
+            maxGames: defaultMaxGames,
+            maxOpenGames: defaultMaxGames
         };
     }
 
@@ -67,7 +71,18 @@ class JoinGame extends React.Component {
         this.setState(state => { return { showSignIn: !state.showSignIn }; });
     }
 
+    showAllGames = (e) => {
+        e.preventDefault();
+        this.setState({ maxGames: Number.MAX_SAFE_INTEGER });
+    }
+
+    showAllOpenGames = (e) => {
+        e.preventDefault();
+        this.setState({ maxOpenGames: Number.MAX_SAFE_INTEGER });
+    }
+
     render() {
+        const { games, openGames } = this.props;
         return (
             <GroupBox title={(
                     <Fragment>
@@ -97,21 +112,39 @@ class JoinGame extends React.Component {
                                   </>
                              ) : (<></>)}
                              <ul>
-                        {this.props.games
+                                 {games.slice(0, this.state.maxGames)
                                        .map((g, i) =>
-                        (<li key={i}>
+                                           (
+                                               <li key={i}>
                                                    <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
-                        </li>))}
+                                               </li>
+                                           ))}
+                                 {games.length > this.state.maxGames ? (
+                                      <li>
+                                          <center>
+                                              <a onClick={this.showAllGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
+                                          </center>
+                                      </li>
+                                 ) : (<></>)}
                              </ul>
                              <h3>Open Games</h3>
                              <ul>
-                        {this.props.openGames
+                                 {openGames.slice(0, this.state.maxOpenGames)
                                            .map((g, i) =>
-                        (<li key={i}>
+                                               (
+                                                   <li key={i}>
                                                        <a onClick={e => {
                                                                e.preventDefault();
                                                                this.handleClickGame(g); }}>{g.name}</a>
-                        </li>))}
+                                                   </li>
+                                               ))}
+                                 {openGames.length > this.state.maxOpenGames ? (
+                                      <li>
+                                          <center>
+                                              <a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
+                                          </center>
+                                      </li>
+                                 ) : (<></>)}
                              </ul>
                          </>
                          )