From 6c3b6093fa41fe3c4bc0db709feda1a666877dc1 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Wed, 11 Apr 2018 20:18:43 +0800
Subject: [PATCH] load the network Status when page load

---
 src/features/app/components/Sync/Sync.jsx          | 26 +++++++++-------------
 .../core/components/CoreIndex/CoreIndex.jsx        |  4 ++--
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/features/app/components/Sync/Sync.jsx b/src/features/app/components/Sync/Sync.jsx
index 1b40fb5..37be0f9 100644
--- a/src/features/app/components/Sync/Sync.jsx
+++ b/src/features/app/components/Sync/Sync.jsx
@@ -1,27 +1,17 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import navStyles from '../Navigation/Navigation.scss'
 import styles from './Sync.scss'
-import { chainClient } from 'utility/environment'
 
 class Sync extends React.Component {
-  constructor(props) {
-    super(props)
-
-    const fetchInfo = () => {
-      chainClient().config.info().then(resp => {
-        this.setState(resp.data)
-      })
-    }
-    setInterval(fetchInfo.bind(this), 2 * 1000)
-  }
-
   render() {
-    if (!this.state) {
+    const coreData = this.props.coreData
+    if (!coreData) {
       return <ul></ul>
     }
 
-    const arr = Object.keys(this.state).map(key => {
-      return <li key={key}>{key + ': ' + String(this.state[key])}</li>
+    const arr = Object.keys(coreData).map(key => {
+      return <li key={key}>{key + ': ' + String(coreData[key])}</li>
     })
     arr.unshift(<li key='sync-title' className={navStyles.navigationTitle}>Network status</li>)
 
@@ -29,4 +19,8 @@ class Sync extends React.Component {
   }
 }
 
-export default Sync
+export default connect(
+  (state) => ({
+    coreData: state.core.coreData,
+  })
+)(Sync)
diff --git a/src/features/core/components/CoreIndex/CoreIndex.jsx b/src/features/core/components/CoreIndex/CoreIndex.jsx
index d985967..a0c48a2 100644
--- a/src/features/core/components/CoreIndex/CoreIndex.jsx
+++ b/src/features/core/components/CoreIndex/CoreIndex.jsx
@@ -123,8 +123,8 @@ class CoreIndex extends React.Component {
             <tbody>
             {Object.keys(coreData).map(key => (
               <tr key={key}>
-                <td className={styles.row_label}> {key}: </td>
-                <td className={styles.row_value}>{ String(coreData[key])}</td>
+                <td className={styles.row_label}> {key.replace(/([a-z])([A-Z])/g, '$1 $2')}: </td>
+                <td className={styles.row_value}><code>{ String(coreData[key])}</code></td>
               </tr>))}
             </tbody>
           </table>
-- 
2.11.0