Finishing overview cards style (#1186)

decred · Mar 1, 2018 · 7c484d7 · 7c484d7
1 parent 2268d6f
commit 7c484d7
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 74 deletions.
diff --git a/app/components/TxHistory/TxHistoryRow/Row.js b/app/components/TxHistory/TxHistoryRow/Row.js
@@ -1,15 +1,26 @@
 import Status from "./Status";
 import StatusSmall from "./StatusSmall";
+import { diffBetweenTwoTs } from "helpers/dateFormat";
 import "style/TxHistory.less";
 
-const Row = ({ txAccountName, pending, txTimestamp, onClick, className, children, overview }) => {
+const Row = ({
+  txAccountName, pending, txTimestamp, onClick, className, children, overview, leaveTimestamp, enterTimestamp
+}) => {
   const rowClsname = "tx-history-row";
   const StatusComponent = overview ? StatusSmall : Status;
+  const overviewTxIsPending = overview && pending;
+
+  // ticket can have leaveTimestamp equals null, which is not voted yet
+  const daysToVote = leaveTimestamp ? diffBetweenTwoTs(leaveTimestamp, enterTimestamp) : null;
 
   return (
-    <div className={[ rowClsname, className ].join(" ")} {...{ onClick }}>
-      {children}
-      <StatusComponent {...{ txAccountName, pending, txTimestamp, overview }} />
+    <div className={[ "tx-history-row-wrapper", overviewTxIsPending ? "is-overview-pending" : null ].join(" ")}>
+      <div className={[ rowClsname, className ].join(" ")} {...{ onClick }}>
+        {children}
+        {!overviewTxIsPending ?
+          <StatusComponent {...{ txAccountName, pending, txTimestamp, overview, daysToVote }} /> : null}
+      </div>
+      {overviewTxIsPending && <StatusComponent {...{ txAccountName, pending, txTimestamp, overview, daysToVote, onClick }} />}
     </div>
   );
 };

diff --git a/app/components/TxHistory/TxHistoryRow/StakeTxRow.js b/app/components/TxHistory/TxHistoryRow/StakeTxRow.js
@@ -1,21 +1,72 @@
 import Row from "./Row";
 import { createElement as h } from "react";
 import { FormattedMessage as T } from "react-intl";
+import { Balance, Tooltip } from "shared";
 
 const messageByType = { // TODO: use constants instead of string
   "Ticket": <T id="transaction.type.ticket" m="Ticket" />,
   "Revocation": <T id="transaction.type.revoke" m="Revoke" />,
   "Vote": <T id="transaction.type.vote" m="Vote" />,
+  "ticket": <T id="transaction.type.ticket" m="Ticket" />,
+  "revocation": <T id="transaction.type.revoke" m="Revoke" />,
+  "voted": <T id="transaction.type.voted" m="Voted" />,
+  "unmined": <T id="transaction.type.unmined" m="Unmined" />,
+  "immature": <T id="transaction.type.immature" m="Immature" />,
+  "missed": <T id="transaction.type.missed" m="Missed" />,
+  "expired": <T id="transaction.type.expired" m="Expired" />,
+  "revoked": <T id="transaction.type.revoked" m="Revoked" />,
+  "live": <T id="transaction.type.live" m="Live" />,
 };
 
-const StakeTxRow = ({ txType, ...props }) => (
-  <Row {...{ className: txType, ...props }}>
-    <div className="transaction-info">
-      <span className="icon" />
-      <span className="transaction-stake-type">{messageByType[txType] || "(unknown type)"}</span>
-    </div>
-  </Row>
-);
+// ToDo Add status to transactions selector, so we can use status instead of txType
+// to show on transactions history page
+const StakeTxRow = ({ status, txType, ...props }) => {
+  const { overview, ticketPrice, ticketReward } = props;
+
+  const rewardLabel = <T id="ticket.rewardLabel" m="Ticket Reward" />;
+  const ticketRewardMessage = <T id="ticket.rewardMesage"
+    m={"{rewardLabel}: {reward}"}
+    values={{
+      rewardLabel: rewardLabel,
+      reward: <Balance amount={ticketReward || 0} />,
+    }} />;
+
+  const ticketPriceLabel = <T id="ticket.priceLabel" m="Ticket Price" />;
+  const ticketPriceMessage = <T id="ticket.priceMessage"
+    m={"{ticketPriceLabel}: {ticketPrice}"}
+    values={{
+      ticketPriceLabel: ticketPriceLabel,
+      ticketPrice: <Balance amount={ticketPrice || 0} />,
+    }} />;
+
+  return overview ?
+    (
+      <Row {...{ className: status, ...props }}>
+        <div className="transaction-info transaction-stake-info-overview">
+          <div><span className="icon" /></div>
+          <div>
+            <span className="transaction-stake-type-overview">{messageByType[status] || "(unknown type)"}</span>
+            <div className="transaction-info-price-reward">
+              <Tooltip text={ticketPriceMessage}>
+                <Balance classNameWrapper="stake-transaction-ticket-price" amount={ticketPrice} />
+              </Tooltip>
+              <Tooltip text={ticketRewardMessage}>
+                <span className="transaction-info-overview-reward-icon"/>
+                <Balance classNameWrapper="stake-transaction-ticket-reward" amount={ticketReward} noSmallAmount />
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </Row>
+    ) : (
+      <Row {...{ className: txType, ...props }}>
+        <div className="transaction-info">
+          <span className="icon" />
+          <span className="transaction-stake-type">{messageByType[txType] || "(unknown type)"}</span>
+        </div>
+      </Row>
+    );
+};
 
 export const StakeTxRowOfType = (txType) => {
   const Comp = ({ ...p }) => h(StakeTxRow, { txType, ...p });

diff --git a/app/components/TxHistory/TxHistoryRow/StatusSmall.js b/app/components/TxHistory/TxHistoryRow/StatusSmall.js
@@ -3,29 +3,48 @@ import "style/TxHistory.less";
 import { tsToDate } from "helpers/dateFormat";
 import { Tooltip } from "shared";
 
-const StatusSmall = ({ pending, txTimestamp }) => (
-  <Aux>
-    {!pending ? (
-      <div className="transaction-time-date-spacer">
-        <T
-          id="myId"
-          defaultMessage="{day} {month} {year} {time}"
-          values={{
-            day: <FormattedDate value={tsToDate(txTimestamp)} day="2-digit"/>,
-            month: <FormattedDate value={tsToDate(txTimestamp)} month="short"/>,
-            year: <FormattedDate value={tsToDate(txTimestamp)} year="numeric"/>,
-            time: <FormattedTime value={tsToDate(txTimestamp)} hour12={false}/>,
-          }}
-        />
-      </div>) : (
-      <Tooltip text={<T id="txHistory.Pending" m="Pending"/>}>
-        <div className="pending-overview-details">
-          ...
-        </div>
-      </Tooltip>
+const StatusSmall = ({ pending, txTimestamp, daysToVote, onClick }) => {
 
-    )}
-  </Aux>
-);
+  const daysToVoteLabel = <T id="ticket.daysToVoteLabel" m="Ticket Days To Vote" />;
+  const daysToVoteMessage = <T id="ticket.daysToVoteMessage"
+    m={"{daysToVoteLabel}: {daysToVote}"}
+    values={{
+      daysToVoteLabel: daysToVoteLabel,
+      daysToVote: daysToVote || 0,
+    }} />;
+
+  return (
+    <Aux>
+      {!pending ? (
+        <div className="transaction-time-date-spacer">
+          <T
+            id="myId"
+            defaultMessage="{day} {month} {year} {time}"
+            values={{
+              day: <FormattedDate value={tsToDate(txTimestamp)} day="2-digit" />,
+              month: <FormattedDate value={tsToDate(txTimestamp)} month="short" />,
+              year: <FormattedDate value={tsToDate(txTimestamp)} year="numeric" />,
+              time: <FormattedTime value={tsToDate(txTimestamp)} hour12={false} />,
+            }}
+          />
+          {daysToVote !== null && !isNaN(daysToVote) && (
+            <div className="transaction-info-overview-days-to-vote">
+              <Tooltip text={daysToVoteMessage}>
+                <div className="transaction-info-overview-lock-icon"></div>
+                <span className="transaction-info-overview-days-to-vote-number">{daysToVote}</span>
+                <T id="statusSmall.daysToVote" m="days" />
+              </Tooltip>
+            </div>
+          )}
+        </div>) : (
+        <Tooltip text={<T id="txHistory.Pending" m="Pending" />}>
+          <div className="pending-overview-details" onClick={onClick}>
+            ...
+          </div>
+        </Tooltip>
+      )}
+    </Aux>
+  );
+};
 
 export default StatusSmall;
diff --git a/app/components/TxHistory/TxHistoryRow/index.js b/app/components/TxHistory/TxHistoryRow/index.js
@@ -6,13 +6,22 @@ const TxRowByType = { // TODO: use constants instead of string
   "Ticket": stake("Ticket"),
   "Vote": stake("Vote"),
   "Revocation": stake("Revocation"),
+  "unknown": stake("Ticket"),
+  "voted": stake("Voted"),
+  "unmined": stake("Unmined"),
+  "immature": stake("Immature"),
+  "missed": stake("Missed"),
+  "expired": stake("Expired"),
+  "revoked": stake("Revoked"),
+  "live": stake("Live"),
   "out": regular("Send", true),
   "in": regular("Receive", false),
   "transfer": regular("Transfer", true)
 };
 
 const TxRow = ({ tx, overview }, { router }) => {
-  const rowType = tx.txType || tx.txDirection;
+  const rowType = tx.status ? tx.status :
+    tx.txType ? tx.txType : tx.txDirection;
   const Component = TxRowByType[rowType];
 
   return Component ? (

diff --git a/app/components/views/HomePage/Page.js b/app/components/views/HomePage/Page.js
@@ -17,6 +17,7 @@ const HomePage = ({
   transactions,
   getTransactionsRequestAttempt,
   getAccountsResponse,
+  rowNumber
 }) => {
   return (
     <Aux>
@@ -47,11 +48,11 @@ const HomePage = ({
 
       <div className="overview-transactions-ticket-wrapper">
         <div className={tickets.length > 0 ? "recent-transactions" : "recent-transactions-full"}>
-          <RecentTransactions {...{ transactions, getTransactionsRequestAttempt, getAccountsResponse }} />
+          <RecentTransactions {...{ transactions, getTransactionsRequestAttempt, getAccountsResponse, rowNumber }} />
         </div>
         {tickets.length > 0 &&
           <div className="recent-transactions">
-            <TicketActivity {...{ tickets, getTransactionsRequestAttempt, getAccountsResponse }} />
+            <TicketActivity {...{ tickets, getTransactionsRequestAttempt, getAccountsResponse, rowNumber }} />
           </div>
         }
       </div>

diff --git a/app/components/views/HomePage/index.js b/app/components/views/HomePage/index.js
@@ -3,7 +3,7 @@ import HomePage from "./Page";
 import { service, home } from "connectors";
 import { substruct } from "fp";
 
-const TRANSACTIONS_LENGTH_AT_HOME = 5;
+const ROWS_NUMBER_ON_TABLE = 5;
 
 @autobind
 class Home extends React.Component{
@@ -12,24 +12,6 @@ class Home extends React.Component{
     this.state = this.getInitialState();
   }
 
-  componentDidMount() {
-    const { transactions, noMoreTransactions } = this.props;
-    if(noMoreTransactions)
-      return;
-    if(transactions.length < TRANSACTIONS_LENGTH_AT_HOME) {
-      this.props.getTransactions();
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { transactions, noMoreTransactions } = nextProps;
-    if(noMoreTransactions)
-      return;
-    if(transactions.length < TRANSACTIONS_LENGTH_AT_HOME) {
-      this.props.getTransactions();
-    }
-  }
-
   getInitialState() {
     return {
       onCancelPassphraseRequest: null,
@@ -45,6 +27,7 @@ class Home extends React.Component{
       {...{
         ...this.props,
         ...this.state,
+        rowNumber: ROWS_NUMBER_ON_TABLE,
         ...substruct({
           onShowRevokeTicket: null,
           onRequestPassphrase: null,

diff --git a/app/components/views/HomePage/tables/RecentTransactions.js b/app/components/views/HomePage/tables/RecentTransactions.js
@@ -11,6 +11,7 @@ const RecentTransactions = ({
   transactions,
   getTransactionsRequestAttempt,
   getAccountsResponse,
+  rowNumber,
 }) => {
   return (
     getTransactionsRequestAttempt ? <DecredLoading /> :
@@ -20,7 +21,7 @@ const RecentTransactions = ({
         </div>
         <div className="home-content-nest">
           {transactions.length > 0 ? tickets.length > 0 ?
-            <TxHistory overview limit={6} {...{ getAccountsResponse, transactions }} /> :
+            <TxHistory overview limit={rowNumber} {...{ getAccountsResponse, transactions }} /> :
             <TxHistory limit={6} {...{ getAccountsResponse, transactions }} /> :
             <p><T id="home.noTransactions" m="No transactions" /></p>}
         </div>

diff --git a/app/components/views/HomePage/tables/TicketActivity.js b/app/components/views/HomePage/tables/TicketActivity.js
@@ -10,6 +10,7 @@ const RecentTickets = ({
   tickets,
   getTransactionsRequestAttempt,
   getAccountsResponse,
+  rowNumber,
 }) => {
   return (
     getTransactionsRequestAttempt ? <DecredLoading /> :
@@ -18,7 +19,7 @@ const RecentTickets = ({
           <T id="home.ticketActivityTitle" m="Recent Staking Activity" />
         </div>
         <div className="home-content-nest">
-          <TxHistory overview limit={6} {...{ getAccountsResponse, transactions: tickets }} />
+          <TxHistory overview limit={rowNumber} {...{ getAccountsResponse, transactions: tickets }} />
         </div>
       </Aux>
   );

diff --git a/app/connectors/home.js b/app/connectors/home.js
@@ -3,7 +3,6 @@ import { bindActionCreators } from "redux";
 import { selectorMap } from "fp";
 import * as sel from "selectors";
 import * as ca from "actions/ControlActions";
-import * as clientActions from "actions/ClientActions";
 
 const mapStateToProps = selectorMap({
   getTransactionsRequestAttempt: sel.getTransactionsRequestAttempt,
@@ -16,14 +15,12 @@ const mapStateToProps = selectorMap({
   revokeTicketsSuccess: sel.revokeTicketsSuccess,
   hasTicketsToRevoke: sel.hasTicketsToRevoke,
   totalBalance: sel.totalBalance,
-  noMoreTransactions: sel.noMoreTransactions,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   onRevokeTickets: ca.revokeTicketsAttempt,
   onClearRevokeTicketsError: ca.clearRevokeTicketsError,
   onClearRevokeTicketsSuccess: ca.clearRevokeTicketsSuccess,
-  getTransactions: clientActions.getTransactions,
 }, dispatch);
 
 export default connect(mapStateToProps,mapDispatchToProps);
diff --git a/app/helpers/dateFormat.js b/app/helpers/dateFormat.js
@@ -43,3 +43,12 @@ export function formatLocalISODate(d) {
     pad(d.getSeconds(), 2), pad(d.getMilliseconds(), 3),
     tzOffsetSign, pad(tzOffsetHours, 2), pad(tzOffsetMinutes, 2));
 }
+
+// calculate the difference between two timestamps and return an int
+// represent number of days
+export function diffBetweenTwoTs(date1, date2) {
+  const oneDay = 24*60*60*1000;
+  const firstDate = tsToDate(date1);
+  const secondDate = tsToDate(date2);
+  return Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
+}