Disconnect front end update state from ipc actions and create a new sequelizeManager class

app/actions/ipc.js

@@ -11,3 +11,10 @@ export function query (statement) {
         ipcRenderer.send('receive', {statement});
     }
 }
+
+export function connect (statement) {
+    return dispatch => {
+        console.warn('proceeding to connect to database');
+        ipcRenderer.send('connect', {statement});
+    }
+}

app/components/Configuration.css

@@ -0,0 +1,24 @@
+.btnGroup {
+  position: relative;
+  top: 0px;
+  width: 420px;
+  margin: 0 auto;
+}
+
+.btn {
+  font-size: 0.75rem;
+  font-weight: bold;
+  background-color: #fff;
+  border-radius: 50%;
+  margin: 10px;
+  width: 75px;
+  height: 75px;
+  opacity: .7;
+  cursor: pointer;
+  font-family: Arial, Helvetica, Helvetica Neue;
+}
+
+.btn:hover {
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5);
+}

app/components/Configuration.react.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Immutable from 'immutable';
 import AceEditor from 'react-ace';
 import brace from 'brace';
+import styles from './Configuration.css';
 
 
 require('brace/mode/sql');
@@ -13,21 +14,23 @@ require('brace/theme/tomorrow');
 export default class Configuration extends Component {
     constructor(props) {
         super(props);
-        this.state = {query: ''}
+        this.state = {query: ''};
     }
 
   render() {
     console.warn('this.props: ', this.props);
     const configuration = this.props.configuration.toJS();
 
-    const onChange = query => {
-        this.setState({query})
-        this.props.ipcActions.query(query);
-        /*
-        this.props.configActions.setValue({
-            key: e.target.value, value: e.target.value
-        });
-        */
+    const onChangeQuery = query => {
+        this.setState({query});
+    }
+
+    const onPressConnect = (event) => {
+      this.props.ipcActions.connect(this.state.connect);
+    }
+
+    const onSendQuery = (event) => {
+        this.props.ipcActions.query(this.state.query);
     }
 
     return (
@@ -37,30 +40,36 @@ export default class Configuration extends Component {
 
           <AceEditor
                     value={this.state.query}
-                    onChange={onChange}
+                    onChange={onChangeQuery}
           			mode="sql"
           			theme="tomorrow"
+                height='100'
           />
 
-          <input onChange={onChange}/>
+          <div className={styles.btnGroup}>
+            <button  className={styles.btn} onClick={onPressConnect}>
+              connect
+            </button>
+            <button  className={styles.btn} onClick={onSendQuery}>
+              query
+            </button>
+          </div>
 
           <pre>
-            {JSON.stringify(this.props.ipc.toJS().log, null, 2)}
+            {JSON.stringify(this.props.ipc.toJS().rows, null, 2)}
           </pre>
 
           <pre>
-            {JSON.stringify(this.props.ipc.toJS().rows, null, 2)}
+            {JSON.stringify(this.props.ipc.toJS().log, null, 2)}
           </pre>
 
           <pre>
             {JSON.stringify(this.props.ipc.toJS().metadata, null, 2)}
           </pre>
 
-
-            <pre>
-              {JSON.stringify(this.props.ipc.toJS().error, null, 2)}
-            </pre>
-
+          <pre>
+            {JSON.stringify(this.props.ipc.toJS().error, null, 2)}
+          </pre>
 
         </div>
       </div>

app/containers/ConfigurationPage.js

@@ -2,7 +2,6 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Configuration from '../components/Configuration.react';
 import * as ConfigurationActions from '../actions/configuration';
-import * as QueryActions from '../actions/query';
 import * as IpcActions from '../actions/ipc';
 
 function mapStateToProps(state) {
@@ -16,7 +15,6 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   const configActions = bindActionCreators(ConfigurationActions, dispatch);
   const ipcActions = bindActionCreators(IpcActions, dispatch);
-  // const queryActions =  bindActionCreators(QueryActions, dispatch);
 
   return {configActions, ipcActions};
 }

main.development.js

@@ -2,8 +2,12 @@ import { app, BrowserWindow, Menu, crashReporter, shell } from 'electron';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { electronEnhancer } from 'redux-electron-store';
 import Immutable from 'immutable';
-import Sequelize from 'sequelize';
 import restify from 'restify';
+import parse from './parse';
+
+
+var sequelizeActions = require('./sequelizeManager');
+let sequelizeManager = new  sequelizeActions();
 
 const ipcMain = require('electron').ipcMain;
 
@@ -13,58 +17,14 @@ let mainWindow = null;
 
 crashReporter.start();
 
-
 if (process.env.NODE_ENV === 'development') {
   require('electron-debug')();
 }
 
-/*
-// REDUX STORE
-let enhancer = compose(
-  // applyMiddleware(...middleware),
-  electronEnhancer()
-);
-
-const initialState = Immutable.Map({
-    query: 'asdfasdfasdf',
-    status: true,
-    config: {
-        username: 'chris',
-        pw: 'test'
-    }
-});
-
-function reducer(state = initialState, action) {
-    switch (action.type) {
-        case 'update':
-            state = state.set(action.key, action.value);
-            console.warn('updating store: ', state.toJS());
-            return state;
-        default:
-            return state;
-    }
-}
-
-// Note: passing enhancer as the last argument to createStore requires redux@>=3.1.0
-let i = 99;
-// const initialState = Immutable.Map({test: i});
-const store = createStore(reducer, initialState, electronEnhancer());
-
-setInterval(() => {
-    console.warn(`dispatching ${i}`);
-    i += 1;
-    store.dispatch({type: 'update', key: 'test', value: i});
-}, 10000);
-*/
-
-
-//////////
-
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit();
 });
 
-
 app.on('ready', () => {
   mainWindow = new BrowserWindow({
     show: false,
@@ -83,49 +43,6 @@ app.on('ready', () => {
     mainWindow = null;
   });
 
-
-
-
-  function parse(data) {
-
-      var nrows = data.length;
-
-      if (nrows === undefined || nrows === null){
-          keys = ['message'];
-          nrows = 1;
-          ncols = 1;
-          rows = [['command executed']];
-      }else{
-          var rows = [];
-          var ncols = Object.keys(data[0]).length;
-          var keys = Object.keys(data[0]);
-
-          for (var i = 0; i < nrows; i++) {
-              var row = [];
-              for (var j = 0; j < ncols; j++) {
-                  row.push(data[i][keys[j]]);
-              };
-              rows.push(row);
-          };
-      };
-      const data_formatted = { 'columnnames': keys, 'ncols': ncols, 'nrows': nrows, 'rows': rows };
-
-      return data_formatted;
-
-  };
-
-
-
-
-
-
-
-
-
-
-
-
-
 const server = restify.createServer();
 server.use(restify.queryParser());
 server.use(restify.CORS({
@@ -136,59 +53,42 @@ server.use(restify.CORS({
 
 server.listen(5000, function(){
     console.log('%s listening at %s', server.name, server.url);
-})
-
-
-// extract variables from the sent url to localhost 5000
-var usr = 'readonly';
-var psw = 'password';
-var db = 'world';
-var prt = 3308;
-var engine = 'mysql';
-
-console.log('Trying to connect to database ' + db + ' as ' + usr);
-
-const sequelize = new Sequelize(db, usr, psw, {
-    dialect: engine, // 'mysql'|'mariadb'|'sqlite'|'postgres'|'mssql'
-    port:    prt, // or 5432 (for postgres)
 });
 
 mainWindow.webContents.on('did-finish-load', function() {
 
-    console.warn('making request');
-    sequelize.authenticate().then(msg => {
-        console.warn('succcess: ', msg);
-        mainWindow.webContents.send('channel', {success: msg});
-
-    }).catch(err => {
-        console.warn('failed: ', err);
-        mainWindow.webContents.send('channel', {error: err});
+    ipcMain.on('connect', function(event, payload) {
+        var usr = 'root';
+        var psw = 'MyPassword1';
+        var db = 'fake_plotly';
+        var prt = 3306;
+        var engine = 'mysql';
+
+        console.warn('payload: ', payload);
+        sequelizeManager.initialize(usr, psw, db, prt, engine);
+        console.warn('connection state is ', sequelizeManager.connectionState);
+        event.sender.send('channel', {error: sequelizeManager.connectionState});
     });
 
     ipcMain.on('receive', function(event, payload) {
-        console.log('payload: ', payload);
-
-        sequelize.query(payload.statement).spread((rows, metadata) => {
+        console.warn('payload: ', payload);
+        sequelizeManager.connection.query(payload.statement).spread((rows, metadata) => {
             const response = {rows, metadata, error: ''};
             event.sender.send('channel', response);
         }).catch(err => {
             console.warn('ERROR: ', err);
             event.sender.send('channel', {error: err});
         });
-
     });
 
-
     server.get('/query', function(req, res, next) {
         console.warn('query: ', req.query.statement);
         const statement = req.query.statement;
         mainWindow.webContents.send('channel', {log: statement});
-        sequelize.query(statement).spread((rows, metadata) => {
+        sequelizeManager.connection.query(statement).spread((rows, metadata) => {
             const response = {rows, metadata, error: ''};
-
             // Send back to app
             mainWindow.webContents.send('channel', response);
-
             // Send back to plotly 2.0
             const parsedResponse = parse(rows);
             console.warn('response: ', parsedResponse);
@@ -199,8 +99,6 @@ mainWindow.webContents.on('did-finish-load', function() {
             res.send({err});
         });
     });
-
-
 });
 
   if (process.env.NODE_ENV === 'development') {