Move shout module to store

src/App.js

@@ -17,6 +17,7 @@ import GlobalNoticeList from './components/global_notice_list/global_notice_list
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
 import { defineAsyncComponent } from 'vue'
+import { useShoutStore } from './stores/shout'
 
 export default {
   name: 'app',
@@ -86,7 +87,7 @@ export default {
         }
       }
     },
-    shout () { return this.$store.state.shout.joined },
+    shout () { return useShoutStore().joined },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&

src/boot/after_store.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
 import VueVirtualScroller from 'vue-virtual-scroller'
@@ -341,7 +340,10 @@ const checkOAuthToken = async ({ store }) => {
   })
 }
 
-const afterStoreSetup = async ({ store, i18n }) => {
+const afterStoreSetup = async ({ pinia, store, i18n }) => {
+  const app = createApp(App)
+  app.use(pinia)
+
   store.dispatch('setLayoutWidth', windowWidth())
   store.dispatch('setLayoutHeight', windowHeight())
 
@@ -397,11 +399,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
     }
   })
 
-  const app = createApp(App)
-  const pinia = createPinia()
-
-  app.use(pinia)
-
   useI18nStore().setI18n(i18n)
 
   app.use(router)

src/components/shout_panel/shout_panel.js

@@ -4,6 +4,7 @@ import {
   faBullhorn,
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
+import { useShoutStore } from '../../stores/shout'
 
 library.add(
   faBullhorn,
@@ -21,12 +22,12 @@ const shoutPanel = {
   },
   computed: {
     messages () {
-      return this.$store.state.shout.messages
+      return useShoutStore().messages
     }
   },
   methods: {
     submit (message) {
-      this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
+      useShoutStore().channel.push('new_msg', { text: message }, 10000)
       this.currentMessage = ''
     },
     togglePanel () {

src/components/side_drawer/side_drawer.js

@@ -19,6 +19,7 @@ import {
   faCompass,
   faList
 } from '@fortawesome/free-solid-svg-icons'
+import { useShoutStore } from '../../stores/shout'
 
 library.add(
   faSignInAlt,
@@ -54,7 +55,7 @@ const SideDrawer = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    shout () { return this.$store.state.shout.joined },
+    shout () { return useShoutStore().joined },
     unseenNotifications () {
       return unseenNotificationsFromStore(this.$store)
     },

src/main.js

@@ -1,4 +1,5 @@
 import { createStore } from 'vuex'
+import { createPinia } from 'pinia'
 
 import 'custom-event-polyfill'
 import './lib/event_target_polyfill.js'
@@ -12,7 +13,6 @@ import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
 import serverSideConfigModule from './modules/serverSideConfig.js'
 import serverSideStorageModule from './modules/serverSideStorage.js'
-import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
 import mediaViewerModule from './modules/media_viewer.js'
@@ -58,6 +58,7 @@ const persistedStateOptions = {
 (async () => {
   let storageError = false
   const plugins = [pushNotifications]
+  const pinia = createPinia()
   try {
     const persistedState = await createPersistedState(persistedStateOptions)
     plugins.push(persistedState)
@@ -77,7 +78,6 @@ const persistedStateOptions = {
       config: configModule,
       serverSideConfig: serverSideConfigModule,
       serverSideStorage: serverSideStorageModule,
-      shout: shoutModule,
       oauth: oauthModule,
       authFlow: authFlowModule,
       mediaViewer: mediaViewerModule,
@@ -98,7 +98,9 @@ const persistedStateOptions = {
   if (storageError) {
     store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
   }
-  afterStoreSetup({ store, i18n })
+
+  // Temporarily passing both vuex and pinia stores until migration is fully complete.
+  afterStoreSetup({ pinia, store, i18n })
 })()
 
 // These are inlined by webpack's DefinePlugin

src/modules/api.js

@@ -2,6 +2,7 @@ import backendInteractorService from '../services/backend_interactor_service/bac
 import { WSConnectionStatus } from '../services/api/api.service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
 import { Socket } from 'phoenix'
+import { useShoutStore } from '../stores/shout.js'
 
 const retryTimeout = (multiplier) => 1000 * multiplier
 
@@ -283,7 +284,7 @@ const api = {
         socket.connect()
 
         commit('setSocket', socket)
-        dispatch('initializeShout', socket)
+        useShoutStore().initializeShout(socket)
       }
     },
     disconnectFromSocket ({ commit, state }) {

src/modules/shout.js

@@ -1,46 +0,0 @@
-const shout = {
-  state: {
-    messages: [],
-    channel: { state: '' },
-    joined: false
-  },
-  mutations: {
-    setChannel (state, channel) {
-      state.channel = channel
-    },
-    addMessage (state, message) {
-      state.messages.push(message)
-      state.messages = state.messages.slice(-19, 20)
-    },
-    setMessages (state, messages) {
-      state.messages = messages.slice(-19, 20)
-    },
-    setJoined (state, joined) {
-      state.joined = joined
-    }
-  },
-  actions: {
-    initializeShout (store, socket) {
-      const channel = socket.channel('chat:public')
-      channel.joinPush.receive('ok', () => {
-        store.commit('setJoined', true)
-      })
-      channel.onClose(() => {
-        store.commit('setJoined', false)
-      })
-      channel.onError(() => {
-        store.commit('setJoined', false)
-      })
-      channel.on('new_msg', (msg) => {
-        store.commit('addMessage', msg)
-      })
-      channel.on('messages', ({ messages }) => {
-        store.commit('setMessages', messages)
-      })
-      channel.join()
-      store.commit('setChannel', channel)
-    }
-  }
-}
-
-export default shout

src/stores/shout.js

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+
+export const useShoutStore = defineStore('shout', {
+  state: () => ({
+    messages: [],
+    channel: { state: '' },
+    joined: false
+  }),
+  actions: {
+    initializeShout (socket) {
+      const channel = socket.channel('chat:public')
+      channel.joinPush.receive('ok', () => {
+        this.joined = true
+      })
+      channel.onClose(() => {
+        this.joined = false
+      })
+      channel.onError(() => {
+        this.joined = false
+      })
+      channel.on('new_msg', (msg) => {
+        this.messages.push(msg)
+        this.messages = this.messages.slice(-19, 20)
+      })
+      channel.on('messages', ({ messages }) => {
+        this.messages = messages.slice(-19, 20)
+      })
+      channel.join()
+      this.channel = channel
+    }
+  }
+})