update pagination to react-paginate

package.json

@@ -20,6 +20,7 @@
 		"react-dom": "^16.8.6",
 		"react-icons": "^3.7.0",
 		"react-mapbox-gl": "^4.6.0",
+		"react-paginate": "^6.3.0",
 		"react-router-dom": "^5.0.1",
 		"react-scripts": "3.0.1",
 		"react-spinners": "^0.5.13",

src/components/DataCard.js

@@ -63,7 +63,7 @@ const DataCard = props => {
 								top: 10,
 								right: 30,
 								left: 0,
-								bottom: 50,
+								bottom: 60,
 							}}
 						>
 							<Tooltip
@@ -75,7 +75,7 @@ const DataCard = props => {
 								stroke="white"
 								dataKey="xAxis"
 								tick={{ fill: 'white' }}
-								angle={-45}
+								angle={-30}
 								textAnchor="end"
 							/>
 							<YAxis stroke="white" dataKey="yAxis" tick={{ fill: 'white' }} />

src/components/DataTable.js

 import React from 'react';
-import { Col, Table, Row, Button, Pagination } from 'react-bootstrap';
+import { Col, Table, Row, Button } from 'react-bootstrap';
 import { CSVLink } from 'react-csv';
 import { FaFileCsv } from 'react-icons/fa';
+import ReactPaginate from 'react-paginate';
 
 export default class DataTable extends React.PureComponent {
 	state = {
@@ -10,33 +11,10 @@ export default class DataTable extends React.PureComponent {
 		itemsPerPage: 10,
 	};
 
-	handleClick = e => {
-		this.setState({
-			activePage: Number(e.target.id),
-		});
-	};
-	prevClick = () => {
-		this.setState({
-			activePage: this.state.activePage - 1,
-		});
-	};
-	nextClick = () => {
-		this.setState({
-			activePage: this.state.activePage + 1,
-		});
-	};
+	handlePageClick = data => {
+		let selected = data.selected + 1;
 
-	firstClick = () => {
-		this.setState({
-			activePage: 1,
-		});
-	};
-	lastClick = () => {
-		const { data, itemsPerPage } = this.state;
-		const totalPage = Math.ceil(data.length / itemsPerPage);
-		this.setState({
-			activePage: totalPage,
-		});
+		this.setState({ activePage: selected });
 	};
 	render() {
 		const { data, activePage, itemsPerPage } = this.state;
@@ -65,21 +43,6 @@ export default class DataTable extends React.PureComponent {
 			);
 		});
 
-		const pageNumbers = [];
-		for (let i = 1; i <= totalPage; i++) {
-			pageNumbers.push(i);
-		}
-
-		const renderPageNumbers = pageNumbers
-			.filter(number => number > activePage - 5 && number < activePage + 5)
-			.map(number => {
-				return (
-					<Pagination.Item active={number === activePage} key={number} id={number} onClick={this.handleClick}>
-						{number}
-					</Pagination.Item>
-				);
-			});
-
 		return (
 			<Col>
 				<Row style={{ marginLeft: 1 }}>
@@ -103,13 +66,22 @@ export default class DataTable extends React.PureComponent {
 					</thead>
 					<tbody>{renderItem}</tbody>
 				</Table>
-				<Pagination size="sm" style={{ marginTop: 5, justifyContent: 'center' }}>
-					<Pagination.First onClick={this.firstClick} disabled={activePage === 1} />
-					<Pagination.Prev onClick={this.prevClick} disabled={activePage === 1} />
-					{renderPageNumbers}
-					<Pagination.Next onClick={this.nextClick} disabled={activePage === totalPage} />
-					<Pagination.Last onClick={this.lastClick} disabled={activePage === totalPage} />
-				</Pagination>
+				<ReactPaginate
+					pageCount={totalPage}
+					pageRangeDisplayed={3}
+					marginPagesDisplayed={2}
+					previousLabel={'previous'}
+					nextLabel={'next'}
+					breakLabel={'...'}
+					onPageChange={this.handlePageClick}
+					containerClassName={'pagination'}
+					pageClassName={'page-item'}
+					pageLinkClassName={'page-link'}
+					activeClassName={'active'}
+					previousClassName={'page-link'}
+					nextClassName={'page-link'}
+					breakClassName={'page-link'}
+				/>
 			</Col>
 		);
 	}

src/styles.scss

@@ -8,7 +8,10 @@ body {
 .form-control {
 	margin-bottom: 0.4rem;
 }
-
+.pagination {
+	border-radius: 5px;
+	margin-top: 10px;
+}
 // .myStyleGutters {
 // 	> .col,
 // 	> [class*='col-'] {

yarn.lock

@@ -9219,6 +9219,13 @@ react-overlays@^1.2.0:
     uncontrollable "^6.0.0"
     warning "^4.0.2"
 
+react-paginate@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-6.3.0.tgz#29cbb5d1645227f4e4f959b9d7f43cfae603f801"
+  integrity sha512-lT/ne7hZzctGDli4QzUAou0JjfZgxKmtl9/r30B5UVonICZIy1u0SrAkdlEZ5ubgzrOykBeCmxkTWi5IyPg4AQ==
+  dependencies:
+    prop-types "^15.6.1"
+
 react-popper@^1.3.2:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"