Fix Treasury proposal countdown text and display Active timestamp (#383)

Author: moodlezoup

ts/pages/governance/countdown.tsx

@@ -5,7 +5,8 @@ import * as React from 'react';
 import { Paragraph } from 'ts/components/text';
 
 interface Props {
-    deadline: moment.Moment;
+    startDate: moment.Moment;
+    endDate: moment.Moment;
 }
 
 interface TimeStructure {
@@ -21,13 +22,23 @@ interface TimeStructure {
 
 const now = moment();
 
-export const Countdown: React.StatelessComponent<Props> = ({ deadline }) => {
+export const Countdown: React.StatelessComponent<Props> = ({ startDate, endDate }) => {
     const pstOffset = '-0800';
-    const time = deadline.utcOffset(pstOffset);
-    const isPassed = time.isBefore(now);
-    const voteTextPrefix = isPassed ? `Voting ended: ` : `Vote ends: `;
-    const timeText = !isPassed ? ` • ${getRelativeTime(time)}` : '';
-    const voteText = `${voteTextPrefix} ${time.format('L LT')} PST ${timeText}`;
+    const startTime = startDate.utcOffset(pstOffset);
+    const endTime = endDate.utcOffset(pstOffset);
+    const isUpcoming = now.isBefore(startTime);
+    const isOver = endTime.isBefore(now);
+    let voteTextPrefix;
+    if (isUpcoming) {
+        voteTextPrefix = 'Voting starts: ';
+    } else if (isOver) {
+        voteTextPrefix = 'Voting ended: ';
+    } else {
+        voteTextPrefix = 'Voting ends: ';
+    }
+    const timeToDisplay = isUpcoming ? startTime : endTime;
+    const timeText = ` • ${getRelativeTime(timeToDisplay)}`;
+    const voteText = `${voteTextPrefix} ${timeToDisplay.format('L LT')} PST ${timeText}`;
 
     // TODO convert to container component
     return (
@@ -39,8 +50,8 @@ export const Countdown: React.StatelessComponent<Props> = ({ deadline }) => {
     );
 };
 
-function getRelativeTime(deadline: moment.Moment): string {
-    const diff = moment().diff(deadline);
+function getRelativeTime(time: moment.Moment): string {
+    const diff = moment().diff(time);
     const duration = moment.duration(diff);
 
     return millisToDaysHoursMinutes(duration.asMilliseconds());

ts/pages/governance/governance.tsx

@@ -107,7 +107,10 @@ export class Governance extends React.Component<RouteComponentProps<any>> {
                 <DocumentTitle {...documentConstants.VOTE} />
                 <Section maxWidth="1170px" isFlex={true}>
                     <Column width="55%" maxWidth="560px">
-                        <Countdown deadline={this._proposalData.voteEndDate} />
+                        <Countdown
+                            startDate={this._proposalData.voteStartDate}
+                            endDate={this._proposalData.voteEndDate}
+                        />
                         <Heading size="medium">{this._proposalData.title}</Heading>
                         {_.map(this._proposalData.summary, (link, index) => (
                             <Paragraph key={`summarytext-${index}`}>{this._proposalData.summary[index]}</Paragraph>

ts/pages/governance/treasury.tsx

@@ -173,7 +173,6 @@ export const Treasury: React.FC<{}> = () => {
     }
 
     const {
-        timestamp,
         happening: isHappening,
         description,
         id,
@@ -184,8 +183,6 @@ export const Treasury: React.FC<{}> = () => {
         executionEpochEndDate,
     } = proposal;
 
-    const pstOffset = '-0800';
-    const deadlineToVote = moment(timestamp)?.utcOffset(pstOffset);
     const isVoteActive = isHappening;
 
     const tokens = marked.lexer(description);
@@ -238,7 +235,7 @@ export const Treasury: React.FC<{}> = () => {
             <DocumentTitle {...documentConstants.VOTE} />
             <Section maxWidth="1170px" isFlex={true}>
                 <Column width="55%" maxWidth="560px">
-                    <Countdown deadline={deadlineToVote} />
+                    <Countdown startDate={proposal.startDate} endDate={proposal.endDate} />
                     <Tag>Treasury</Tag>
                     <Heading size="medium" marginBottom="0px">
                         {(heading as Tokens.Heading).text}
@@ -314,7 +311,7 @@ export const Treasury: React.FC<{}> = () => {
                                             fontSize="17px"
                                             fontWeight={300}
                                         >
-                                            {historyState.done
+                                            {historyState.done || state === 'active'
                                                 ? historyState.timestamp.format('MMMM Do, YYYY - hh:mm a')
                                                 : 'TBD'}
                                         </Text>