Move polls module to store

src/components/poll/poll.js

@@ -1,6 +1,7 @@
 import Timeago from 'components/timeago/timeago.vue'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
+import { usePollsStore } from '../../stores/polls'
 
 export default {
   name: 'Poll',
@@ -17,20 +18,20 @@ export default {
     }
   },
   created () {
-    if (!this.$store.state.polls.pollsObject[this.pollId]) {
+    if (!usePollsStore().pollsObject[this.pollId]) {
-      this.$store.dispatch('mergeOrAddPoll', this.basePoll)
+      usePollsStore().mergeOrAddPoll(this.basePoll)
     }
-    this.$store.dispatch('trackPoll', this.pollId)
+    usePollsStore().trackPoll(this.pollId)
   },
   unmounted () {
-    this.$store.dispatch('untrackPoll', this.pollId)
+    usePollsStore().untrackPoll(this.pollId)
   },
   computed: {
     pollId () {
       return this.basePoll.id
     },
     poll () {
-      const storePoll = this.$store.state.polls.pollsObject[this.pollId]
+      const storePoll = usePollsStore().pollsObject[this.pollId]
       return storePoll || {}
     },
     options () {
@@ -76,9 +77,6 @@ export default {
     resultTitle (option) {
       return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
     },
-    fetchPoll () {
-      this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
-    },
     activateOption (index) {
       // forgive me father: doing checking the radio/checkboxes
       // in code because of customized input elements need either
@@ -106,8 +104,7 @@ export default {
     vote () {
       if (this.choiceIndices.length === 0) return
       this.loading = true
-      this.$store.dispatch(
+      usePollsStore().votePoll(
-        'votePoll',
         { id: this.statusId, pollId: this.poll.id, choices: this.choiceIndices }
       ).then(poll => {
         this.loading = false

src/main.js

@@ -16,7 +16,6 @@ import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
-import pollsModule from './modules/polls.js'
 
 import chatsModule from './modules/chats.js'
 import announcementsModule from './modules/announcements.js'
@@ -78,7 +77,6 @@ const persistedStateOptions = {
       authFlow: authFlowModule,
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
-      polls: pollsModule,
       chats: chatsModule,
       announcements: announcementsModule
     },

src/modules/polls.js

@@ -1,69 +0,0 @@
-import { merge } from 'lodash'
-
-const polls = {
-  state: {
-    // Contains key = id, value = number of trackers for this poll
-    trackedPolls: {},
-    pollsObject: {}
-  },
-  mutations: {
-    mergeOrAddPoll (state, poll) {
-      const existingPoll = state.pollsObject[poll.id]
-      // Make expired-state change trigger re-renders properly
-      poll.expired = Date.now() > Date.parse(poll.expires_at)
-      if (existingPoll) {
-        state.pollsObject[poll.id] = merge(existingPoll, poll)
-      } else {
-        state.pollsObject[poll.id] = poll
-      }
-    },
-    trackPoll (state, pollId) {
-      const currentValue = state.trackedPolls[pollId]
-      if (currentValue) {
-        state.trackedPolls[pollId] = currentValue + 1
-      } else {
-        state.trackedPolls[pollId] = 1
-      }
-    },
-    untrackPoll (state, pollId) {
-      const currentValue = state.trackedPolls[pollId]
-      if (currentValue) {
-        state.trackedPolls[pollId] = currentValue - 1
-      } else {
-        state.trackedPolls[pollId] = 0
-      }
-    }
-  },
-  actions: {
-    mergeOrAddPoll ({ commit }, poll) {
-      commit('mergeOrAddPoll', 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('mergeOrAddPoll', 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('mergeOrAddPoll', poll)
-        return poll
-      })
-    }
-  }
-}
-
-export default polls

src/stores/polls.js

@@ -0,0 +1,57 @@
+import { merge } from 'lodash'
+import { defineStore } from 'pinia'
+
+export const usePollsStore = defineStore('polls', {
+  state: () => ({
+    // Contains key = id, value = number of trackers for this poll
+    trackedPolls: {},
+    pollsObject: {}
+  }),
+  actions: {
+    mergeOrAddPoll (poll) {
+      const existingPoll = this.pollsObject[poll.id]
+      // Make expired-state change trigger re-renders properly
+      poll.expired = Date.now() > Date.parse(poll.expires_at)
+      if (existingPoll) {
+        this.pollsObject[poll.id] = merge(existingPoll, poll)
+      } else {
+        this.pollsObject[poll.id] = poll
+      }
+    },
+    updateTrackedPoll (pollId) {
+      window.vuex.state.api.backendInteractor.fetchPoll({ pollId }).then(poll => {
+        setTimeout(() => {
+          if (this.trackedPolls[pollId]) {
+            this.updateTrackedPoll(pollId)
+          }
+        }, 30 * 1000)
+        this.mergeOrAddPoll(poll)
+      })
+    },
+    trackPoll (pollId) {
+      if (!this.trackedPolls[pollId]) {
+        setTimeout(() => this.updateTrackedPoll(pollId), 30 * 1000)
+      }
+      const currentValue = this.trackedPolls[pollId]
+      if (currentValue) {
+        this.trackedPolls[pollId] = currentValue + 1
+      } else {
+        this.trackedPolls[pollId] = 1
+      }
+    },
+    untrackPoll (pollId) {
+      const currentValue = this.trackedPolls[pollId]
+      if (currentValue) {
+        this.trackedPolls[pollId] = currentValue - 1
+      } else {
+        this.trackedPolls[pollId] = 0
+      }
+    },
+    votePoll ({ id, pollId, choices }) {
+      return window.vuex.state.api.backendInteractor.vote({ pollId, choices }).then(poll => {
+        this.mergeOrAddPoll(poll)
+        return poll
+      })
+    }
+  }
+})