‘李靖’

public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <!--

src/actions/PlayersActions.js

@@ -1,9 +1,13 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(info) {
+  const { name, position } = info
   return {
     type: types.ADD_PLAYER,
-    name,
+    payload: {
+      name,
+      position
+    }
   };
 }
 

src/components/AddPlayerInput.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import styles from './AddPlayerInput.css';
+import styles from './AddPlayerInput.module.css';
 
 class AddPlayerInput extends Component {
   render() {

src/components/AddPlayerInputGroup/AddPlayerInputGroup.js

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './AddPlayerInputGroup.module.css'
+
+const playerTypes = [
+  'PG',
+  // 'SG',
+  'SF',
+  // 'PF',
+  // 'C'
+]
+
+class AddPlayerInputGroup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: '',
+      position: 'PG'
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleTypeChoose = this.handleTypeChoose.bind(this)
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.name !== this.state.name || nextState.position !== this.state.position
+  }
+
+
+  handleChange(e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleSubmit(e) {
+    const { name, position } = this.state
+    if (e.which === 13 && name.trim().length) {
+      this.props.addPlayer({ name: name.trim(), position })
+      this.setState({
+        name: ''
+      })
+    }
+  }
+
+  handleTypeChoose(type) {
+    this.setState({
+      position: type
+    })
+  }
+
+  render() {
+    const { name, position } = this.state
+    return (
+      <div>
+        <div className="input-group">
+          <div className="input-group-btn">
+            <button
+              type="button"
+              className={classnames("btn btn-default dropdown-toggle", styles.inputBtn)}
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              {position}
+              <span className="caret"></span>
+            </button>
+            <ul className="dropdown-menu">
+              {
+                playerTypes.map((type, index) => <li key={index}><a href="/#" onClick={() => this.handleTypeChoose(type)}>{type}</a></li>)
+              }
+            </ul>
+          </div>
+          <input
+            type="text"
+            className={ classnames("form-control", styles.rightInput) }
+            aria-label="..."
+            autoFocus
+            value={name}
+            onChange={this.handleChange}
+            onKeyDown={this.handleSubmit}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+AddPlayerInputGroup.propTypes = {
+  addPlayer: PropTypes.func.isRequired,
+};
+
+export default AddPlayerInputGroup;

src/components/AddPlayerInputGroup/AddPlayerInputGroup.module.css

@@ -0,0 +1,9 @@
+:local(.inputBtn){
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+:local(.rightInput) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}

src/components/PageController/PageController.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+class PageController extends Component {
+  decrement = e => {
+    const { page, setPage } = this.props
+    if (page <= 1) {
+      e.preventDefault()
+      return false
+    } else {
+      setPage(page - 1)
+    }
+  }
+
+  increment = e => {
+    const { page, setPage, total, pageSize } = this.props
+    if (page < Math.ceil(total / pageSize)) {
+      setPage(page + 1)
+    } else {
+      e.preventDefault()
+      return false
+    }
+  }
+
+  pageActive = index => {
+    if (index + 1 === this.props.page) {
+      return false
+    } else {
+      this.props.setPage(index + 1)
+    }
+  }
+
+  render() {
+    const { total, pageSize, page } = this.props
+    const pages = new Array(Math.ceil(total / pageSize)).fill('')
+    return (
+      <>
+        {
+          total > 0
+            ?
+            (<nav aria-label="Page navigation">
+              <div className="text-center">
+                <ul className="pagination">
+                  <li
+                    className={classnames('', page === 1 && 'disabled')}
+                    onClick={this.decrement}
+                  >
+                    <a href="/#" aria-label="Previous">
+                      <span aria-hidden="true">&laquo;</span>
+                    </a>
+                  </li>
+                  {
+                    pages.length && pages.map((ps, index) => (
+                      <li
+                        key={index}
+                        className={(page === index + 1) ? 'active' : ''}
+                        onClick={() => this.pageActive(index)}
+                      >
+                        <a href="/#">{index + 1}</a>
+                      </li>
+                    ))
+                  }
+                  <li
+                    onClick={this.increment}
+                    className={classnames('', (total && page === pages.length) && 'disabled')}
+                  >
+                    <a href="/#" aria-label="Next">
+                      <span aria-hidden="true">&raquo;</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </nav>)
+            :
+            null
+        }
+      </>
+    )
+  }
+}
+
+PageController.propTypes = {
+  total: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  setPage: PropTypes.func.isRequired,
+};
+
+export default PageController;

src/components/PageController/PageController.module.css

@@ -0,0 +1,3 @@
+:local(.mAuto) {
+  margin: 20px auto 20px;
+}

src/components/PlayerList.js

@@ -1,33 +1,57 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styles from './PlayerList.css';
+import styles from './PlayerList.module.css';
 import PlayerListItem from './PlayerListItem';
 
 class PlayerList extends Component {
+
+  state = {}
+
+  static getDerivedStateFromProps(props, state) {
+    const { page, setPage, players } = props
+    if (!players.length && page > 1) {
+      setPage(page - 1)
+    }
+    return null
+  }
+
   render() {
-    return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
-        })}
-      </ul>
-    );
+    const { page, pageSize, actions, players } = this.props
+    if (players.length) {
+      return (
+        <ul className={styles.playerList}>
+          {players.map((player, index) => {
+            return (
+              <PlayerListItem
+                key={player.name + index}
+                id={(page - 1) * pageSize + index}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...actions}
+                page={page}
+              />
+            )
+          })}
+        </ul>
+      )
+    } else {
+      return (
+        <div className={styles.noData}>
+          <p className="text-primary">Choose your favorite player</p>
+        </div>
+      )
+    }
   }
 }
 
 PlayerList.propTypes = {
   players: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired,
+  page: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  setPage: PropTypes.func.isRequired,
 };
 
 export default PlayerList;

src/components/PlayerList.module.css

@@ -0,0 +1,11 @@
+:local(.playerList) {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+:local(.noData) {
+  background: #fff;
+  padding: 20px;
+  min-height: 420px;
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+}

src/components/PlayerListItem.js

@@ -1,9 +1,17 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import styles from './PlayerListItem.css';
+import styles from './PlayerListItem.module.css';
 
 class PlayerListItem extends Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps.starred !== this.props.starred ||
+      nextProps.name !== this.props.name ||
+      nextProps.team !== this.props.team ||
+      nextProps.position !== this.props.position ||
+      nextProps.page !== this.props.page
+  }
+
   render() {
     return (
       <li className={styles.playerListItem}>
@@ -48,6 +56,7 @@ PlayerListItem.propTypes = {
   position: PropTypes.string.isRequired,
   starred: PropTypes.bool,
   starPlayer: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
 };
 
 export default PlayerListItem;

src/components/PlayerListItem.css → src/components/PlayerListItem.module.css

@@ -4,6 +4,11 @@
   background-color: white;
   border-bottom: 1px solid #e3e3e3;
   display: flex;
+  transition: all .3s ease;
+}
+
+:local(.playerListItem):hover {
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);
 }
 
 :local(.playerInfos) {

src/components/index.js

@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as AddPlayerInputGroup } from './AddPlayerInputGroup/AddPlayerInputGroup';
+export { default as PageController } from './PageController/PageController';

src/containers/App.js

@@ -11,11 +11,9 @@ const store = createStore(reducer);
 export default class App extends Component {
   render() {
     return (
-      <div>
-        <Provider store={store}>
-          <PlayerListApp />
-        </Provider>
-      </div>
+      <Provider store={store}>
+        <PlayerListApp />
+      </Provider>
     );
   }
 }