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,69 +71,98 @@ 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>
-                    <a href="#" onClick={this.handleBack}>
-                        <FontAwesomeIcon icon={faArrowCircleLeft} />
-                    </a>
-                    Join Game
-                </Fragment>
+                    <Fragment>
+                        <a href="#" onClick={this.handleBack}>
+                            <FontAwesomeIcon icon={faArrowCircleLeft} />
+                        </a>
+                        Join Game
+                    </Fragment>
             )}>
-            <Row>
-                <Col width='12'>
-                    {this.state.screen === JoinGameScreens.list ?
-                    (<>
-                    <h3>My Games</h3>
-                    {(!this.props.user && !this.state.showSignIn) ? (
-                    <a onClick={this.showSignIn}>Sign In to see your games</a>
-                    ) : (<></>)}
-                    {(!this.props.user && this.state.showSignIn) ? (
-                    <>
-                        <hr />
-                        <LoginOrCreateAccount login={this.props.login}
-                                              createAccount={this.props.createAccount}
-                                              errors={this.props.errors}
-                                              showLogin={true}
-                        />
-                        <hr />
-                    </>
-                    ) : (<></>)}
-                    <ul>
-                        {this.props.games
-                        .map((g, i) =>
-                        (<li key={i}>
-                        <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
-                        </li>))}
-                    </ul>
-                    <h3>Open Games</h3>
-                    <ul>
-                        {this.props.openGames
-                        .map((g, i) =>
-                        (<li key={i}>
-                        <a onClick={e => {
-                            e.preventDefault();
-                            this.handleClickGame(g); }}>{g.name}</a>
-                        </li>))}
-                    </ul>
-                    </>
-                    )
-            : (
-                <Fragment>
-                    <h3><b>Game:</b> {this.state.game.name}</h3>
-                    <NewGame colors={this.state.game.colors}
-                             button={'Join'}
-                             showGameName={false}
-                             gameName={this.state.game.name}
-                             gameId={this.state.game.id}
-                             type={'join-game'}
-                             hideBack={true}
-                             createAccount={this.props.createAccount}
-                             login={this.props.login}
-                             errors={this.props.errors}
-                             title={'Join as New Player'} />
-                </Fragment>)}
+                <Row>
+                    <Col width='12'>
+                        {this.state.screen === JoinGameScreens.list ?
+                         (<>
+                             <h3>My Games</h3>
+                             {(!this.props.user && !this.state.showSignIn) ? (
+                                  <a onClick={this.showSignIn}>Sign In to see your games</a>
+                             ) : (<></>)}
+                             {(!this.props.user && this.state.showSignIn) ? (
+                                  <>
+                                      <hr />
+                                      <LoginOrCreateAccount login={this.props.login}
+                                                            createAccount={this.props.createAccount}
+                                                            errors={this.props.errors}
+                                                            showLogin={true}
+                                      />
+                                      <hr />
+                                  </>
+                             ) : (<></>)}
+                             <ul>
+                                 {games.slice(0, this.state.maxGames)
+                                       .map((g, i) =>
+                                           (
+                                               <li key={i}>
+                                                   <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
+                                               </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>
+                                 {openGames.slice(0, this.state.maxOpenGames)
+                                           .map((g, i) =>
+                                               (
+                                                   <li key={i}>
+                                                       <a onClick={e => {
+                                                               e.preventDefault();
+                                                               this.handleClickGame(g); }}>{g.name}</a>
+                                                   </li>
+                                               ))}
+                                 {openGames.length > this.state.maxOpenGames ? (
+                                      <li>
+                                          <center>
+                                              <a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
+                                          </center>
+                                      </li>
+                                 ) : (<></>)}
+                             </ul>
+                         </>
+                         )
+                         : (
+                             <Fragment>
+                                 <h3><b>Game:</b> {this.state.game.name}</h3>
+                                 <NewGame colors={this.state.game.colors}
+                                          button={'Join'}
+                                          showGameName={false}
+                                          gameName={this.state.game.name}
+                                          gameId={this.state.game.id}
+                                          type={'join-game'}
+                                          hideBack={true}
+                                          createAccount={this.props.createAccount}
+                                          login={this.props.login}
+                                          errors={this.props.errors}
+                                          title={'Join as New Player'} />
+                             </Fragment>)}
                     </Col>
                 </Row>
             </GroupBox>