infinite scroll WIP added data change WIP expandable tree item

Author: bronz3beard

docs/CHANGELOG.md

@@ -11,6 +11,14 @@ 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.0] - 16-06-2019
+###Removed
+- infinite scroll
+
+### Added
+- WIP added data change
+- WIP expandable tree item 
+
 ## [0.1.0] - 03-06-2019
 ###Changed
 - naming of functions in pagination logic

src/App.test.js

@@ -1,9 +1,70 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { configure, mount, shallow, render } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+//Components
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+configure({ adapter: new Adapter() });
+
+describe("App Component", () => {
+  it("renders without crashing in 'debug' mode " + new Date(), () => {
+    const component = shallow(<App debug />);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
+});
+
+/*** 
+//the below mount test is for components that may interact with DOM API, or use React lifecycle methods in order to fully test the component.
+describe('App Component', () => {
+  it("renders without crashing in 'debug' mode", () => {
+
+    const component = mount(<App debug />);
+    expect(component).toMatchSnapshot();
+    component.unmount();
+  });
+});
+
+// test interacting with a child component.
+it('should be possible to activate button with Spacebar', () => {
+  const component = mount(<A-Component-Here />);
+  component
+    .find('button#my-button-one')
+    .simulate('keydown', { keyCode: 32 });
+  expect(component).toMatchSnapshot();
+  component.unmount();
+});
+***/
+
+/*** 
+// the below 2 shallow test are for simple non-interactive components.
+describe('App Component', () => {
+  it('should render correctly with no props', () => {
+    const component = shallow(<App/>);
+    
+    expect(component).toMatchSnapshot();
+  });
+});
+
+describe('A-Component-Here', () => {
+  it('should render banner text correctly with given strings', () => {
+    const strings = ['one', 'two'];
+    const component = shallow(<A-Component-Here list={strings} />);
+    expect(component).toMatchSnapshot();
+  });
+}); 
+
+// Check that a function passed as props is successfully called.
+const clickFn = jest.fn();
+describe('A-Component-Here', () => {
+  it('button click should hide component', () => {
+    const component = shallow(<A-Component-Here onClick={clickFn} />);
+    component
+      .find('button#my-button-two')
+      .simulate('click');
+    expect(clickFn).toHaveBeenCalled();
+  });
 });
+***/

src/Components/data-table.js

@@ -2,52 +2,113 @@ import React, { PureComponent } from "react";
 
 //Components
 import Preloader from "./pre-loader";
+import ScrollButton from "./scroll-to-top";
 import TableHeaders from "./table-headers";
 import TableRows from "./table-rows";
 import Pagination from "./pagination";
 
 class RecordTable extends PureComponent {
     state = {
+        error: false,
+        isLoading: false,
         columns: [
             {
+                Header: "",
+                commentHeader: "",
+                Value: "",
+                commentValue: "",
+                sortOn: "",
+                childItem: null,
+            }, {
                 Header: "Id",
+                commentHeader: "Id",
                 Value: "id",
+                commentValue: "id",
                 sortOn: "id",
+                childItem: null,
             }, {
-                Header: "Content",
-                Value: "body",
-                sortOn: "body",
+                Header: "Name",
+                commentHeader: "Name",
+                Value: "name",
+                commentValue: "name",
+                sortOn: "name",
+                childItem: null,
+            }, {
+                Header: "username",
+                commentHeader: "",
+                Value: "username",
+                commentValue: "",
+                sortOn: "username",
+                childItem: null,
             }, {
                 Header: "Email",
+                commentHeader: "Email",
                 Value: "email",
+                commentValue: "email",
                 sortOn: "email",
+                childItem: null,
             }, {
-                Header: "Name",
-                Value: "name",
-                sortOn: "name",
-            },
+                Header: "Phone",
+                commentHeader: "",
+                Value: "phone",
+                commentValue: "",
+                sortOn: "phone",
+                childItem: null,
+            }, {
+                Header: "Website",
+                commentHeader: "",
+                Value: "website",
+                commentValue: "",
+                sortOn: "website",
+                childItem: null,
+            }, {
+                Header: "Address",
+                commentHeader: "",
+                Value: "address.city",
+                commentValue: "",
+                sortOn: "adress.city",
+                childItem: [
+                    {             
+                        Value: "address.zipcode",
+                    }, {    
+                        Value: "address.street",
+                    }
+                ],
+            }, {
+                Header: "",
+                commentHeader: "Comment",
+                Value: "",
+                commentValue: "body",
+                sortOn: "body",
+                childItem: null,
+            }, 
         ],
         data: [],
-
-        isLoading: true,
-        error: false,
+        checked: false,
 
         sortOrder: {
             key: "asc",
         },
         currentPage: 1,
-        recordsPerPage: 30,
+        recordsPerPage: 15,
 
         query: "",
         PlaceHolder: "Table filter",
     };
-    componentDidMount() {
-        this.loadRecordsFromServer();
+
+    componentWillMount() {
+        this.loadDataFromServer();
     }
     // Initial call to the server for records 
-    loadRecordsFromServer() {
+    loadDataFromServer = () => {
+        const { checked } = this.state;
+  
         const xmlhr = new XMLHttpRequest();
-        const url = "https://jsonplaceholder.typicode.com/comments";
+        const url = !checked ? `https://jsonplaceholder.typicode.com/comments` :
+        `https://jsonplaceholder.typicode.com/users`  
+        ;
+        this.setState({ isLoading: true });
+
         xmlhr.open("GET", url, true);
         xmlhr.onload = () => {
             if (xmlhr.readyState === xmlhr.DONE) {
@@ -60,13 +121,13 @@ class RecordTable extends PureComponent {
                 } else {
                     this.setState({
                         error: true,
+                        isLoading: false,
                     });
                 }
             }
         };
         xmlhr.send();
     }
-
     // Column Sort handler + Logic
     columnSort = (key) => {
         const { data, sortOrder } = this.state;
@@ -134,9 +195,18 @@ class RecordTable extends PureComponent {
             currentPage: Math.ceil(data.length / recordsPerPage),
         });
     }
+    handleCheckBox = () => {
+        const { checked } = this.state;
+        this.setState({
+            recordsPerPage: 30,
+            checked: !checked,
+            query: "",
+        });
+        this.loadDataFromServer();
+    }
     render() {
-        const { data, error, columns, query, PlaceHolder,
-            currentPage, recordsPerPage, isLoading
+        const { error, hasMore, isLoading, data, columns, query, PlaceHolder,
+            currentPage, recordsPerPage, checked
         } = this.state;
 
         const indexOfLastRecord = currentPage * recordsPerPage;
@@ -163,13 +233,15 @@ class RecordTable extends PureComponent {
                     placeholder={PlaceHolder}
                     onChange={this.tableSearchFilter}
                 />
+                <div id="checkbox">
+                    <input
+                        type="checkbox"
+                        id="checkBox"
+                        onClick={this.handleCheckBox}
+                        defaultChecked="true" /> <strong>Change Data</strong>
+                </div>
             </form>
 
-        if (isLoading) {
-            return (
-                <Preloader />
-            );
-        }
         if (error) {
             return (
                 <div className="error">
@@ -179,23 +251,25 @@ class RecordTable extends PureComponent {
                 </div>
             );
         }
+        
         return (
-                <div>
-                    {recordFilter}
-                    <table id="dataTable">
-                        <TableHeaders columns={columns} columnSort={this.columnSort} />
-                        {
-                            tableData.map((record, key) => {
-                                return (
-                                    <TableRows
-                                        key={key}
-                                        columns={columns}
-                                        data={record}
-                                    />
-                                );
-                            })
-                        }
-                    </table>
+            <div>
+                {recordFilter}
+                <table id="dataTable">
+                    <TableHeaders columns={columns} checked={checked} columnSort={this.columnSort} />
+                    {
+                        tableData.map((record, key) => {
+                            return (
+                                <TableRows
+                                    key={key}
+                                    columns={columns}
+                                    data={record}
+                                    checked={checked}
+                                />
+                            );
+                        })
+                    }
+                </table>
                     <Pagination
                         data={data}
                         recordsPerPage={recordsPerPage}
@@ -206,7 +280,9 @@ class RecordTable extends PureComponent {
                         handleLast={this.handleLast}
                         handleIncrement={this.handleIncrement}
                     />
-                </div>
+                {isLoading && <Preloader />}
+                {!hasMore && <ScrollButton />}
+            </div>
         )
     }
 }

src/Components/expandable-item.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from "react";
+
+class ExpandableItem extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: false,
+            isExpanded: this.props.expanded,
+            isLoading: false,
+        }
+    }
+
+    render() {
+        const { data, columns, getDescendantProp } = this.props;
+
+        return(
+            <tr>
+                {
+                    columns && columns.map((column, key) => {
+                        return (
+                            <td key={key}>
+                                {getDescendantProp(data, column.Value)}
+                            </td>
+                        );
+                    })
+
+                }
+            </tr>
+        );
+    }
+}
+
+export default ExpandableItem;

src/Components/scroll-to-top.js

@@ -0,0 +1,16 @@
+import React, { PureComponent } from "react";
+
+class ScrollButton extends PureComponent {
+    scrollToTop = () => {
+        window.scrollTo(0, 0);
+    };
+    render() {
+        return (
+            <footer>
+                <button title="Back to top" onClick={this.scrollToTop}>Back to top</button>
+            </footer>
+        );
+    }
+}
+
+export default ScrollButton;