pagination now only one functioin to handle page changes, still needs refining but now has less code.

Author: bronz3beard

docs/CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - __Fixed__ for any bug fixes.
 - __Security__ in case of vulnerabilities.
 
+## [0.1.1] - 16-06-2019
+###Changed
+- pagination now only one functioin to handle page changes, still needs refining but now has less code.
+
 ## [0.1.0] - 16-06-2019
 ###Removed
 - infinite scroll

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-table",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "react": "^16.8.6",

src/Components/data-table.js

@@ -85,28 +85,26 @@ class RecordTable extends PureComponent {
         ],
         data: [],
         checked: false,
+        currentPage: 1,
+        recordsPerPage: 30,
 
         sortOrder: {
             key: "asc",
         },
-        currentPage: 1,
-        recordsPerPage: 15,
 
         query: "",
         PlaceHolder: "Table filter",
     };
 
-    componentWillMount() {
+    componentDidMount() {
         this.loadDataFromServer();
     }
     // Initial call to the server for records 
     loadDataFromServer = () => {
         const { checked } = this.state;
 
         const xmlhr = new XMLHttpRequest();
-        const url = !checked ? `https://jsonplaceholder.typicode.com/comments` :
-        `https://jsonplaceholder.typicode.com/users`  
-        ;
+        const url = !checked ? `https://jsonplaceholder.typicode.com/comments` : `https://jsonplaceholder.typicode.com/users`;
         this.setState({ isLoading: true });
 
         xmlhr.open("GET", url, true);
@@ -133,18 +131,11 @@ class RecordTable extends PureComponent {
         const { data, sortOrder } = this.state;
         const tableData = data
 
-        let newData;
-        if (key === "id") {
-            newData = tableData.sort((a, b) => (sortOrder[key] === "asc" ?
-                a[key] - b[key] :
-                b[key] - a[key])
-            );
-        } else {
-            newData = tableData.sort((a, b) => (sortOrder[key] === "asc" ?
-                a[key].localeCompare(b[key]) :
-                b[key].localeCompare(a[key]))
-            );
-        }
+        const newData = tableData.sort((a, b) => (sortOrder[key] === "asc" ?
+            a[key] > b[key] :
+            b[key] > a[key])
+        );
+
         this.setState({
             data: newData,
             sortOrder: {
@@ -161,40 +152,6 @@ class RecordTable extends PureComponent {
             query: query,
         });
     }
-    //Pagination 
-    handlePageChange = (event) => {
-        const currentPage = Number(event.target.id);
-        this.setState({
-            currentPage: currentPage,
-        });
-    }
-    // Logic for pagination next page (pages go forward 1 at a time)
-    handleIncrement = () => {
-        const { currentPage } = this.state;
-        this.setState({
-            currentPage: currentPage + 1,
-        });
-    }
-    // Logic for pagination previous page (pages go back 1 at a time)
-    handleDecrement = () => {
-        const { currentPage } = this.state;
-        this.setState({
-            currentPage: currentPage - 1,
-        });
-    }
-    // Logic for pagination first page
-    handleFirst = () => {
-        this.setState({
-            currentPage: 1,
-        });
-    }
-    // Logic for pagination last page
-    handleLast = () => {
-        const { recordsPerPage, data } = this.state;
-        this.setState({
-            currentPage: Math.ceil(data.length / recordsPerPage),
-        });
-    }
     handleCheckBox = () => {
         const { checked } = this.state;
         this.setState({
@@ -204,8 +161,36 @@ class RecordTable extends PureComponent {
         });
         this.loadDataFromServer();
     }
+    //Pagination 
+    handlePageChange = (event) => {
+        const currentPage = Number(event.target.id);
+        const type = event.target.textContent;
+        console.log("TCL: RecordTable -> handlePageChange -> type", type)
+
+        this.setState({
+            currentPage: currentPage,
+        });
+
+        if (type === "Next") {
+            this.setState({
+                currentPage: this.state.currentPage + 1
+            });
+        } else if (type === "Previous") {
+            this.setState({
+                currentPage: this.state.currentPage - 1
+            });
+        } else if (type === "〉〉") { //Last
+            this.setState({
+                currentPage: Math.ceil(this.state.data.length / this.state.recordsPerPage)
+            });
+        } else if (type === "〈〈") { //First
+            this.setState({
+                currentPage: 1
+            });
+        }
+    }
     render() {
-        const { error, hasMore, isLoading, data, columns, query, PlaceHolder,
+        const { error, isLoading, data, columns, query, PlaceHolder,
             currentPage, recordsPerPage, checked
         } = this.state;
 
@@ -270,18 +255,9 @@ class RecordTable extends PureComponent {
                         })
                     }
                 </table>
-                    <Pagination
-                        data={data}
-                        recordsPerPage={recordsPerPage}
-                        currentPage={currentPage}
-                        handlePageChange={this.handlePageChange}
-                        handleDecrement={this.handleDecrement}
-                        handleFirst={this.handleFirst}
-                        handleLast={this.handleLast}
-                        handleIncrement={this.handleIncrement}
-                    />
+                <Pagination data={data} currentPage={currentPage} recordsPerPage={recordsPerPage} handlePageChange={this.handlePageChange} />
                 {isLoading && <Preloader />}
-                {!hasMore && <ScrollButton />}
+                <ScrollButton />
             </div>
         )
     }

src/Components/pagination.js

@@ -1,13 +1,13 @@
 import React, { PureComponent } from "react";
 
 class Pagination extends PureComponent {
+    handlePageChange = (event) => {
+        this.props.handlePageChange(event)
+    }
     render() {
-        const { data, currentPage, recordsPerPage, handlePageChange,
-            handleDecrement, handleFirst, handleLast, handleIncrement
-        } = this.props;
+        const { currentPage, recordsPerPage } = this.props;
 
-        // pagination, mapping and logic.
-        const totalRecords = Math.ceil(data.length / recordsPerPage);
+        const totalRecords = Math.ceil(this.props.data.length / recordsPerPage);
         const pageNumbers = [];
         for (let i = 1; i <= totalRecords; i++) {
             pageNumbers.push(i);
@@ -18,7 +18,7 @@ class Pagination extends PureComponent {
                 <li
                     key={number}
                     id={number}
-                    onClick={handlePageChange}
+                    onClick={this.handlePageChange}
                     className={currentPage === number ? 'active' : ''}
                 >
                     {number}
@@ -36,23 +36,23 @@ class Pagination extends PureComponent {
 
         const previousPage = currentPage === startPage ?
             null :
-            <li key="Previous" onClick={handleDecrement}>Previous</li>;
+            <li title="previous" onClick={this.handlePageChange}>Previous</li>;
 
         const firstPage = currentPage === startPage ?
             null :
-            <li key="first" onClick={handleFirst}>&lang;&lang;</li>;
+            <li title="first" onClick={this.handlePageChange}>&lang;&lang;</li>;
 
         const lastSepPage = currentPage !== endPage ?
             <li className="disabled">...</li> :
             null;
 
         const nextPage = currentPage === endPage ?
             null :
-            <li key="Next" onClick={handleIncrement}>Next</li>;
+            <li title="next" onClick={this.handlePageChange}>Next</li>;
 
         const lastPage = currentPage === endPage ?
             null :
-            <li key="last" onClick={handleLast}>&rang;&rang;</li>;
+            <li title="last" onClick={this.handlePageChange}>&rang;&rang;</li>;
 
         return (
             <div className="pagination-wrapper">

src/Components/table-rows.js

@@ -23,7 +23,6 @@ class TableRows extends PureComponent {
     render() {
         const { expand } = this.state;
         const { columns, data, checked } = this.props;
-        console.log("TCL: TableRows -> render -> data", data)
 
         let expandVal;
         if (!expand) {