Merge pull request #23 from quagliero/add-timestamp-to-trades

Implements #16 - add timestamps on create/close trade

Author: quagliero

package.json

@@ -20,6 +20,7 @@
     "dotenv": "^4.0.0",
     "firebase": "^3.9.0",
     "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "url-loader": "^0.5.8",
     "vue": "^2.3.0",
     "vue-async-computed": "^3.0.1",

src/api/index.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { database as fireDb } from 'firebase';
 import { auth, db } from '../database';
 import { TradeStatus } from '../constants';
 
@@ -60,16 +61,19 @@ export default {
   rejectTrade({ draft, trade }) {
     return db.ref(`trades/${draft}/${trade}`).update({
       status: TradeStatus.REJECTED,
+      closedAt: fireDb.ServerValue.TIMESTAMP,
     });
   },
   withdrawTrade({ draft, trade }) {
     return db.ref(`trades/${draft}/${trade}`).update({
       status: TradeStatus.WITHDRAWN,
+      closedAt: fireDb.ServerValue.TIMESTAMP,
     });
   },
   acceptTrade({ draft, trade }) {
     return db.ref(`trades/${draft}/${trade}`).update({
       status: TradeStatus.ACCEPTED,
+      closedAt: fireDb.ServerValue.TIMESTAMP,
     });
   },
   addTradeToAccepted({ draft, trade }) {

src/components/Trade/Accepted.vue

@@ -9,7 +9,8 @@
     />
     <trade-outcome
       status="is-success"
-      notification="This trade was accepted"
+      notification="Trade accepted"
+      :date="trade.closedAt"
     />
     <hr/>
     <trade-calculators

src/components/Trade/Outcome.vue

@@ -3,17 +3,29 @@
     <div class="column has-text-centered">
       <div>
         <div :class="['notification', status]">
-          <span class="title is-5">{{ notification }}</span>
+          <span class="title is-5">{{ notification }} {{ prettyDate }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import moment from 'moment';
+
   export default {
     name: 'trade-outcome',
-    props: ['status', 'notification'],
+    props: ['status', 'notification', 'date'],
+    computed: {
+      prettyDate() {
+        if (this.date != null) {
+          const pretty = moment(this.date).format('MMMM Do YYYY @ h:mma');
+          return ` on ${pretty}`;
+        }
+
+        return '';
+      },
+    },
   };
 </script>
 

src/components/Trade/Rejected.vue

@@ -8,7 +8,8 @@
     />
     <trade-outcome
       status="is-danger"
-      notification="This offer was rejected"
+      notification="Trade rejected"
+      :date="trade.closedAt"
     />
     <hr/>
     <trade-calculators

src/components/Trade/Withdrawn.vue

@@ -8,7 +8,8 @@
     />
     <trade-outcome
       status="is-danger"
-      notification="This offer was withdrawn"
+      notification="Trade withdrawn"
+      :date="trade.closedAt"
     />
     <hr/>
     <trade-calculators

src/store/modules/trade.js

@@ -1,3 +1,4 @@
+import { database as fireDb } from 'firebase';
 import keys from 'lodash/keys';
 import map from 'lodash/map';
 import filter from 'lodash/filter';
@@ -133,7 +134,7 @@ const actions = {
       givingPicks: trade.givingPicks,
       receivingPicks: trade.receivingPicks,
       status: TradeStatus.OFFERED,
-      seen: false,
+      createdAt: fireDb.ServerValue.TIMESTAMP,
     };
 
     if (trade.message != null) {

src/views/TradesView.vue

@@ -3,7 +3,7 @@
     <section class="container">
       <h1 class="title">Accepted Trades</h1>
       <ul class="panel has-text-centered">
-        <li v-for="trade in acceptedTrades" style="margin-bottom: 1rem;">
+        <li v-for="trade in sortedTrades" style="margin-bottom: 1rem;">
           <div class="panel-heading">
             <div class="columns is-mobile">
               <div class="column is-5">
@@ -37,6 +37,12 @@
               </div>
             </div>
           </div>
+          <div
+            v-if="trade.closedAt != null"
+            class="panel-block has-text-centered"
+          >
+            <small style="width: 100%;">Trade accepted on {{ prettyDate(trade.closedAt) }}</small>
+          </div>
         </li>
       </ul>
     </section>
@@ -45,6 +51,8 @@
 
 <script>
   import { mapGetters } from 'vuex';
+  import sortBy from 'lodash/sortBy';
+  import moment from 'moment';
 
   export default {
     name: 'trades-view',
@@ -55,6 +63,19 @@
         'getUserById',
         'getPickById',
       ]),
+      sortedTrades() {
+        return sortBy(this.acceptedTrades, (a) => a.closedAt).reverse();
+      },
+    },
+    methods: {
+      prettyDate(date) {
+        if (date != null) {
+          const pretty = moment(date).format('MMMM Do YYYY @ h:mma');
+          return `${pretty}`;
+        }
+
+        return '';
+      },
     },
     created() {
       this.$store.dispatch('getDrafts').then(() => {