Promise not working

[lgertel]

I'm doing something #wrong.
I have this code on my store, but when retrieving from my component the then in dispatch is called before the callback.

On my component:

methods: {
      fetchData() {
        this.loading = true
        this.$store.dispatch('setApplicationsRef').then(response => {
          console.log('data dne')
          this.loading = false
        })
      }
    }
And on my module:

const actions = {
  setApplicationsRef: firebaseAction(({commit, bindFirebaseRef, state}) => {
    return new Promise((resolve, reject) => {
      bindFirebaseRef('applications', applicationsRef, {
        readyCallback: () => {
          resolve()
        }
      })
    })
  })
}

The console.log('data dne') is getting called before the resolve on actions

[posva]

Can you provide a repro using this: https://jsfiddle.net/posva/6w3ks04x/ ?

[lgertel]

I have two components:

Applications.vue

<template>
  <div>
    <nav class="nav">
    </nav>

    <router-view></router-view>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'

  import Topbar from './Topbar.vue'

  export default {
    components: {
      appTopbar: Topbar
    },
    computed: {
      ...mapGetters([
        'applications'
      ])
    },
    data () {
      return {
        loading: true
      }
    },
    methods: {
      fetchData() {
        this.loading = true
        this.$store.dispatch('setApplicationsRef').then(response => {
          console.log(response)
          this.loading = false
        })
      }
    },
    watch: {
      '$route' (to, from) {
        this.fetchData()
      }
    },
    created() {
      this.fetchData()
    }
  }
</script>
<style scoped>
  .nav {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background-color: #f1f3f7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 3.25rem;
    position: relative;
    text-align: center;
    z-index: 10;

    border-top: 1px solid #dce1eb;
    border-bottom: 1px solid #dce1eb;
  }
</style>

and applications.js

import firebase from 'firebase'

import { firebaseMutations } from 'vuexfire'
import { firebaseAction } from 'vuexfire'

//removed the config

const firebaseApp = firebase.initializeApp(config)
const db = firebaseApp.database()
const applicationsRef = db.ref('applications')

const mutations = {
  ...firebaseMutations
}

const state = {
  applications: [],
  application: null
}

const getters = {
  applications: state => {
    return state.applications
  },
  countApplications: state => {
    return state.applications.length
  },
  application: state => {
    return state.application
  }
}

const actions = {
  setApplicationsRef: firebaseAction(({commit, bindFirebaseRef, state}) => {
    return new Promise((resolve, reject) => {
      bindFirebaseRef('applications', applicationsRef, {
        readyCallback: (val) => {
          console.log('callback')
          resolve(val)
        }
      })
    })
  }),
  setApplicationRef: firebaseAction(({bindFirebaseRef}, payload) => {
    bindFirebaseRef('application', db.ref('/applications/' + payload.key))
  })
}
  // createApplication: ({commit}, payload) => {
  //   return new Promise((resolve, reject) => {
  //     applicationsRef.push(payload).then(snap => {
  //       resolve(snap.key)
  //     }, error => {
  //       reject(error)
  //     })
  //   })
  // }
// }

export default {
  mutations,
  state,
  getters,
  actions
}

My console is logging:
undefined
callback

[lgertel]

I'll try to add this to jsfiddle

[lgertel]

@posva can i add you on some message channel? Really interested in this project and using for a new software.
Ty

[posva]

Sorry but no, I cannot help you out with your personal project. I'll, however, do my best to address any issue you find while developing the app using vuexfire so everyone can benefit 🙂

[lgertel]

https://jsfiddle.net/lgertel/6w3ks04x/6/

Getting crazy with this. Not sure if i'm doing something wrong.

[posva]

There's no promise in your action

…

On Wed, 10 May 2017, 18:50 Lucas Gertel, ***@***.***> wrote: https://jsfiddle.net/lgertel/6w3ks04x/6/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#68 (comment)>, or mute the thread <https:/notifications/unsubscribe-auth/AAoiccF9-XKd7O-cYXCRbGnKE8PdtEGJks5r4erNgaJpZM4NW4Px> .

[lgertel]

Same issue with the promise.
Sorry forgot to paste, but had on my code.

https://jsfiddle.net/lgertel/6w3ks04x/7/

[posva]

Thanks, I overlooked a return statement. I'll add it soon

[lgertel]

Great!
Looking forward to the fix.

[posva]

Just released it 👍

[lgertel]

Thanks, worked like a charm!

[posva]

LGTM. 👍