feat(configure): finalize configure ui

Author: edeustace

packages/calculator/configure/package.json

@@ -8,9 +8,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-framework/material-ui-calculator": "^1.1.1",
-    "@pie-framework/pie-configure-events": "^1.2.0",
+    "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/config-ui": "^2.2.1",
+    "@pie-ui/calculator": "^1.2.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
   },

packages/calculator/configure/src/index.js

@@ -4,10 +4,8 @@ import Main from './main';
 import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
 
 export default class extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this._render();
     this.onModelChanged = this.onModelChanged.bind(this);
   }
 
@@ -16,21 +14,22 @@ export default class extends HTMLElement {
     this._render();
   }
 
-  dispatchModelUpdated() {
+  onModelChanged(m) {
+    this._model = m;
     this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
   }
 
-  onModelChanged(m) {
-    this._model = m;
-    this.dispatchModelUpdated();
+  connectedCallback() {
+    this._render();
   }
 
   _render() {
-    let element = React.createElement(Main, {
-      model: this._model,
-      onModelChanged: this.onModelChanged
-    });
-    ReactDOM.render(element, this);
+    if (this._model) {
+      const element = React.createElement(Main, {
+        model: this._model,
+        onChange: this.onModelChanged
+      });
+      ReactDOM.render(element, this);
+    }
   }
-
-}
+}

packages/calculator/configure/src/main.jsx

@@ -1,45 +1,69 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { InputRadio, TwoChoice } from '@pie-lib/config-ui';
+import { TwoChoice } from '@pie-lib/config-ui';
+import PropTypes from 'prop-types';
+import Typography from 'material-ui/Typography';
+import { CalculatorLayout } from '@pie-ui/calculator';
 
-export default class Main extends React.Component {
+const MainTypes = {
+  model: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+export class Main extends React.Component {
+  static propTypes = MainTypes;
+
+  onModeChange = mode => {
+    const { model } = this.props;
+    const update = { ...model, mode };
+    this.props.onChange(update);
+  };
+
+  render() {
+    const { model } = this.props;
+    return (
+      <div>
+        <TwoChoice
+          header="Choose a Calculator"
+          value={model.mode}
+          onChange={this.onModeChange}
+          one={{ label: 'Basic', value: 'basic' }}
+          two={{ label: 'Scientific', value: 'scientific' }}
+        />
+        <br />
+        <CalculatorLayout mode={model.mode} onClose={() => ({})} />
+        <br />
+        <br />
+
+        <Typography>
+          Please note that the calculators are tools for students and do not
+          record answers.
+        </Typography>
+      </div>
+    );
+  }
+}
+
+export default class Stateful extends React.Component {
+  static propTypes = MainTypes;
 
   constructor(props) {
     super(props);
     this.state = {
-      twoChoice: '',
       model: props.model
     };
   }
 
-  handleModelChange(){
-    this.props.onModelChanged(this.state.model);
+  componentWillReceiveProps(props) {
+    this.setState({ model: props.model });
   }
 
-  update(model){
+  onChange = model => {
     this.setState({ model }, () => {
-      this.handleModelChange();
-    })
-  }
-
-  onChangeHandler = (twoChoice) => {
-    this.setState({ twoChoice, model: this.props.model});
-    let update = this.props.model;
-    update.mode = twoChoice;
-    this.update(update);
-  }
+      this.props.onChange(this.state.model);
+    });
+  };
 
   render() {
-    const { basic, scientific } = this.state;
-    return (
-      <div>
-        <TwoChoice
-          header="Choose Calculator Type"
-          value={this.state.twoChoice}
-          onChange={twoChoice => this.onChangeHandler(twoChoice)}
-          one={{ label: 'Basic', value: 'basic' }}
-          two={{ label: 'Scientific', value: 'scientific' }} />
-      </div>
-    );
+    return <Main model={this.state.model} onChange={this.onChange} />;
   }
-}
+}