see changelog.md [0.1.0] - 05-07-2019

Author: bronz3beard

docs/CHANGELOG.md

@@ -11,9 +11,16 @@ 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] - 03-06-2019
+## [0.1.0] - 05-07-2019
 ###Changed
-- 
+- from form to table I will eventually add react-route-dom and have linking pages
+- datatable has been broken up into smaller components
+
+### Added
+- new components to work on changing to a hook style compnonent
+- Table component only sorts one way at the moment
+- css style and responsive styles
+- usewindowwidth hook
 
 ### Added
 - Ability to test components

package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "eslint-plugin-react-hooks": "^1.6.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"
@@ -29,12 +30,20 @@
     ]
   },
   "jest": {
-    "snapshotSerializers": ["enzyme-to-json/serializer"]
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   },
   "devDependencies": {
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.13.2",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5"
+  },
+    "plugins": [
+      "react-hooks"
+    ],
+    "rules": {
+    "react-hooks/rules-of-hooks": "error"
   },
   "author": {
     "name": "Rory Fairweather-Neylan",

package.json

@@ -2,11 +2,12 @@ import React from 'react';
 
 //Components
 import Form from "./Components/form";
+import Table from "./Components/Data-Table/dataTable";
 
 function App() {
   return (
     <div className="App">
-      <Form />
+      <Table />
     </div>
   );
 }

src/App.js

@@ -0,0 +1,93 @@
+import React, { useState, useMemo } from "react";
+
+//Hooks
+import useFetch from "../../Hooks/useFetch";
+
+//Components
+import TableHeaders from "./table-headers";
+import TableRows from "./table-row";
+
+const Table = () => {
+    const [error, data, loading] = useFetch("https://jsonplaceholder.typicode.com/comments");// <- initialValue
+    const [key, setKey] = useState(null);
+    const [order, setOrder] = useState({key: "asc"});
+
+    const columnSort = useMemo(() => {
+        if (!key) {
+            return data;
+        }
+        let newData = data.sort((a, b) => (order[key] === "asc" ? a[key] > b[key] : b[key] > a[key]));
+        console.log("TCL: columnSort -> order[key]", order[key])
+
+        //setOrder(order[key] === "asc" ? "desc" : "asc");
+        return newData;
+    }, [data, key]);
+
+    if (error) {
+        return (
+            <div>
+                {error}
+            </div>
+        );
+    }
+    if (loading) {
+        return (
+            <div id="preload-wrapper">
+                <div id="loader"></div>
+            </div>
+        );
+    }
+
+    const TableContent = data && columnSort.map((item, key) => {
+        return (
+            <TableRows
+                key={key}
+                columns={columns}
+                data={item}
+            />
+        );
+    })
+
+    return (
+        <table className="dataTable">
+            <TableHeaders columns={columns} columnSort={setKey} />
+            {TableContent}
+        </table>
+    );
+}
+
+export default Table;
+
+
+const columns = [
+    {
+        Header: "Id",
+        Value: "id",
+        sortOn: "id",
+        childItem: null,
+    }, {
+        Header: "Name",
+        Value: "name",
+        sortOn: "name",
+        childItem: null,
+    }, {
+        Header: "Email",
+        Value: "email",
+        sortOn: "email",
+        childItem: null,
+    }, {
+        Header: "postId",
+        Value: "postId",
+        sortOn: "postId",
+        childItem: null,
+    }, {
+        Header: "Comment",
+        Value: "body",
+        sortOn: "bodys",
+        childItem: [
+            {
+                Value: "body",
+            },
+        ]
+    },
+]

src/Components/Data-Table/dataTable.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+//Hooks
+import useWindowWidth from "../../Hooks/useWindowWidth";
+
+const TableHeaders = ({ columns, columnSort }) => {
+    const width = useWindowWidth();
+
+    if (width > 760) {
+        return (
+            <tbody>
+                <tr className="header-tr">
+                    {
+                        columns.map((column, key) => {
+                            return (
+                                <th key={key} className={column.Value} onClick={() => columnSort(column.sortOn)}>
+                                    {column.Header}
+                                </th>
+                            );
+                        })
+                    }
+                </tr>
+            </tbody>
+        );
+    } else {
+        return (<div />);
+    }
+}
+
+export default TableHeaders;

src/Components/Data-Table/table-headers.js

@@ -0,0 +1,65 @@
+import React from 'react';
+
+//Hooks
+import useFetch from "../../Hooks/useFetch";
+//Components
+import TreeItem from "./tree-item";
+
+const TableRows = ({ data, columns }) => {
+
+    /*const IsInternalIcon = data.Icon.IsInternalIcon;
+
+    let linkVal;
+    if (IsInternalIcon) {
+        linkVal = <img src={"/Content/icons/" + data.IconText + "_x16.png"} />;
+    } else {
+        linkVal = <img src={"/Content/icons/" + data.Icon.FileType + "_x16.png"} />;
+    }
+
+    let expandVal;
+    if (data.IsContainer && data.Collapse) {
+        expandVal = " + ";
+    } else if (data.IsContainer && !data.Collapse) {
+        expandVal = " - ";
+    } else {
+        expandVal = null;
+    }
+    const treeItems = !data.Items ? loading && !data.Collapse : treeData.Items !== null && data.IsContainer !== null && !data.Collapse ? data.Items.map((record, key) => {
+        return (
+            <TreeItem columns={columns} data={record} IsInternalIcon={IsInternalIcon} linkVal={linkVal} key={key} getDescendantProp={getDescendantProp}>
+                {
+                    columns.map((column, key) => {
+                        return (
+                            <td className="treeitem" key={key}>
+                                {getDescendantProp(record, column.Value)}
+                            </td>
+                        );
+                    })
+                }
+            </TreeItem>
+        );
+    }) : null*/
+    return (
+        <tbody>
+            <tr className="tableRow">
+                {
+                    columns.map((column, key) => {
+                        return (
+                            <td className="treeitem" key={key} >
+                                {getDescendantProp(data, column.Value)}
+                            </td>
+                        );
+                    })
+                }
+            </tr>
+        </tbody>
+    );
+}
+
+export default TableRows;
+
+const getDescendantProp = (obj, desc) => {
+    var arr = desc.split('.');
+    while (arr.length && (obj = obj[arr.shift()]));
+    return obj;
+}

src/Components/Data-Table/table-row.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const TreeItem = ({ columns, data, linkVal, getDescendantProp }) => {
+    return (
+        <tr>
+            <td>
+                <div className="expand">
+                    {linkVal}
+                </div>
+            </td>
+            {
+                columns.map((column, key) => {
+                    return (
+                        <td className="treeitem" key={key} >
+                            {getDescendantProp(data, column.Value )}
+                        </td>
+                    );
+                })
+            }
+        </tr>
+    );
+}
+
+export default TreeItem;