Merge pull request #39 from quagliero/bug-trade-listener

Fixes #38 - much better handling of firebase listeners for trades

Author: quagliero

src/api/index.js

@@ -20,10 +20,21 @@ export default {
   once(url) {
     return db.ref(url).once('value');
   },
+  // the firebase 'listen' events aren't promises, so pass in the raw response
+  // to be used with an inline callback
   listenForValueEvents(url, cb) {
-    // only method that isn't `thenable` and requires inline callback
     db.ref(url).on('value', (snapshot) => {
-      cb(snapshot.val());
+      cb(snapshot);
+    });
+  },
+  listenForAddedEvents(url, cb) {
+    db.ref(url).on('child_added', (snapshot) => {
+      cb(snapshot);
+    });
+  },
+  listenForChangeEvents(url, cb) {
+    db.ref(url).on('child_changed', (snapshot) => {
+      cb(snapshot);
     });
   },
   set(url, payload) {

src/components/User/MyTrades.vue

@@ -25,7 +25,7 @@
         {{ filter }}
       </a>
     </p>
-    <template v-if="userTradesReceived">
+    <template v-if="userTrades">
       <trade-panel
         v-if="expanded"
         v-for="trade in filteredTrades"
@@ -68,7 +68,6 @@
         'currentDraft',
         'currentUser',
         'userTrades',
-        'userTradesReceived',
       ]),
       filteredTrades() {
         return this.filterTradesBy(this.selectedTradeFilter);

src/store/modules/trade.js

@@ -1,8 +1,8 @@
+import { set } from 'vue';
 import { database as fireDb } from 'firebase';
 import keys from 'lodash/keys';
 import map from 'lodash/map';
 import filter from 'lodash/filter';
-import reduce from 'lodash/reduce';
 import some from 'lodash/some';
 import * as types from '../mutations';
 import api from '../../api';
@@ -25,15 +25,13 @@ const Trade = (tradeProps) => {
 const state = {
   current: {},
   userTrades: {},
-  userTradesReceived: false,
   acceptedTrades: {},
 };
 
 // getters
 const getters = {
   currentTrade: stateObj => stateObj.current,
   userTrades: stateObj => stateObj.userTrades,
-  userTradesReceived: stateObj => stateObj.userTradesReceived,
   acceptedTrades: stateObj => stateObj.acceptedTrades,
   getTradeById: stateObj => tradeId => stateObj.userTrades[tradeId],
 };
@@ -102,27 +100,17 @@ const actions = {
     });
   },
   getUserTrades({ commit }, { draft, user }) {
-    // @TODO figure out why every trade gets looped after proposing
-    // guess maybe something to do with snapshotting inside the map
-    api.listenForValueEvents(`tradesUsersPivot/${draft}/${user}`, (userTrades) => {
-      const tradeIds = keys(userTrades);
-      const ref = db.ref(`trades/${draft}`);
-
-      Promise.all(
-        tradeIds.map((id) => new Promise((resolve) => {
-          ref.child(id).on('value', (trade) => {
-            const snapshot = trade.val();
-            commit(types.RECEIVE_USER_TRADE, snapshot);
-            resolve(snapshot);
-          });
-        })),
-      ).then((trades) => {
-        commit(types.RECEIVE_USER_TRADES, reduce(trades, (all, t) => {
-          all[t.id] = t;
-          return all;
-        }, {}));
+    const url = `tradesUsersPivot/${draft}/${user}`;
+    const ref = db.ref(`trades/${draft}`);
+    const getUserTrade = (key) => {
+      ref.child(key).on('value', (childSnapshot) => {
+        const trade = childSnapshot.val();
+        commit(types.RECEIVE_USER_TRADE, trade);
       });
-    });
+    };
+
+    api.listenForAddedEvents(url, (snapshot) => getUserTrade(snapshot.key));
+    api.listenForChangeEvents(url, (snapshot) => getUserTrade(snapshot.key));
   },
   proposeTrade({ commit }, { trade, draft }) {
     const tradeKey = db.ref('trades').push().key;
@@ -269,13 +257,8 @@ const mutations = {
   [types.RECEIVE_ACCEPTED_TRADES](stateObj, acceptedTrades) {
     stateObj.acceptedTrades = acceptedTrades;
   },
-  [types.RECEIVE_USER_TRADES](stateObj, trades) {
-    stateObj.userTrades = trades;
-    stateObj.userTradesReceived = true;
-  },
   [types.RECEIVE_USER_TRADE](stateObj, trade) {
-    console.log(trade.id);
-    stateObj.userTrades[trade.id] = trade;
+    set(stateObj.userTrades, trade.id, trade);
   },
   [types.SAVE_TRADE](stateObj, { trade }) {
     stateObj.savedTrades.push(trade);
@@ -294,7 +277,6 @@ const mutations = {
   },
   [types.DESTROY_SESSION](stateObj) {
     stateObj.userTrades = {};
-    stateObj.userTradesReceived = false;
     stateObj.current = {};
   },
 };

src/store/modules/watchlist.js

@@ -18,8 +18,8 @@ const actions = {
   getWatchlist({ commit }, { draft, user }) {
     if (state.watchlistReceived === false) {
       if (draft && user) {
-        api.listenForValueEvents(`watchlists/${draft}/${user}`, (watchlist) => {
-          commit(types.RECEIVE_WATCHLIST, watchlist);
+        api.listenForValueEvents(`watchlists/${draft}/${user}`, (snapshot) => {
+          commit(types.RECEIVE_WATCHLIST, snapshot.val());
         });
       }
     }

src/store/mutations.js

@@ -35,7 +35,6 @@ export const RECEIVE_PLAYERS = 'RECEIVE_PLAYERS';
 // Trades
 export const SELECT_GIVING_TEAM = 'SELECT_RECEIVING_TEAM';
 export const SELECT_RECEIVING_TEAM = 'SELECT_RECEIVING_TEAM';
-export const RECEIVE_USER_TRADES = 'RECEIVE_USER_TRADES';
 export const RECEIVE_USER_TRADE = 'RECEIVE_USER_TRADE';
 export const CREATE_TRADE = 'CREATE_TRADE';
 export const ADD_GIVING_TEAM_PICK = 'ADD_GIVING_TEAM_PICK';