add the show detail page for the key

diff --git a/src/features/mockhsm/actions.js b/src/features/mockhsm/actions.js
index cc0087a..b4a2fe7 100644 (file)
--- a/src/features/mockhsm/actions.js
+++ b/src/features/mockhsm/actions.js
@@ -4,13 +4,30 @@ import { chainClient } from 'utility/environment'
 const type = 'key'
 const clientApi = () => chainClient().mockHsm.keys
 
+const list = baseListActions(type, {
+  className: 'Key',
+  clientApi,
+})
+const create = baseCreateActions(type, {
+  className: 'Key',
+  clientApi,
+})
+
 export default {
-  ...baseCreateActions(type, {
-    className: 'Key',
-    clientApi,
-  }),
-  ...baseListActions(type, {
-    className: 'Key',
-    clientApi,
-  }),
+  ...create,
+  ...list,
+  createExport: (item) => () => {
+    clientApi().export(item.xpub).then(resp => {
+      const privateKey = resp.data.privateKey
+
+      var element = document.createElement('a')
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(privateKey))
+      element.setAttribute('download', item.alias)
+      element.style.display = 'none'
+      document.body.appendChild(element)
+      element.click()
+
+      document.body.removeChild(element)
+    })
+  }
 }

diff --git a/src/features/mockhsm/components/ListItem.jsx b/src/features/mockhsm/components/ListItem.jsx
index ff7908c..031fc77 100644 (file)
--- a/src/features/mockhsm/components/ListItem.jsx
+++ b/src/features/mockhsm/components/ListItem.jsx
@@ -1,42 +1,22 @@
 import React from 'react'
-import { chainClient } from 'utility/environment'
-
-const clientApi = () => chainClient().mockHsm.keys
+import { Link } from 'react-router'
 
 class ListItem extends React.Component {
   constructor(props) {
     super(props)
-
-    this.echo = (item) => clientApi().export(item.xpub).then(resp => {
-      const privateKey = resp.data.privateKey
-
-      var element = document.createElement('a')
-      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(privateKey))
-      element.setAttribute('download', item.alias)
-      element.style.display = 'none'
-      document.body.appendChild(element)
-      element.click()
-
-      document.body.removeChild(element)
-    })
   }
 
   render() {
     const item = this.props.item
     const lang = this.props.lang
-    const operation = (item.complete === undefined || item.complete === true || item.percent == 100) ? (
-      <button className='btn btn-link' onClick={this.echo.bind(this, item)}>
-        { lang === 'zh' ? '导出私钥' : 'Export private key' }
-      </button>
-    ) : (
-      <span>{`${item.percent}% imported...`}</span>
-    )
 
     return(
       <tr>
         <td>{item.alias}</td>
         <td><code>{item.xpub}</code></td>
-        <td>{operation}</td>
+        <td><Link to={`/keys/${item.id}`}>
+          {lang === 'zh' ? '更多' : 'More'}
+        </Link></td>
       </tr>
     )
   }

diff --git a/src/features/mockhsm/components/Show.jsx b/src/features/mockhsm/components/Show.jsx
new file mode 100644 (file)
index 0000000..15a3bd9
--- /dev/null
+++ b/src/features/mockhsm/components/Show.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import {
+  BaseShow,
+  KeyValueTable,
+  PageContent,
+  PageTitle,
+} from 'features/shared/components'
+import componentClassNames from 'utility/componentClassNames'
+
+class Show extends BaseShow {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const item = this.props.item
+    const lang = this.props.lang
+
+    let view
+    if (item) {
+      const title = <span>
+        {lang === 'zh' ? '密钥' : 'Keys '}
+        <code>{item.alias ? item.alias : item.id}</code>
+      </span>
+
+      view = <div className={componentClassNames(this)}>
+        <PageTitle
+          title={title}
+        />
+
+        <PageContent>
+          <KeyValueTable
+            id={item.id}
+            object='key'
+            title={lang === 'zh' ? '详情' : 'Details'}
+            actions={[
+              <button key='export-key' className='btn btn-link' onClick={this.props.exportKey.bind(this, item)}>
+                { lang === 'zh' ? '导出私钥' : 'Export private key' }</button>,
+            ]}
+            items={[
+              {label: 'Alias', value: item.alias},
+              {label: 'xpubs', value: item.xpub},
+            ]}
+            lang={lang}
+          />
+        </PageContent>
+      </div>
+    }
+    return this.renderIfFound(view)
+  }
+}
+
+// Container
+
+import {connect} from 'react-redux'
+import actions from 'actions'
+
+const mapStateToProps = (state, ownProps) => ({
+  item: state.key.items[ownProps.params.id],
+  lang: state.core.lang
+})
+
+const mapDispatchToProps = ( dispatch ) => ({
+  fetchItem: (id) => dispatch(actions.key.fetchItems({id: `${id}`})),
+  exportKey: (item) => dispatch(actions.key.createExport(item))
+})
+
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Show)

diff --git a/src/features/mockhsm/components/index.js b/src/features/mockhsm/components/index.js
index d57a1f8..bf6ca41 100644 (file)
--- a/src/features/mockhsm/components/index.js
+++ b/src/features/mockhsm/components/index.js
@@ -1,7 +1,9 @@
 import List from './List'
 import New from './New'
+import Show from './Show'
 
 export {
   List,
   New,
+  Show
 }

diff --git a/src/features/mockhsm/routes.js b/src/features/mockhsm/routes.js
index 3130373..5d9fbcf 100644 (file)
--- a/src/features/mockhsm/routes.js
+++ b/src/features/mockhsm/routes.js
@@ -1,4 +1,4 @@
-import { List, New } from './components'
+import { List, New, Show } from './components'
 import { makeRoutes } from 'features/shared'
 
-export default (store) => makeRoutes(store, 'key', List, New, null, null, { skipFilter: true, name: 'Keys', name_zh:'密钥' })
+export default (store) => makeRoutes(store, 'key', List, New, Show, null, { skipFilter: true, name: 'Keys', name_zh:'密钥' })