Move poll state handling to its own module

src/components/poll/poll.js

@@ -3,26 +3,33 @@ import { forEach, map } from 'lodash'
 
 export default {
   name: 'Poll',
-  props: ['poll', 'statusId'],
+  props: ['pollId'],
   components: { Timeago },
   data () {
     return {
       loading: false,
-      choices: [],
-      refreshInterval: null
+      choices: []
     }
   },
-  created () {
-    this.refreshInterval = setTimeout(this.refreshPoll, 30 * 1000)
-    // Initialize choices to booleans and set its length to match options
-    this.choices = this.poll.options.map(_ => false)
+  mounted () {
+    this.$store.dispatch('trackPoll', this.pollId)
   },
   destroyed () {
-    clearTimeout(this.refreshInterval)
+    this.$store.dispatch('untrackPoll', this.pollId)
   },
   computed: {
+    poll () {
+      const storePoll = this.$store.state.polls.pollsObject[this.pollId]
+      return storePoll || {}
+    },
+    options () {
+      return (this.poll && this.poll.options) || []
+    },
+    expiresAt () {
+      return (this.poll && this.poll.expires_at) || 0
+    },
     expired () {
-      return Date.now() > Date.parse(this.poll.expires_at)
+      return Date.now() > Date.parse(this.expiresAt)
     },
     loggedIn () {
       return this.$store.state.users.currentUser
@@ -33,9 +40,6 @@ export default {
     totalVotesCount () {
       return this.poll.votes_count
     },
-    expiresAt () {
-      return Date.parse(this.poll.expires_at).toLocaleString()
-    },
     containerClass () {
       return {
         loading: this.loading
@@ -55,11 +59,6 @@ export default {
     }
   },
   methods: {
-    refreshPoll () {
-      if (this.expired) return
-      this.fetchPoll()
-      this.refreshInterval = setTimeout(this.refreshPoll, 30 * 1000)
-    },
     percentageForOption (count) {
       return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
     },
@@ -104,4 +103,4 @@ export default {
       })
     }
   }
-}
+}

src/components/poll/poll.vue

@@ -2,7 +2,7 @@
   <div class="poll" v-bind:class="containerClass">
     <div
       class="poll-option"
-      v-for="(option, index) in poll.options"
+      v-for="(option, index) in options"
       :key="index"
     >
       <div v-if="showResults" :title="resultTitle(option)" class="option-result">
@@ -50,7 +50,7 @@
         {{totalVotesCount}} {{ $t("polls.votes") }}&nbsp;·&nbsp;
       </div>
       <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
-        <Timeago :time="this.poll.expires_at" :auto-update="60" :now-threshold="0" />
+        <Timeago :time="this.expiresAt" :auto-update="60" :now-threshold="0" />
       </i18n>
     </div>
   </div>