Add selector component to ui mocker

2 files changed, 42 insertions, 20 deletions

diff --git a/development/mocker.js b/development/mocker.js
index 31b8c46a5..a21c13f4c 100644
--- a/development/mocker.js
+++ b/development/mocker.js
@@ -2,32 +2,32 @@ const render = require('react-dom').render
 const h = require('react-hyperscript')
 const Root = require('../ui/app/root')
 const configureStore = require('./mockStore')
+const states = require('./states')
+const Selector = require('./selector')
+
+// Query String
 const qs = require('qs')
-const queryString = qs.parse(window.location.href)
+let queryString = qs.parse(window.location.href.split('#')[1])
 let selectedView = queryString.view || 'account detail'
 
+// CSS
 const MetaMaskUiCss = require('../ui/css')
 const injectCss = require('inject-css')
 
-const states = require('./states')
-
 const firstState = states[selectedView]
 updateQueryParams()
 
-function updateQueryParams() {
-  const newParamsObj = {
-    view: selectedView,
-  }
-  const newQs = qs.stringify(newParamsObj)
-  //window.location.href = window.location.href.split('?')[0] + `?${newQs}`
-
+function updateQueryParams(newView) {
+  queryString.view = newView
+  const params = qs.stringify(queryString)
+  window.location.href = window.location.href.split('#')[0] + `#${params}`
 }
 
 const actions = {
   _setAccountManager(){},
   update: function(stateName) {
     selectedView = stateName
-    updateQueryParams()
+    updateQueryParams(stateName)
     const newState = states[selectedView]
     return {
       type: 'GLOBAL_FORCE_UPDATE',
@@ -48,15 +48,7 @@ var store = configureStore(states[selectedView])
 render(
   h('.super-dev-container', [
 
-    h('select', {
-      value: 'account-detail',
-      onChange:(event) => {
-        const selectedKey = event.target.value
-        store.dispatch(actions.update(selectedKey))
-      },
-    }, Object.keys(states).map((stateName) => {
-      return h('option', { value: stateName }, stateName)
-    })),
+    h(Selector, { actions, selectedKey: selectedView, states, store }),
 
     h(Root, {
       store: store,
diff --git a/development/selector.js b/development/selector.js
new file mode 100644
index 000000000..b58904cdf
--- /dev/null
+++ b/development/selector.js
@@ -0,0 +1,30 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = NewComponent
+
+inherits(NewComponent, Component)
+function NewComponent () {
+  Component.call(this)
+}
+
+NewComponent.prototype.render = function () {
+  const props = this.props
+  let { states, selectedKey, actions, store } = props
+
+  const state = this.state || {}
+  const selected = state.selected || selectedKey
+
+  return h('select', {
+    value: selected,
+    onChange:(event) => {
+      const selectedKey = event.target.value
+      store.dispatch(actions.update(selectedKey))
+      this.setState({ selected: selectedKey })
+    },
+  }, Object.keys(states).map((stateName) => {
+    return h('option', { value: stateName }, stateName)
+  }))
+
+}