refact: FocusTable Singleton Model

no longer "selectedTable" in Tables Model

src/Controllers/TableListController.js

@@ -1,8 +1,10 @@
 import Tables from '../Models/Tables'
+import FocusTable from '../Models/FocusTable'
 
 class TableListController {
   constructor() {
     this.tables = new Tables()
+    this.focusTable = new FocusTable()
     this.updatedTablesEvent = new Event('updateTables')
     this.setSelectedTableEvent = new Event('setSelectedTable')
   }
@@ -13,7 +15,8 @@ class TableListController {
   }
 
   selectTableToView = id => {
-    this.tables.setSelectedTableById(id)
+    const table = this.tables.getById(id)
+    this.focusTable.table = table
     document.dispatchEvent(this.setSelectedTableEvent)
   }
 }

src/Models/FocusTable.js

@@ -0,0 +1,26 @@
+let instance = null
+
+class FocusTable {
+  constructor (table) {
+    if (instance === null) instance = this
+    this._value = table
+    return instance
+  }
+
+  set table (table) {
+    if (table.type === 'Nodule' || table.type === 'Table') this._value = table
+    else {
+      this._value = null
+      console.error('Focus Tablw value must be of type "Nodule" or "Table"')
+    }
+  }
+
+  get table () {
+    if (this._value.type === 'Table') return this._value
+    else if (this._value.type === 'Nodule') return this._value.asTable()
+    else return {}
+    
+  }
+}
+
+export default FocusTable

src/Models/Tables.js

@@ -7,7 +7,6 @@ class Tables {
   constructor () {
     if (!instance) instance = this
     this.collection = []
-    this.selectedTable = null
     return instance
   }
 
@@ -32,12 +31,6 @@ class Tables {
   getCollectionProps = () => this.collection.map(table => table.getProperties())
 
   getById = id => this.collection.find(t => id === t.id)
-
-  setSelectedTableById = id => {
-    const table = this.collection.find(t => id === t.id)
-    if (table) this.selectedTable = table
-    else this.selectedTable = null
-  }
 }
 
 export default Tables

src/views/DataTable/DataTable.js

@@ -2,25 +2,27 @@ import React, { Component } from 'react'
 import { Table } from 'semantic-ui-react'
 
 import Tables from '../../Models/Tables'
+import FocusTable from '../../Models/FocusTable'
 
 class DataTable extends Component {
   constructor (props) {
     super(props)
     this.tables = new Tables()
+    this.focusTable = new FocusTable()
     this.state = {
       headers: [],
       tableData: []
     }
     
-    document.addEventListener('setSelectedTable', this.setSelectedTable)
+    document.addEventListener('setSelectedTable', this.setFocusTable)
   }
 
-  setSelectedTable = () => {
+  setFocusTable = () => {
-    const selectedTable = this.tables.selectedTable
+    const focusTable = this.focusTable.table
-    if (selectedTable) {
+    if (focusTable) {
       this.setState({
-        headers: selectedTable.headers,
+        headers: focusTable.headers,
-        tableData: selectedTable.rows
+        tableData: focusTable.rows
       })
     }
   }
@@ -39,11 +41,8 @@ class DataTable extends Component {
 
 
   renderTableRowElements = () => {
-    const { tableData, headers } = this.state
+    const { tableData } = this.state
-    const tableRowElements = tableData.map(d => {
+    const tableRowElements = tableData.map(d => <Table.Row>{ this.renderCellElements(d) }</Table.Row> )
-      return <Table.Row>{ this.renderCellElements(d) }</Table.Row>
-    })
-
     return tableRowElements
   }