Merge pull request #52 from AnthonyLaw/blocks-listing

Blocks listing and home page improvement

client/src/App.vue

@@ -22,11 +22,21 @@
   </div>
 </template>
 <script>
+import sdkListener from './infrastructure/getListener'
+import sdkBlock from './infrastructure/getBlock'
 export default {
   data: () => {
     return {
-      info: 1
+      info: 1,
     }
-  }
+  },
+  mounted() {
+    this.initApp()
+  },
+  methods: {
+    initApp() {
+      sdkListener.getNewBlock(), sdkBlock.getBlocksWithLimit(25)
+    },
+  },
 }
 </script>

client/src/components/Home_base_info.vue

@@ -20,54 +20,57 @@
   <div class="widget has-shadow bordr_rds_top0 network_info">
     <loader v-if="!marketinfo"></loader>
     <div class="box">
-        <div class="row">
-      <div class="col-md-3">
+      <div class="row">
+        <div class="col-md-3">
           <div class="hm_wdjt_itm_t1">
-              <span>Price</span>
-              <p  v-if="marketinfo">{{marketinfo.price}}</p>
+            <span>Price</span>
+            <p v-if="marketinfo">{{marketinfo.price}}</p>
           </div>
-      </div>
-      <div class="col-md-3">
+        </div>
+        <div class="col-md-3">
           <div class="hm_wdjt_itm_t1">
-               <span>Market Cap</span>
-              <p v-if="marketinfo">${{marketinfo.marketCap}}</p>
+            <span>Market Cap</span>
+            <p v-if="marketinfo">${{marketinfo.marketCap}}</p>
           </div>
-      </div>
-      <!-- <div class="col-md-2">
+        </div>
+        <!-- <div class="col-md-2">
           <div class="hm_wdjt_itm_t1">
                <span>Average block time</span>
               <p>0 seconds</p>
           </div>
-      </div> -->
-      <div class="col-md-3">
+        </div>-->
+        <div class="col-md-3">
           <div class="hm_wdjt_itm_t1">
-               <span>Total Transactions</span>
-              <p v-if="chaininfo" >{{chaininfo.totalTransactions}}</p>
+            <span>Total Transactions</span>
+            <p v-if="chaininfo">{{chaininfo.totalTransactions}}</p>
           </div>
-      </div>
-      <div class="col-md-3">
+        </div>
+        <div class="col-md-3">
           <div class="hm_wdjt_itm_t1">
-               <span>Block Height</span>
-              <p v-if="chaininfo" >{{chaininfo.totalBlocks}}</p>
+            <span>Block Height</span>
+            <p v-if="chaininfo">{{getCurrentBlockHeight}}</p>
           </div>
-      </div>
-      <!-- <div class="col-md-2">
+        </div>
+        <!-- <div class="col-md-2">
           <div class="hm_wdjt_itm_t1">
                <span>Nodes Online</span>
               <p>400</p>
           </div>
-      </div> -->
-    </div>
+        </div>-->
+      </div>
     </div>
   </div>
 </template>
 <script>
-
+import { mapGetters } from 'vuex'
 export default {
   props: {
     marketinfo: {},
-    chaininfo: {}
-  }
+    chaininfo: {},
+  },
+  computed: {
+    ...mapGetters(['getCurrentBlockHeight']),
+  },
   // ['ItemTitle','ItemData','itemThumb']
 }
 </script>

client/src/data-service.js

