I'm using amazon mechanical turk to hire some workers. I'm using vue with firebase. In firebase I have the hits(mturk) and I want to close the hit when form is getting submitted in mturk iframe. The problem is sometime it closes the hit sometimes it's not.
public async submitAssignment() {
var urlParams = new URLSearchParams(window.location.search)
if (urlParams.has('assignment_id')) {
this.host = urlParams.get('host')
this.assignmentId = urlParams.get('assignment_id')
this.workerId = urlParams.get('workerId')
this.hitId = urlParams.get('hitId')
const oFormObject = document.forms['mturkForm']
oFormObject.action = this.host
oFormObject.elements['assignmentId'].value = this.assignmentId
oFormObject.elements['workerId'].value = this.workerId
oFormObject.elements['hitId'].value = this.hitId
// form is not waiting for this before submitting the form
await this.$store.dispatch('hits/closeHit', {
hitId: this.hitId,
workerId: this.workerId
})
oFormObject.submit()
}
}
Vuex action
const actions = {
async closeHit({}, payload: any) {
await db.hits
.setDone(payload)
.then()
.catch((error) => {
console.log(error)
})
}
}
hits.ts
async setDone(payload: any) {
try {
return firestore.db
.collection(collectionNamespace)
.doc(payload.hitId)
.update({
open: false,
workerId: payload.workerId
})
} catch (error) {
console.error('Error updating document: ', error)
}
}
You can use following syntax
await this.$store.dispatch('hits/closeHit', {
hitId: this.hitId,
workerId: this.workerId
}).then(() => {
oFormObject.submit()
})
I'm not sure if it causes your current problem, but this code seems like an antipattern:
const actions = {
async closeHit({}, payload: any) {
await db.hits
.setDone(payload)
.then()
.catch((error) => {
console.log(error)
})
}
}
You should use either then or await, not both. Right now your then doesn't do anything, but may be breaking the await.
Simpler and more likely to be correct:
const actions = {
async closeHit({}, payload: any) {
await db.hits
.setDone(payload)
}
}