add user table

src/containers/PaginationTable/PaginationTable.js

@@ -0,0 +1,124 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Table, Pagination, PaginationItem, PaginationLink, Input,
+} from 'reactstrap';
+
+class PaginationTable extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      page: 0,
+      limit: 15,
+      search: '',
+    };
+
+    this.reloadItems = this.reloadItems.bind(this);
+    this.handlePrev = this.handlePrev.bind(this);
+    this.handleNext = this.handleNext.bind(this);
+  }
+
+  componentDidMount() {
+    this.reloadItems();
+  }
+
+  handlePrev() {
+    const { page, limit, search } = this.state;
+    const { onLoadItemsForPage } = this.props;
+
+    if (page > 0) {
+      this.setState({ page: page - 1 });
+      onLoadItemsForPage(page - 1, limit, search);
+    }
+  }
+
+  handleNext() {
+    const { page, limit, search } = this.state;
+    const { total, onLoadItemsForPage } = this.props;
+
+    if ((page + 1) * limit < total) {
+      this.setState({ page: page + 1 });
+      onLoadItemsForPage(page + 1, limit, search);
+    }
+  }
+
+  reloadItems() {
+    const { limit, search } = this.state;
+    const { onReloadItems } = this.props;
+
+    this.setState({ page: 0 });
+
+    onReloadItems(0, limit, search);
+  }
+
+  render() {
+    const {
+      items, headerComponent, rowComponent, total, searchPlaceholder,
+    } = this.props;
+
+    const { page, limit } = this.state;
+
+    return (
+      <Fragment>
+        <Input
+          placeholder={searchPlaceholder}
+          input={{ size: '40' }}
+          onChange={(event) => {
+            const search = event.target.value;
+            this.setState({ search });
+            setTimeout(() => {
+              this.reloadItems();
+            }, 500);
+          }}
+        />
+
+        <Table responsive hover>
+          <thead>{headerComponent()}</thead>
+
+          <tbody>{items.map(rowComponent)}</tbody>
+        </Table>
+
+        <Pagination>
+          <PaginationItem>
+            <PaginationLink previous tag="button" disabled={page === 0} onClick={this.handlePrev} />
+          </PaginationItem>
+
+          <PaginationItem active>
+            <PaginationLink tag="button">1</PaginationLink>
+          </PaginationItem>
+
+          <PaginationItem>
+            <PaginationLink tag="button">2</PaginationLink>
+          </PaginationItem>
+
+          <PaginationItem>
+            <PaginationLink
+              next
+              tag="button"
+              disabled={(page + 1) * limit >= total}
+              onClick={this.handleNext}
+            />
+          </PaginationItem>
+        </Pagination>
+      </Fragment>
+    );
+  }
+}
+
+PaginationTable.defaultProps = {
+  total: 0,
+  searchPlaceholder: 'search for first name, last name, or email',
+};
+
+PaginationTable.propTypes = {
+  total: PropTypes.number,
+  items: PropTypes.array.isRequired,
+  onReloadItems: PropTypes.func.isRequired,
+  onLoadItemsForPage: PropTypes.func.isRequired,
+  headerComponent: PropTypes.func.isRequired,
+  rowComponent: PropTypes.func.isRequired,
+  searchPlaceholder: PropTypes.string,
+};
+
+export default PaginationTable;

src/views/Users/Users.js

@@ -1,69 +1,96 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Badge, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Col,
+  Row,
+  Table,
+  Pagination,
+  PaginationItem,
+  PaginationLink,
+} from 'reactstrap';
 
-import usersData from './UsersData'
+import usersData from './UsersData';
+import PaginationTable from '../../containers/PaginationTable/PaginationTable';
 
-function UserRow(props) {
-  const user = props.user
-  const userLink = `/users/${user.id}`
+const UsersHeader = () => (
+  <tr>
+    <th scope="col">id</th>
+    <th scope="col">name</th>
+    <th scope="col">email</th>
+    <th scope="col">phone</th>
+    <th scope="col">registered</th>
+  </tr>
+);
 
-  const getBadge = (status) => {
-    return status === 'Active' ? 'success' :
-      status === 'Inactive' ? 'secondary' :
-        status === 'Pending' ? 'warning' :
-          status === 'Banned' ? 'danger' :
-            'primary'
-  }
+const UserRow = (user) => {
+  const userLink = `/users/${user.id}`;
 
   return (
     <tr key={user.id.toString()}>
-      <th scope="row"><Link to={userLink}>{user.id}</Link></th>
-      <td><Link to={userLink}>{user.name}</Link></td>
+      <th scope="row">
+        <Link to={userLink}>{user.id}</Link>
+      </th>
+      <td>
+        <Link to={userLink}>{user.name}</Link>
+      </td>
+      <td>tbd</td>
+      <td>tbd</td>
       <td>{user.registered}</td>
-      <td>{user.role}</td>
-      <td><Link to={userLink}><Badge color={getBadge(user.status)}>{user.status}</Badge></Link></td>
     </tr>
-  )
-}
+  );
+};
 
 class Users extends Component {
+  constructor(props) {
+    super(props);
 
-  render() {
+    this.state = {
+      users: [],
+      total: usersData.length,
+    };
+
+    this.loadUsers = this.loadUsers.bind(this);
+  }
 
-    const userList = usersData.filter((user) => user.id < 10)
+  componentDidMount() {
+    this.loadUsers();
+  }
+
+  loadUsers() {
+    this.setState({ users: usersData });
+  }
 
+  render() {
     return (
       <div className="animated fadeIn">
         <Row>
-          <Col xl={6}>
+          <Col>
             <Card>
               <CardHeader>
-                <i className="fa fa-align-justify"></i> Users <small className="text-muted">example</small>
+                <i className="fa fa-align-justify" />
+                Users
               </CardHeader>
+
               <CardBody>
-                <Table responsive hover>
-                  <thead>
-                    <tr>
-                      <th scope="col">id</th>
-                      <th scope="col">name</th>
-                      <th scope="col">registered</th>
-                      <th scope="col">role</th>
-                      <th scope="col">status</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {userList.map((user, index) =>
-                      <UserRow key={index} user={user}/>
-                    )}
-                  </tbody>
-                </Table>
+                <PaginationTable
+                  total={this.state.total}
+                  items={this.state.users}
+                  onLoadItemsForPage={this.loadUsers}
+                  onReloadItems={(page, limit, search) => {
+                    this.loadUsers();
+                  }}
+                  headerComponent={UsersHeader}
+                  rowComponent={UserRow}
+                />
               </CardBody>
             </Card>
           </Col>
         </Row>
       </div>
-    )
+    );
   }
 }