@@ -27,6 +27,7 @@ class DataService {
   static getHomeData() {
     return new Promise(async (resolve, reject) => {
       try {
+        sdkBlock.getBlocksWithLimit(25);
         const res = await axios.get(url + 'homeInfo')
         const data = res.data
         //  console.log(data);

client/src/format.js

@@ -55,7 +55,7 @@ const formatBlock = (block) => {
     ).format('YYYY-MM-DD HH:mm:ss'),
     totalFee: block.totalFee.compact(),
     difficulty: (block.difficulty.compact() / 1000000000000).toFixed(2),
-    numTransactions: block.numTransactions,
+    numTransactions: block.numTransactions ? block.numTransactions : 0,
     signature: block.signature,
     signer: block.signer,
     previousBlockHash: block.previousBlockHash,

client/src/infrastructure/getBlock.js

@@ -16,28 +16,25 @@
  *
  */
 
-// const blockInfo = await blocks.getBlockInfoByHeight(height);
-// const blockTransactionList = await blocks.getBlockFullTransactionsList(
-//     height
-
 import { BlockHttp, ChainHttp, QueryParams } from 'nem2-sdk'
 import format from '../format'
+import store from '../store'
 
 const chainHttp = new ChainHttp('http://52.194.207.217:3000')
 const blockHttp = new BlockHttp('http://52.194.207.217:3000')
 
 class sdkBlock {
-  static async getBlockHeight() {
+  static getBlockHeight = async () => {
     return (await chainHttp.getBlockchainHeight().toPromise()).compact()
   }
 
-  static async getBlockInfoByHeight(blockHeight) {
+  static getBlockInfoByHeight = async (blockHeight) => {
     const blockInfo = await blockHttp.getBlockByHeight(blockHeight).toPromise()
 
     return format.formatBlock(blockInfo)
   }
 
-  static async getBlockFullTransactionsList(blockHeight, id) {
+  static getBlockFullTransactionsList = async (blockHeight, id) => {
     let txList = await this.getTransactionsByBlockHeight(blockHeight, id)
     if (txList.length > 0) {
       id = txList[txList.length - 1].transactionId
@@ -46,7 +43,7 @@ class sdkBlock {
     return txList
   }
 
-  static async getTransactionsByBlockHeight(blockHeight, id) {
+  static getTransactionsByBlockHeight = async (blockHeight, id) => {
     let txId = id || ''
     const pageSize = 100
 
@@ -61,7 +58,7 @@ class sdkBlock {
     return transactionlist
   }
 
-  static async getBlocksWithLimit(numberOfBlock, fromBlockHeight) {
+  static getBlocksWithLimit = async (numberOfBlock, fromBlockHeight) => {
     const currentBlockHeight = await this.getBlockHeight()
 
     let blockHeight = fromBlockHeight || currentBlockHeight
@@ -70,6 +67,20 @@ class sdkBlock {
       .getBlocksByHeightWithLimit(blockHeight, numberOfBlock)
       .toPromise()
 
+    store.dispatch(
+      'SET_BLOCKS_LIST',
+      format.formatBlocks(blocks),
+      { root: true },
+    );
+
+    if (store.getters.getCurrentBlockHeight == 0 && store.getters.getCurrentBlockHeight < blocks[0].height.compact()) {
+      store.dispatch(
+        'SET_LATEST_CHAIN_STATUS',
+        format.formatBlock(blocks[0]),
+        { root: true },
+      );
+    }
+
     return await format.formatBlocks(blocks)
   }
 }

client/src/infrastructure/getListener.js

@@ -0,0 +1,51 @@
+/*
+ *
+ * Copyright (c) 2019-present for NEM
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License ");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Listener } from 'nem2-sdk';
+import store from "../store"
+import format from "../format"
+
+const nodeEndPoint = '52.194.207.217:3000';
+const wsEndpoint = 'ws://' + nodeEndPoint;
+
+class sdkListener {
+    static getNewBlock = () => {
+        const listener = new Listener(wsEndpoint, WebSocket)
+        listener.open().then(() => {
+            listener
+                .newBlock()
+                .subscribe(
+                    (block) => {
+                        store.dispatch(
+                            'ADD_BLOCK',
+                            format.formatBlock(block),
+                            { root: true },
+                        );
+                        store.dispatch(
+                            'SET_LATEST_CHAIN_STATUS',
+                            format.formatBlock(block),
+                            { root: true },
+                        );
+                    },
+                    err => console.log(err),
+                );
+        });
+    }
+}
+
+export default sdkListener;

client/src/store.js

@@ -22,7 +22,68 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  state: {
+    blockList: Array,
+    currentPage: 1,
+    chainStatus: {
+      currentBlockHeight: 0,
+    }
+  },
+  getters: {
+    getCurrentBlockHeight(state) {
+      return state.chainStatus.currentBlockHeight;
+    },
+    getLatestBlockList(state) {
+      return state.blockList;
+    },
+    getCurrentPage(state){
+      return state.currentPage;
+    }
+  },
+  mutations: {
+    setLatestChainStatus(state, block) {
+      state.chainStatus.currentBlockHeight = block.height;
+    },
+    addBlock(state, formattedBlock) {
+      if (state.blockList.length >= 25) state.blockList.pop();
+      state.blockList.unshift(formattedBlock);
+    },
+    setBlockList(state, blocklist) {
+      state.blockList = blocklist;
+    },
+    resetCurrentPage(state){
+      state.currentPage = 1;
+    },
+    increaseCurrentPage(state){
+      state.currentPage++;
+    },
+    decreaseCurrentPage(state){
+      state.currentPage--
+    }
+  },
+  actions: {
+    ADD_BLOCK({ commit, dispatch, state }, block) {
+      dispatch('SET_LATEST_CHAIN_STATUS', block);
+      if(state.currentPage === 1){
+        if(state.blockList.map(function (e) { return e.height; }).indexOf(block.height) === -1){
+          commit('addBlock', block)
+        }
+      }
+    },
+    SET_LATEST_CHAIN_STATUS({ commit }, block) {
+      commit('setLatestChainStatus', block);
+    },
+    SET_BLOCKS_LIST({ commit }, blocklist) {
+      commit('setBlockList', blocklist);
+    },
+    RESET_CURRENT_PAGE({ commit }){
+      commit('resetCurrentPage');
+    },
+    INCREASE_CURRENT_PAGE({ commit }){
+      commit('increaseCurrentPage');
+    },
+    DECREASE_CURRENT_PAGE({ commit }){
+      commit('decreaseCurrentPage');
+    }
+  }
 })