Fix bitshares#670: Display dates instead of block numbers in market h…

…istory

app/assets/locales/locale-en.json

@@ -2,7 +2,8 @@
     "counterpart": {
         "formats": {
             "date": {
-                "short_custom": "%e %b '%y"
+                "short_custom": "%e %b '%y",
+                "market_history": "%m/%e %H:%M:%S"
             }
         }
     },

app/components/DepositWithdraw/blocktrades/WithdrawModalBlocktrades.jsx

@@ -10,7 +10,6 @@ import AmountSelector from "components/Utility/AmountSelector";
 import AccountActions from "actions/AccountActions";
 import ZfApi from "react-foundation-apps/src/utils/foundation-api";
 import { validateAddress, WithdrawAddresses } from "common/blockTradesMethods";
-import AccountStore from "stores/AccountStore";
 import {ChainStore} from "bitsharesjs/es";
 import Modal from "react-foundation-apps/src/modal";
 import { checkFeeStatusAsync, checkBalance } from "common/trxHelper";

app/components/Exchange/MarketHistory.jsx

@@ -1,9 +1,7 @@
 import React from "react";
 import {PropTypes} from "react";
-import {Link} from "react-router/es";
 import Immutable from "immutable";
 import Ps from "perfect-scrollbar";
-import utils from "common/utils";
 import Translate from "react-translate-component";
 import market_utils from "common/market_utils";
 import PriceText from "../Utility/PriceText";
@@ -15,6 +13,9 @@ import TransitionWrapper from "../Utility/TransitionWrapper";
 import AssetName from "../Utility/AssetName";
 import { ChainTypes as grapheneChainTypes } from "bitsharesjs/es";
 const {operations} = grapheneChainTypes;
