Convert milestone dates to unix timestamps to be inline with the rest of our entities.

backend/grant/milestone/models.py

@@ -2,6 +2,7 @@ import datetime
 
 from grant.extensions import ma, db
 from grant.utils.exceptions import ValidationException
+from grant.utils.misc import dt_to_unix
 
 NOT_REQUESTED = 'NOT_REQUESTED'
 ONGOING_VOTE = 'ONGOING_VOTE'
@@ -64,6 +65,15 @@ class MilestoneSchema(ma.Schema):
             "date_created",
         )
 
+    date_created = ma.Method("get_date_created")
+    date_estimated = ma.Method("get_date_estimated")
+
+    def get_date_created(self, obj):
+        return dt_to_unix(obj.date_created)
+
+    def get_date_estimated(self, obj):
+        return dt_to_unix(obj.date_estimated) if obj.date_estimated else None
+
 
 milestone_schema = MilestoneSchema()
 milestones_schema = MilestoneSchema(many=True)

frontend/client/components/CreateFlow/Milestones.tsx

@@ -18,7 +18,7 @@ const DEFAULT_STATE: State = {
     {
       title: '',
       content: '',
-      dateEstimated: '',
+      dateEstimated: moment().unix(),
       payoutPercent: '100',
       immediatePayout: false,
     },
@@ -159,10 +159,12 @@ const MilestoneFields = ({
       <DatePicker.MonthPicker
         style={{ flex: 1, marginRight: '0.5rem' }}
         placeholder="Expected completion date"
-        value={milestone.dateEstimated ? moment(milestone.dateEstimated) : undefined}
+        value={
+          milestone.dateEstimated ? moment(milestone.dateEstimated * 1000) : undefined
+        }
         format="MMMM YYYY"
         allowClear={false}
-        onChange={(_, dateEstimated) => onChange(index, { ...milestone, dateEstimated })}
+        onChange={time => onChange(index, { ...milestone, dateEstimated: time.unix() })}
         disabled={milestone.immediatePayout}
         disabledDate={current =>
           current
@@ -196,7 +198,7 @@ const MilestoneFields = ({
                 ...milestone,
                 immediatePayout: ev.target.checked,
                 dateEstimated: ev.target.checked
-                  ? moment().format('MMMM YYYY')
+                  ? moment().unix()
                   : milestone.dateEstimated,
               })
             }

frontend/client/components/CreateFlow/Review.tsx

@@ -182,7 +182,7 @@ const ReviewMilestones = ({
         <div className="ReviewMilestone">
           <div className="ReviewMilestone-title">{m.title}</div>
           <div className="ReviewMilestone-info">
-            {moment(m.dateEstimated, 'MMMM YYYY').format('MMMM YYYY')}
+            {moment(m.dateEstimated * 1000).format('MMMM YYYY')}
             {' – '}
             {m.payoutPercent}% of funds
           </div>

frontend/client/components/CreateFlow/example.ts

@@ -22,7 +22,7 @@ const createExampleProposal = (): Partial<ProposalDraft> => {
           'This will be used to pay for a professional designer to hand-craft each letter on the shirt.',
         dateEstimated: moment()
           .add(1, 'month')
-          .format('MMMM YYYY'),
+          .unix(),
         payoutPercent: '30',
         immediatePayout: true,
       },
@@ -32,7 +32,7 @@ const createExampleProposal = (): Partial<ProposalDraft> => {
           "We'll get test prints from 5 different factories and choose the highest quality shirts. Once we've decided, we'll order a full batch of prints.",
         dateEstimated: moment()
           .add(2, 'month')
-          .format('MMMM YYYY'),
+          .unix(),
         payoutPercent: '20',
         immediatePayout: false,
       },
@@ -42,7 +42,7 @@ const createExampleProposal = (): Partial<ProposalDraft> => {
           "All of the shirts have been printed, hooray! They'll be given out at conferences and meetups.",
         dateEstimated: moment()
           .add(3, 'month')
-          .format('MMMM YYYY'),
+          .unix(),
         payoutPercent: '50',
         immediatePayout: false,
       },

frontend/client/components/Proposal/Milestones/index.tsx

@@ -98,7 +98,7 @@ class ProposalMilestones extends React.Component<Props, State> {
           : milestoneStateToStepState[milestone.state];
 
       const className = this.state.step === i ? 'is-active' : 'is-inactive';
-      const estimatedDate = moment(milestone.dateEstimated).format('MMMM YYYY');
+      const estimatedDate = moment(milestone.dateEstimated * 1000).format('MMMM YYYY');
       const reward = (
         <UnitDisplay value={milestone.amount} symbol="ZEC" displayShortBalance={4} />
       );

frontend/stories/props.tsx

@@ -8,6 +8,7 @@ import {
 } from 'types';
 import { PROPOSAL_CATEGORY } from 'api/constants';
 import BN from 'bn.js';
+import moment from 'moment';
 
 const oneZec = new BN('100000000');
 
@@ -101,17 +102,17 @@ export function generateProposal({
   const genMilestone = (
     overrides: Partial<ProposalMilestone> = {},
   ): ProposalMilestone => {
-    const now = new Date();
     if (overrides.index) {
-      const estimate = new Date(now.setMonth(now.getMonth() + overrides.index));
-      overrides.dateEstimated = estimate.toISOString();
+      overrides.dateEstimated = moment()
+        .add(overrides.index, 'month')
+        .unix();
     }
 
     const defaults: ProposalMilestone = {
       title: 'Milestone A',
       content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua.`,
-      dateEstimated: '2018-10-01T00:00:00+00:00',
+      dateEstimated: moment().unix(),
       immediatePayout: true,
       index: 0,
       state: MILESTONE_STATE.WAITING,

frontend/types/milestone.ts

@@ -13,11 +13,11 @@ export interface Milestone {
   amount: Zat;
   isPaid: boolean;
   immediatePayout: boolean;
+  dateEstimated: number;
 }
 
 export interface ProposalMilestone extends Milestone {
   content: string;
-  dateEstimated: string;
   payoutPercent: string;
   title: string;
 }
@@ -25,7 +25,7 @@ export interface ProposalMilestone extends Milestone {
 export interface CreateMilestone {
   title: string;
   content: string;
-  dateEstimated: string;
+  dateEstimated: number;
   payoutPercent: string;
   immediatePayout: boolean;
 }