Implemented changing selected table

falcon-client · Jan 25, 2018 · 5475b31 · 5475b31
1 parent 6b3caa5
commit 5475b31
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/app/components/Grid.js b/app/components/Grid.js
@@ -18,12 +18,10 @@ export default class GridWrapper extends PureComponent<Props, State> {
     super(props, context);
 
     this.state = {
-      columnCount: props.table.columns.length,
       height: 300,
       overscanColumnCount: 0,
       overscanRowCount: 10,
       rowHeight: 40,
-      rowCount: props.table.rows.length + 1, // + 1 for column labels
       scrollToColumn: undefined,
       scrollToRow: undefined,
       useDynamicRowHeight: false,
@@ -42,13 +40,13 @@ export default class GridWrapper extends PureComponent<Props, State> {
   }
 
   render() {
-    console.log(this.props);
+    // console.log(this.props);
+    const columnCount = this.props.table.columns.length;
+    const rowCount = this.props.table.rows.length + 1; // + 1 for column labels
     const {
-      columnCount,
       overscanColumnCount,
       overscanRowCount,
       rowHeight,
-      rowCount,
       scrollToColumn,
       scrollToRow,
       useDynamicRowHeight,
@@ -77,6 +75,8 @@ export default class GridWrapper extends PureComponent<Props, State> {
   _cellRenderer({
     columnIndex, key, rowIndex, style
   }) {
+    console.log(this.state);
+
     return rowIndex === 0 ? this._renderHeaderCell({
       columnIndex, key, rowIndex, style
     }) : this._renderBodyCell({

diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
@@ -4,15 +4,15 @@ import TableType from '../types/TableType';
 
 type Props = {
   databaseName: string,
-  onSelectTable: (event) => void,
+  onSelectTable: (table: TableType) => void,
   tables: Array<TableType>
 };
 
 export default function Sidebar(props) {
   const tables = props.tables.map(table =>
-    (<li key={table.tableName}className="Sidebar--list-item">
+    (<li key={table.tableName} onClick={(e) => props.onSelectTable(table)} className="Sidebar--list-item">
       <ListSymbol type="table" /><a>{table.tableName}</a>
-    </li>));
+     </li>));
 
   return (
     <div className="Sidebar">

diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js
@@ -103,8 +103,13 @@ class HomePage extends Component<Props, State> {
     });
   };
 
+  onSelectTable = (selectedTable: TableType) => {
+    this.setState({ selectedTable });
+  };
+
   render() {
-    console.log(this.state);
+    console.log('HomePage selected table:');
+    console.log(this.state.selectedTable);
     if (!this.state.selectedTable) return <div />;
     return (
       <div className="HomePage container-fluid">
@@ -126,7 +131,7 @@ class HomePage extends Component<Props, State> {
                 axis="x"
               >
                 {/* Currently only supports one database file at a time (since using SQLite only) */}
-                <Sidebar tables={this.state.tables} databaseName={this.state.databaseName} />
+                <Sidebar databaseName={this.state.databaseName} tables={this.state.tables} onSelectTable={this.onSelectTable} />
               </ResizableBox>
               <div className="Grid" style={{ position: 'relative', width: this.state.widthGrid }}>
                 <Switch>