fixing unassigned object and changing forEach to map, plus fixing lintingst

ui/src/components/table-new/story.js

@@ -9,10 +9,10 @@ const _table = require('./');
 
 const {
   Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableItem
+  // TableHead,
+  // TableBody,
+  // TableRow,
+  // TableItem
 } = _table;
 
 const columns = [{
@@ -48,9 +48,9 @@ storiesOf('Table New', module)
   .add('Table New', () => (
     <Base>
       <Table
-        title="This is the table title"
         columns={columns}
         data={data}
+        title="This is the table title"
       />
     </Base>
   ));

ui/src/components/table-new/table-body.js

@@ -1,27 +1,36 @@
-const composers = require('../../shared/composers');
+// const composers = require('../../shared/composers');
 
 const React = require('react');
-const Styled = require('styled-components');
+// const Styled = require('styled-components');
+//
+// const {
+//   default: styled,
+// } = Styled;
 
-const {
-  default: styled,
-} = Styled;
+// const {
+//   clearfix
+// } = composers;
 
-const {
-  clearfix
-} = composers;
-
-const Row = ({st
-  dataItem
+const Row = ({
+  dataItem = {}
 }) => {
   const _dataItem = dataItem;
 
-
-  Object.keys(_dataItem).forEach( (item, i) => {
+  const rowItems = Object.keys(_dataItem).map( (item, i) => {
     const value = _dataItem[item];
 
     return <td key={i}>{value}</td>;
   });
+
+  return (
+    <tr>
+      {rowItems}
+    </tr>
+  );
+};
+
+Row.propTypes = {
+  dataItem: React.PropTypes.object
 };
 
 const TableRows = ({
@@ -30,7 +39,7 @@ const TableRows = ({
 }) => {
 
   const rows = columns.map( (column, index) => {
-    return <Row dataItem={data[index]} key={index} />
+    return <Row dataItem={data[index]} key={index} />;
   });
 
   return (
@@ -40,12 +49,17 @@ const TableRows = ({
   );
 };
 
+TableRows.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array
+};
+
 const TableBody = ({
   columns,
   data
 }) => {
   return (
-    <TableRows data={data} columns={columns} />
+    <TableRows columns={columns} data={data} />
   );
 };
 

ui/src/components/table-new/table-head.js

@@ -1,56 +1,52 @@
-const fns = require('../../shared/functions');
-const composers = require('../../shared/composers');
+// const fns = require('../../shared/functions');
+// const composers = require('../../shared/composers');
 
 const React = require('react');
-const Styled = require('styled-components');
+// const Styled = require('styled-components');
 
-const {
-  remcalc
-} = fns;
+// const {
+//   remcalc
+// } = fns;
 
-const {
-  default: styled,
-  css
-} = Styled;
+// const {
+//   default: styled,
+//   css
+// } = Styled;
 
-const {
-  clearfix
-} = composers;
+// const {
+//   clearfix
+// } = composers;
 
-const StyledTableHead = styled.header`
-  background: #fafafa;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  padding: ${remcalc(24)} 0;
-  
-  ${clearfix}
-  
-  & > .table-item {
-    text-align: center;
-    
-    ${props => {
-      const width = 100 / props.itemCount;
-      return css`
-        width: ${width}%;  
-      `;
-    }}
-  }
-`;
+// const StyledTableHead = styled.header`
+//   background: #fafafa;
+//   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+//   padding: ${remcalc(24)} 0;
+//
+//   ${clearfix}
+//
+//   & > .table-item {
+//     text-align: center;
+//
+//     ${props => {
+//       const width = 100 / props.itemCount;
+//       return css`
+//         width: ${width}%;
+//       `;
+//     }}
+//   }
+// `;
 
 const TableHeader = (columns) => {
 
-  columns.map( (column) => {
+  columns.map( (column, i) => {
     return (
-      <td>{column.title}</td>
-    )
+      <td key={i}>{column.title}</td>
+    );
   });
 
   return (
-    <thead></thead>
+    <thead />
   );
 };
 
-TableHeader.propTypes = {
-  children: React.PropTypes.node
-};
-
 module.exports = TableHeader;

ui/src/components/table-new/table.js

@@ -13,8 +13,8 @@ const StyledTableWrapper = styled.section`
 	font-style: normal;
 `;
 
-const StyledTableHead = styled.thead``;
-const StyledTableBody = styled.tbody``;
+// const StyledTableHead = styled.thead``;
+// const StyledTableBody = styled.tbody``;
 
 const StyledTitle = styled.h3`
   text-align: center
@@ -31,9 +31,17 @@ const TableContent = ({
   return (
     <table>
       {hasHeader ? <TableHeader columns={columns} /> : null}
-      {hasBody ? <TableBody data={data} columns={columns} /> : null}
+      {hasBody ? <TableBody columns={columns} data={data} /> : null}
     </table>
-  )
+  );
+};
+
+TableContent.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  hasBody: React.PropTypes.bool,
+  hasHeader: React.PropTypes.bool,
+  width: React.PropTypes.string,
 };
 
 const Table = ({

ui/src/components/table/table.js

@@ -11,23 +11,23 @@ const StyledTableWrapper = styled.section`
 	font-style: normal;
 `;
 
-const StyledTableHead = styled.thead``;
-const StyledTableBody = styled.tbody``;
+// const StyledTableHead = styled.thead``;
+// const StyledTableBody = styled.tbody``;
 
-const renderTable = ({
-  hasHeader = false,
-  hasBody = true,
-  width = '100%'
-}) => {
-
-  const tableBody = () => {
-
-    return (
-      <StyledTableBody />
-    )
-  }
-
-}
+// const renderTable = ({
+//   hasHeader = false,
+//   hasBody = true,
+//   width = '100%'
+// }) => {
+//
+//   const tableBody = () => {
+//
+//     return (
+//       <StyledTableBody />
+//     )
+//   }
+//
+// }
 
 const Table = ({
   children,