Exercise pull request

src/components/Pager.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import { useState } from "react";
+import styles from './Pager.module.css';
+
+const Pager = (props) => {
+    const { total, current, onChange } = props;
+    // const [page, setPage] = useState();
+
+    const pagespan = new Array(Math.ceil(total / 5)).fill(1).map((_, index) => index + 1 + "");
+    return (
+        <div className={styles["pager-bar"]}>
+            <div>
+                <button onClick={() => onChange(current - 1)}>
+                    prev
+                </button>
+            </div>
+            <div className={styles["page-list"]}>
+                {
+                    pagespan.map((item, index) => (
+                        <div key={index + item} className={styles["page-item"]} onClick={() => onChange(item)}>
+                            <span>
+                                {item}
+                            </span>
+                        </div>
+                    ))
+                }
+            </div>
+            <div>
+                <button onClick={() => onChange(current + 1)}>
+                    next
+                </button>
+            </div>
+        </div>
+    );
+};
+
+Pager.propTypes = {
+    total: PropTypes.number.isRequired,
+    current: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default React.memo(Pager);

src/components/Pager.module.css

@@ -0,0 +1,22 @@
+:local(.pager-bar) {
+    display: flex;
+}
+
+.page-list {
+    display: flex;
+    margin: 0 10px;
+}
+
+.page-item {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+}
+
+.page-item:hover {
+    color: #1890FF;
+}

src/components/PlayerList.js

@@ -2,25 +2,70 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
+import Selector from './Selector';
+import Pager from './Pager';
 
+const pageLimit = 5;
 class PlayerList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pageindex: 0,
+      position: ""
+    };
+
+    this.handlePageChange = this.handlePageChange.bind(this);
+    this.handlePositionChange = this.handlePositionChange.bind(this);
+  }
+
+  handlePageChange(page) {
+
+    const players = this.props.players;
+    const total = players.length;
+    if (page > 0 && Math.ceil(total / pageLimit) >= page) {
+      this.setState(() => ({pageindex: page - 1}));
+    }
+  }
+
+  handlePositionChange(event) {
+    const { value } = event.target;
+    this.setState(() => ({
+      position: value,
+      pageindex: 0,
+    }));
+  }
+
   render() {
+    const { pageindex, position } = this.state;
+    const players = position === "" ? this.props.players : this.props.players.filter((item) => item.position === position);
+    const total = players.length;
+
+    const start = pageindex * pageLimit;
+    const end = start + pageLimit > total ? total : start + pageLimit;
+    const partPlayers = players.slice(start, end);
+
     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>
+      <>
+        <Selector handlePositionChange={this.handlePositionChange} />
+        <div>
+          <ul className={styles.playerList}>
+            {partPlayers.map((player, index) => {
+              return (
+                <PlayerListItem
+                  key={start + index + "-" + player.name}
+                  id={start + index}
+                  name={player.name}
+                  team={player.team}
+                  position={player.position}
+                  starred={player.starred}
+                  {...this.props.actions}
+                />
+              );
+            })}
+          </ul>
+          <Pager total={total} current={pageindex + 1} onChange={this.handlePageChange} />
+        </div>
+      </>
     );
   }
 }

src/components/Selector.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Selector.module.css';
+
+const Selector = (props) => {
+    const { handlePositionChange } = props;
+
+    return (
+        <div className={styles["selector-panel"]}>
+            <select aria-label="Default select example" onChange={handlePositionChange}>
+                <option value="" selected></option> 
+                <option value="SF">SF</option>
+                <option value="PG">PG</option>
+            </select>
+        </div>
+    )
+}
+
+Selector.propTypes = {
+    handlePositionChange: PropTypes.func.isRequired,
+};  
+
+export default Selector;

src/components/Selector.module.css

@@ -0,0 +1,3 @@
+.selector-panel {
+    margin: 20px 0;
+}

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Selector } from './Selector';

src/containers/PlayerListApp.js

@@ -1,28 +1,55 @@
 import React, { Component } from 'react';
+import classnames from 'classnames';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
 import { PlayerList, AddPlayerInput } from '../components';
 
 class PlayerListApp extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayTip: false
+    };
+  }
+
   render() {
+    const { displayTip } = this.state;
     const {
       playerlist: { playersById },
     } = this.props;
 
+    const enhancedDeletePlayer = (id) => {
+      this.setState(() => ({displayTip: true}), () => {
+        setTimeout(() => {
+          this.setState(() => ({displayTip: false}));
+        }, 2e3);
+      });
+      this.props.deletePlayer(id);
+    }
+
     const actions = {
       addPlayer: this.props.addPlayer,
-      deletePlayer: this.props.deletePlayer,
+      deletePlayer: enhancedDeletePlayer,
       starPlayer: this.props.starPlayer,
     };
 
     return (
-      <div className={styles.playerListApp}>
-        <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
-      </div>
+      <>
+        <div className={styles.playerListApp}>
+          <h1>NBA Players</h1>
+          <AddPlayerInput addPlayer={actions.addPlayer} />
+          <PlayerList players={playersById} actions={actions} />
+        </div>
+        {
+          displayTip ? (
+            <div className={classnames("alert", "alert-primary")} role="alert">
+              Delete complete
+            </div>
+          ) : null
+        }
+      </>
     );
   }
 }