+import BlockDate from "../Utility/BlockDate";
+import counterpart from "counterpart";
+import ReactTooltip from "react-tooltip";
 
 class MarketHistory extends React.Component {
     constructor(props) {
@@ -57,10 +58,12 @@ class MarketHistory extends React.Component {
         let historyNode = this.refs.history;
         historyNode.scrollTop = 0;
         Ps.update(historyNode);
+
+        setTimeout(ReactTooltip.rebuild, 1000);
     }
 
     render() {
-        let {history, myHistory, base, quote, baseSymbol, quoteSymbol, flipped, isNullAccount} = this.props;
+        let {history, myHistory, base, quote, baseSymbol, quoteSymbol, isNullAccount} = this.props;
         let  {activeTab} = this.state;
         let historyRows = null;
 
@@ -69,7 +72,6 @@ class MarketHistory extends React.Component {
         }
 
         if (activeTab === "my_history" && (myHistory && myHistory.size)) {
-            let index = 0;
             let keyIndex = -1;
             let flipped = base.get("id").split(".")[2] > quote.get("id").split(".")[2];
             historyRows = myHistory.filter(a => {
@@ -110,7 +112,7 @@ class MarketHistory extends React.Component {
                         </td>
                         <td>{parsed_order.receives}</td>
                         <td>{parsed_order.pays}</td>
-                        <td><Link to={`/block/${block_num}`}>#{utils.format_number(block_num, 0)}</Link></td>
+                        <BlockDate component="td" block_number={block_num} tooltip />
                     </tr>
                 );
             }).toArray();
@@ -119,7 +121,7 @@ class MarketHistory extends React.Component {
             let keyIndex = -1;
             let flipped = base.get("id").split(".")[2] > quote.get("id").split(".")[2];
             historyRows = this.props.history
-            .filter(a => {
+            .filter(() => {
                 index++;
                 return index % 2 === 0;
             })
@@ -136,7 +138,6 @@ class MarketHistory extends React.Component {
                     paysAsset = quote;
                     receivesAsset = base;
                 }
-
                 let parsed_order = market_utils.parse_order_history(order, paysAsset, receivesAsset, isAsk, flipped);
                 return (
                     <tr key={"history_" + keyIndex}>
@@ -145,7 +146,9 @@ class MarketHistory extends React.Component {
                         </td>
                         <td>{parsed_order.receives}</td>
                         <td>{parsed_order.pays}</td>
-                        <td data-tip={new Date(order.time)}>{parsed_order.time}</td>
+                        <td className="tooltip" data-tip={new Date(order.time)}>
+                            {counterpart.localize(new Date(order.time), {type: "date", format: "market_history"})}
+                        </td>
                     </tr>
                 );
             }).toArray();
@@ -173,7 +176,7 @@ class MarketHistory extends React.Component {
                                     <th><Translate className="header-sub-title" content="exchange.price" /></th>
                                     <th><span className="header-sub-title"><AssetName dataPlace="top" name={quoteSymbol} /></span></th>
                                     <th><span className="header-sub-title"><AssetName dataPlace="top" name={baseSymbol} /></span></th>
-                                    <th><Translate className="header-sub-title" content={activeTab === "history" ? "explorer.block.date" : "explorer.block.title"} /></th>
+                                    <th><Translate className="header-sub-title" content="explorer.block.date" /></th>
                                 </tr>
                             </thead>
                         </table>

app/components/Utility/BlockDate.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import counterpart from "counterpart";
+import {connect} from "alt-react";
+import BlockchainStore from "stores/BlockchainStore";
+import BlockchainActions from "actions/BlockchainActions";
+import ReactTooltip from "react-tooltip";
+
+/**
+ * @brief displays block's date and time based on block number
+ *
+ * properties: block - number
+ * Note, it doesn't fetch block, just calculates time based on number alone.
+ **/
+
+class BlockDate extends React.Component {
+
+    static defaultProps = {
+        format: "market_history",
+        tooltip: false,
+        component: "span"
+    }
+
+    componentWillMount() {
+        BlockchainActions.getBlock.defer(this.props.block_number);
+    }
+
+    shouldComponentUpdate(np) {
+        if (np.block && !this.props.block) setTimeout(ReactTooltip.rebuild, 1000);
+        return np.block !== this.props.block;
+    }
+
+    render() {
+        const {block, tooltip, component, format} = this.props;
+
+        if (!block) return React.createElement(component);
+        return (
+            React.createElement(component, {className: tooltip ? "tooltip": "", "data-tip": tooltip ? block.timestamp : ""},
+            <span>
+                {counterpart.localize(block.timestamp, {type: "date", format})}
+            </span>
+        )
+        );
+    }
+}
+
+BlockDate = connect(BlockDate, {
+    listenTo() {
+        return [BlockchainStore];
+    },
+    getProps(props) {
+        return {
+            block: BlockchainStore.getState().blocks.get(props.block_number)
+        };
+    }
+});
+
+export default BlockDate;

app/stores/BlockchainStore.js

@@ -2,11 +2,7 @@ import Immutable from "immutable";
 import alt from "alt-instance";
 import BlockchainActions from "actions/BlockchainActions";
 import {ChainStore} from "bitsharesjs/es";
-
-import {
-    Block
-}
-    from "./tcomb_structs";
+import {Block} from "./tcomb_structs";
 
 class BlockchainStore {
     constructor() {
@@ -29,7 +25,7 @@ class BlockchainStore {
     onGetBlock(block) {
         if (!this.blocks.get(block.id)) {
             if (!/Z$/.test(block.timestamp)) {
-                block.timestamp += 'Z';
+                block.timestamp += "Z";
             }
             block.timestamp = new Date(block.timestamp);
             this.blocks = this.blocks.set(
@@ -43,6 +39,9 @@ class BlockchainStore {
         let {block, maxBlock} = payload;
         if (typeof block.timestamp === "string") {
             block.timestamp += "+00:00";
+            if (!/Z$/.test(block.timestamp)) {
+                block.timestamp += "Z";
+            }
         }
         block.timestamp = new Date(block.timestamp);
         if (block.id > maxBlock - this.maxBlocks) {

app/stores/MarketsStore.js

@@ -298,6 +298,9 @@ class MarketsStore {
         if (result.history) {
             this.activeMarketHistory = this.activeMarketHistory.clear();
             result.history.forEach(order => {
+                if (!/Z$/.test(order.time)) {
+                    order.time += "Z";
+                }
                 order.op.time = order.time;
                 /* Only include history objects that aren't 'something for nothing' to avoid confusion */
                 if (!(order.op.receives.amount == 0 || order.op.pays.amount == 0)) {
@@ -963,7 +966,7 @@ class MarketsStore {
                 first = history[0];
             }
             last = history[history.length -1];
-            /* Some market histories have 0 value for price values, set to 1 in that case */ 
+            /* Some market histories have 0 value for price values, set to 1 in that case */
             function removeZeros(entry) {
                 for (let key in entry) {
                     if (key.indexOf("volume") === -1 && entry[key] === 0) {