src/App.scss

@@ -200,6 +200,7 @@ input, textarea, .select {
       }
     }
     + label::before {
+      flex-shrink: 0;
       display: inline-block;
       content: '';
       transition: box-shadow 200ms;
@@ -236,6 +237,7 @@ input, textarea, .select {
       }
     }
     + label::before {
+      flex-shrink: 0;
       display: inline-block;
       content: '✔';
       transition: color 200ms;

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 {
       })
     }
   }
-}
\ No newline at end of file
+}

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">
@@ -31,8 +31,8 @@
           :disabled="loading"
           :value="index"
         >
-        <label>
-          {{option.title}}
+        <label class="option-vote">
+          <div>{{option.title}}</div>
         </label>
       </div>
     </div>
@@ -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>
@@ -68,8 +68,7 @@
     margin: 0 0 0.5em;
   }
   .poll-option {
-    margin: 0.5em 0;
-    height: 1.5em;
+    margin: 0.75em 0.5em;
   }
   .option-result {
     height: 100%;
@@ -87,6 +86,7 @@
   }
   .result-percentage {
     width: 3.5em;
+    flex-shrink: 0;
   }
   .result-fill {
     height: 100%;
@@ -99,6 +99,10 @@
     left: 0;
     transition: width 0.5s;
   }
+  .option-vote {
+    display: flex;
+    align-items: center;
+  }
   input {
     width: 3.5em;
   }

src/components/status/status.vue

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

src/main.js

@@ -14,6 +14,7 @@ import authFlowModule from './modules/auth_flow.js'
 import mediaViewerModule from './modules/media_viewer.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
+import pollsModule from './modules/polls.js'
 
 import VueI18n from 'vue-i18n'
 
@@ -72,7 +73,8 @@ const persistedStateOptions = {
       authFlow: authFlowModule,
       mediaViewer: mediaViewerModule,
       oauthTokens: oauthTokensModule,
-      reports: reportsModule
+      reports: reportsModule,
+      polls: pollsModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.

src/modules/polls.js

+import { each, merge } from 'lodash'
+import { set } from 'vue'
+
+const polls = {
+  state: {
+    // Contains key = id, value = number of trackers for this poll
+    trackedPolls: {},
+    pollsObject: {}
+  },
+  mutations: {
+    addNewStatuses (state, { statuses }) {
+      each(statuses, status => {
+        if (status.poll) {
+          set(state.pollsObject, status.poll.id, status.poll)
+        }
+      })
+    },
+    mergePoll (state, poll) {
+      state.pollsObject[poll.id] = merge(state.pollsObject[poll.id], poll)
+    },
+    trackPoll (state, pollId) {
+      const currentValue = state.trackedPolls[pollId]
+      if (currentValue) {
+        set(state.trackedPolls, pollId, currentValue + 1)
+      } else {
+        set(state.trackedPolls, pollId, 1)
+      }
+    },
+    untrackPoll (state, pollId) {
+      const currentValue = state.trackedPolls[pollId]
+      if (currentValue) {
+        set(state.trackedPolls, pollId, currentValue - 1)
+      } else {
+        set(state.trackedPolls, pollId, 0)
+      }
+    }
+  },
+  actions: {
+    updatePoll ({ rootState, commit }, pollId) {
+      return rootState.api.backendInteractor.fetchPoll(pollId).then(poll => {
+        commit('mergePoll', poll)
+        return poll
+      })
+    },
+    updateTrackedPoll ({ rootState, dispatch, commit }, pollId) {
+      rootState.api.backendInteractor.fetchPoll(pollId).then(poll => {
+        setTimeout(() => {
+          if (rootState.polls.trackedPolls[pollId]) {
+            dispatch('updateTrackedPoll', pollId)
+          }
+        }, 30 * 1000)
+        commit('mergePoll', poll)
+      })
+    },
+    trackPoll ({ rootState, commit, dispatch }, pollId) {
+      if (!rootState.polls.trackedPolls[pollId]) {
+        setTimeout(() => dispatch('updateTrackedPoll', pollId), 30 * 1000)
+      }
+      commit('trackPoll', pollId)
+    },
+    untrackPoll ({ commit }, pollId) {
+      commit('untrackPoll', pollId)
+    },
+    votePoll ({ rootState, commit }, { id, pollId, choices }) {
+      return rootState.api.backendInteractor.vote(pollId, choices).then(poll => {
+        commit('mergePoll', poll)
+        return poll
+      })
+    }
+  }
+}
+
+export default polls

src/modules/statuses.js

@@ -582,18 +582,6 @@ 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
-      })
-    },
-    refreshPoll ({ rootState, commit }, { id, pollId }) {
-      return rootState.api.backendInteractor.fetchPoll(pollId).then(poll => {
-        commit('updateStatusWithPoll', { id, poll })
-        return poll
-      })
     }
   },
   mutations