From 214f3f4ae66e174ac8a2fe0746d35a6ab096feb2 Mon Sep 17 00:00:00 2001
From: Doug Kent <github@douglaskent.com>
Date: Thu, 13 Aug 2020 14:59:58 -0400
Subject: [PATCH] first draft

---
 src/components/Proposal/ProposalDetails.scss  | 26 +++++++++++++++++++
 .../Proposal/ProposalDetailsPage.tsx          | 15 ++++++++++-
 src/lib/util.ts                               | 24 +++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/components/Proposal/ProposalDetails.scss b/src/components/Proposal/ProposalDetails.scss
index f3463876c..cf97aa135 100644
--- a/src/components/Proposal/ProposalDetails.scss
+++ b/src/components/Proposal/ProposalDetails.scss
@@ -230,6 +230,32 @@ button.disabled {
   flex-grow: 1;
   min-width: 320px;
   max-width: 40%;
+
+  .eventHistory {
+    display: table;
+    width: 100%;
+    margin-left: 20px;
+
+    .event {
+      font-size: 16px;
+      display: table-row;
+      white-space: nowrap;
+
+      .label,
+      .datetime {
+        display: table-cell;
+        padding-bottom: 6px;
+      }
+
+      .label {
+        color: #4f6176;
+      }
+
+      .datetime {
+        color: #9aa9b5;
+      }
+    }
+  }
 }
 
 .createdBy {
diff --git a/src/components/Proposal/ProposalDetailsPage.tsx b/src/components/Proposal/ProposalDetailsPage.tsx
index d40b5ebbf..3ebd37086 100644
--- a/src/components/Proposal/ProposalDetailsPage.tsx
+++ b/src/components/Proposal/ProposalDetailsPage.tsx
@@ -5,7 +5,7 @@ import AccountProfileName from "components/Account/AccountProfileName";
 import ProposalCountdown from "components/Shared/ProposalCountdown";
 import FollowButton from "components/Shared/FollowButton";
 import { DiscussionEmbed } from "disqus-react";
-import { humanProposalTitle, ensureHttps } from "lib/util";
+import { humanProposalTitle, ensureHttps, formatFriendlyDateForLocalTimezone, safeMoment } from "lib/util";
 import { schemeName } from "lib/schemeUtils";
 import Analytics from "lib/analytics";
 import { Page } from "pages";
@@ -305,6 +305,19 @@ class ProposalDetailsPage extends React.Component<IProps, IState> {
               </div>
             </div>
 
+            <div className={css.eventHistory}>
+              <div className={css.event}>
+                <div className={css.label}>Created:</div>
+                <div className={css.datetime}>{formatFriendlyDateForLocalTimezone(safeMoment(proposal.createdAt))}</div>
+              </div>
+              {proposal.executedAt ?
+                <div className={css.event}>
+                  <div className={css.label}>Executed:</div>
+                  <div className={css.datetime}>{formatFriendlyDateForLocalTimezone(safeMoment(proposal.executedAt))}</div>
+                </div>
+                : ""}
+            </div>
+
           </div>
         </div>
 
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 7bbbdcfb8..fb1711a34 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -678,3 +678,27 @@ export function ethBalance(address: Address): Observable<BN> {
 
   return observable.pipe(map((item: any) => new BN(item)));
 }
+
+/**
+ * arc.js is inconsistent in how it returns datetimes.
+ * Convert all possibilities safely to a `moment`.
+ * Is OK when the dateSpecifier is already a moment.
+ * If is a string, must be ISO-conformant.
+ * @param dateSpecifier
+ */
+export function safeMoment(dateSpecifier: moment.Moment | Date | number | string | undefined): moment.Moment {
+  switch (typeof dateSpecifier) {
+    case "object":
+      if (moment.isMoment(dateSpecifier)) {
+        return dateSpecifier;
+      }
+    // else assume is a Date, fallthrough
+    case "string":
+      return moment(dateSpecifier);
+    case "number":
+      // then should be a count of seconds in UNIX epoch
+      return moment.unix(dateSpecifier);
+    default:
+      throw new Error(`safeMoment: unknown type: ${typeof dateSpecifier}`);
+  }
+}