refact: table + nodule list item as sub components

src/views/NoduleList/NoduleList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Card, Icon, CardContent } from 'semantic-ui-react'
+import NoduleListItem from './NoduleListItem'
 import './NoduleList.css'
 
 import Nodule from '../../Models/Nodules'
@@ -22,26 +23,7 @@ class NoduleList extends Component {
 
   renderTableListElements = () => {
     const { nodules } = this.state
-    const noduleListElements = nodules.map(n => 
+    const noduleListElements = nodules.map(n => <NoduleListItem nodule={n} /> )
-      <Card key={n.id} id={n.id}>
-        <Card.Content>
-          <Card.Header>{ n.label }</Card.Header>
-          <Card.Meta>{`${n.tables.length} tables`}</Card.Meta>
-        </Card.Content>
-        <CardContent extra>
-          <span 
-          onClick={() => { this.controller.deleteNodule(n.id) }}
-          style={{ cursor: 'pointer' }}>
-            Delete <Icon name='trash' />
-          </span>
-          <span 
-          onClick={() => { this.controller.logExportById(n.id) }}
-          style={{ cursor: 'pointer' }}>
-            View <Icon name='table' />
-          </span>
-        </CardContent>
-      </Card>
-    )
     return noduleListElements
   }
 

src/views/NoduleList/NoduleListItem.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Card, Icon } from 'semantic-ui-react'
+import './NoduleList.css'
+
+import NoduleListController from '../../Controllers/NoduleListController'
+
+class NoduleListItem extends Component {
+  constructor () {
+    super()
+    this.controller = new NoduleListController()
+  }
+
+  render = () => {
+    const { nodule } = this.props 
+    return (
+      <Card key={nodule.id} id={nodule.id}>
+        <Card.Content>
+          <Card.Header>{ nodule.label }</Card.Header>
+          <Card.Meta>{`${nodule.tables.length} tables`}</Card.Meta>
+        </Card.Content>
+        <Card.Content extra>
+          <span 
+          onClick={() => { this.controller.deleteNodule(nodule.id) }}
+          style={{ cursor: 'pointer' }}>
+            Delete <Icon name='trash' />
+          </span>
+          <span 
+          onClick={() => { this.controller.logExportById(nodule.id) }}
+          style={{ cursor: 'pointer' }}>
+            View <Icon name='table' />
+          </span>
+        </Card.Content>
+      </Card>
+    )
+  }
+}
+
+export default NoduleListItem

src/views/TableList/TableList.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import { Card, Icon, CardContent } from 'semantic-ui-react'
+import { Card } from 'semantic-ui-react'
+import TableListItem from './TableListItem'
 import './TableList.css'
 
 import Tables from '../../Models/Tables'
@@ -22,21 +23,7 @@ class TableList extends Component {
 
   renderTableListElements = () => {
     const { tables } = this.state
-    const tableListElements = tables.map(t => 
+    const tableListElements = tables.map(t => <TableListItem table={t} /> )
-      <Card key={t.id} id={t.id}>
-        <Card.Content>
-          <Card.Header>{ t.label }</Card.Header>
-          <Card.Meta>{`${t.rows.length} rows`}</Card.Meta>
-        </Card.Content>
-        <CardContent
-          extra
-          onClick={() => { this.controller.deleteTable(t.id) }}
-          style={{ cursor: 'pointer' }} 
-        >
-          Delete <Icon name='trash' />
-        </CardContent>
-      </Card>
-    )
     return tableListElements
   }
 

src/views/TableList/TableListItem.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Card, Icon } from 'semantic-ui-react'
+import './TableList.css'
+
+import TableListController from '../../Controllers/TableListController'
+
+class TableListItem extends Component {
+  constructor () {
+    super()
+    this.controller = new TableListController()
+  }
+
+  render = () => {
+    const { table } = this.props
+    return (
+      <Card key={table.id} id={table.id}>
+        <Card.Content>
+          <Card.Header>{ table.label }</Card.Header>
+          <Card.Meta>{`${table.rows.length} rows`}</Card.Meta>
+        </Card.Content>
+        <Card.Content
+          extra
+          onClick={() => { this.controller.deleteTable(table.id) }}
+          style={{ cursor: 'pointer' }} 
+        >
+          Delete <Icon name='trash' />
+        </Card.Content>
+      </Card>
+    )
+  }
+}
+
+export default TableListItem