make poll voting update status, making it reactive, fix multiple choice voting

src/components/poll/poll.vue

@@ -2,11 +2,14 @@
   <poll-results
     v-if="currentUserHasVoted"
     :poll="poll"
-    v-on:poll-refreshed="handlePollUpdate" />
+    v-on:poll-refreshed="handlePollUpdate"
+  />
   <poll-vote
     v-else
     :poll="poll"
-    v-on:user-has-voted="handlePollUpdate" />
+    :status-id="statusId"
+    v-on:user-has-voted="handlePollUpdate"
+  />
 </template>
 
 <script>
@@ -15,13 +18,17 @@ import PollVote from './poll_vote/poll_vote.vue'
 
 export default {
   name: 'Poll',
-  props: ['poll'],
+  props: ['poll', 'statusId'],
   components: {
     PollResults,
     PollVote
   },
   computed: {
     currentUserHasVoted () {
+      console.log('currentUserHasVoted poll', this.poll)
+      return this.poll.voted
+    },
+    voted () {
       return this.poll.voted
     }
   },

src/components/poll/poll_vote/poll_vote.vue

@@ -21,7 +21,7 @@
 <script>
 export default {
   name: 'PollVote',
-  props: ['poll'],
+  props: ['poll', 'statusId'],
   data () {
     return {
       loading: false,
@@ -39,14 +39,14 @@ export default {
     optionID (index) {
       return `pollOption${this.poll.id}#${index}`
     },
-    async onVote () {
+    onVote () {
       this.loading = true
 
-      const choices = this.checks.filter(_=>_).map((entry, index) => index)
+      const choices = this.checks.map((entry, index) => index).filter(value => typeof value === 'number')
-      const poll = await this.$store.state.api.backendInteractor.vote(this.poll.id, choices)
+      this.$store.dispatch('votePoll', { id: this.statusId, pollId: this.poll.id, choices }).then(poll => {
-
+        console.log('vote result:', poll)
-      this.loading = false
+        this.loading = false
-      this.$emit('user-has-voted', poll)
+      })
     }
   }
 }

src/components/status/status.vue

@@ -124,7 +124,7 @@
           </div>
 
           <div v-if="status.poll && status.poll.options">
-            <poll :poll="status.poll" />
+            <poll :poll="status.poll" :status-id="status.id" />
           </div>
 
           <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">

src/modules/statuses.js

@@ -494,6 +494,10 @@ export const mutations = {
     const newStatus = state.allStatusesObject[id]
     newStatus.favoritedBy = favoritedByUsers.filter(_ => _)
     newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _)
+  },
+  updateStatusWithPoll (state, { id, poll }) {
+    const status = state.allStatusesObject[id]
+    status.poll = poll
   }
 }
 
@@ -578,6 +582,12 @@ const statuses = {
       ]).then(([favoritedByUsers, rebloggedByUsers]) =>
         commit('addFavsAndRepeats', { id, favoritedByUsers, rebloggedByUsers })
       )
+    },
+    votePoll ({ rootState, commit }, { id, pollId, choices }) {
+      return rootState.api.backendInteractor.vote(pollId, choices).then(poll => {
+        commit('updateStatusWithPoll', { id, poll })
+        return poll
+      })
     }
   },
   mutations

src/services/api/api.service.js

@@ -739,18 +739,14 @@ const markNotificationsAsSeen = ({ id, credentials }) => {
 
 const vote = ({ pollID, choices, credentials }) => {
   const form = new FormData()
-
   form.append('choices', choices)
-
   const url = MASTODON_VOTE_URL(encodeURIComponent(pollID))
-  console.log(url, choices)
 
   return promisedRequest({
     url: MASTODON_VOTE_URL(encodeURIComponent(pollID)),
     method: 'POST',
     credentials,
     payload: {
-      'test': 'test',
       choices: choices
     }
   })