Make table controlled component

Author: mustkem

package.json

@@ -2,7 +2,7 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
-  "homepage": "http://mustkeom.github.io/data-table-with-pagination",
+  "homepage": "http://mustkem.github.io/data-table-with-pagination",
   "dependencies": {
     "axios": "^0.19.0",
     "bootstrap": "^4.6.0",

src/App.js

@@ -1,42 +1,31 @@
-import React from 'react';
+import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
-import logo from './logo.svg';
+import logo from "./logo.svg";
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './App.css';
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./App.css";
+
+import { appStore } from "./AppStore/store";
+import { Provider } from "react-redux";
+import Home from "./Components/Home";
+import styles from "./Components/table.module.css";
 
-import { appStore } from './AppStore/store';
-import { Provider } from 'react-redux';
-import TableView from './Components/TableView';
 
 function App() {
   return (
     <div className="App">
       <Provider store={appStore}>
         <Router>
-          <header className="App-header">
-            <img src={logo} className="App-logo" alt="logo" />
-            <p>
-              Data Table
-          </p>
-          </header>
+          <h3 className={`${styles.container} ${styles.heading}`}>Data Table</h3>
           <div className="content">
             <Switch>
-              <Route path="/" exact component={TableView} />
-              <Route path="/user/:id" component={() => (<div className="container">
-                User Page
-                <div>
-                  Mock url for user is not working.
-                  https://demo9197058.mockable.io/users/1
-
-                </div>
-                <div>
-                  I will implement this page once it will start working. Leveing it for now.
-                </div>
-                </div>)} />
+              <Route path="/" exact component={Home} />
+              <Route
+                path="/user/:id"
+                component={() => <div className="container">User Page</div>}
+              />
             </Switch>
-
           </div>
         </Router>
       </Provider>

src/Components/Home.js

@@ -0,0 +1,50 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import styles from "./table.module.css";
+
+import TableComponent from "./Table";
+
+import { getList } from "../AppStore/actions";
+
+const tableHeader = {
+  id: "User ID",
+  name: "Name",
+  email: "Email",
+  username: "Username",
+  website: "Website",
+  phone: "Phone",
+  city: "City",
+  company: "Company",
+};
+
+const Home = (props) => {
+  const { getList, userList } = props;
+
+  useEffect(() => {
+    getList();
+  }, [getList]);
+
+  return (
+    <div className={styles.container}>
+      <TableComponent
+        tableHeader={tableHeader}
+        userList={userList}
+        itemsPerPage={5}
+      />
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    userList: state.tableListReducer.userList || [],
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    getList: () => dispatch(getList()),
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Home);

src/Components/TableView.js renamed to src/Components/Table.js

@@ -1,34 +1,17 @@
 import React, { useState, useEffect } from "react";
-import { connect } from "react-redux";
 import Table from "react-bootstrap/Table";
 
-import { getList } from "../AppStore/actions";
 import TableItem from "./tableItem";
 import Pagination from "../Shared/Pagination";
 import styles from "./table.module.css";
 
-const tableHeader = {
-  id: "User ID",
-  name: "Name",
-  email: "Email",
-  username: "Username",
-  website: "Website",
-  phone: "Phone",
-  city: "City",
-  company: "Company",
-};
-
 const TableView = (props) => {
-  const { getList, userList } = props;
+  const { userList, tableHeader, itemsPerPage } = props;
+
   const [searchQuery, setSearchQuery] = useState("");
   const [items, setItems] = useState([]);
   const [page, setPage] = useState(1);
   const [sortKey, setSortKey] = useState("");
-  const itemsPerPage = 5;
-
-  useEffect(() => {
-    getList();
-  }, [getList]);
 
   useEffect(() => {
     setInitialTableState();
@@ -103,16 +86,16 @@ const TableView = (props) => {
     });
 
   return (
-    <div className={styles.container}>
-      <div className="table-view">
-        <div className={styles.headerContainer}>
-          <input
-            placeholder="Search by Name"
-            value={searchQuery}
-            onChange={handleSearch}
-          />
-          <button onClick={setInitialTableState}>Reset</button>
-        </div>
+    <div className={styles.tableView}>
+      <div className={styles.headerContainer}>
+        <input
+          placeholder="Search by Name"
+          value={searchQuery}
+          onChange={handleSearch}
+        />
+        <button onClick={setInitialTableState}>Reset</button>
+      </div>
+      {items.length > 0 && (
         <Table>
           <thead>
             <tr>
@@ -148,27 +131,18 @@ const TableView = (props) => {
             ))}
           </tbody>
         </Table>
-        <Pagination
-          page={page}
-          totalItems={userList.length}
-          itemsPerPage={itemsPerPage}
-          handleChange={handleChangePage}
-        />
-      </div>
+      )}
+      {items.length === 0 && (
+        <div className={styles.noRecord}>No record Found</div>
+      )}
+      <Pagination
+        page={page}
+        totalItems={userList.length}
+        itemsPerPage={itemsPerPage}
+        handleChange={handleChangePage}
+      />
     </div>
   );
 };
 
-const mapStateToProps = (state) => {
-  return {
-    userList: state.tableListReducer.userList || [],
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    getList: () => dispatch(getList()),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TableView);
+export default TableView;

src/Components/table.module.css

@@ -18,3 +18,17 @@
     display: flex;
     justify-content: space-between;
 }
+
+.noRecord{
+    padding:20px;
+    margin:20px;
+}
+
+.heading{
+    padding:10px;
+}
+
+.tableView{
+    padding: 15px;
+    box-shadow: 0px 1px 5px 0px #b3b3b3;
+}