diff --git a/src/App.js b/src/App.js index b7eb2f72..ac6885f3 100644 --- a/src/App.js +++ b/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 && diff --git a/src/boot/after_store.js b/src/boot/after_store.js index c4da8b4f..bc9b9996 100644 --- a/src/boot/after_store.js +++ b/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) diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js index fb0c5aa2..4b8e8c8d 100644 --- a/src/components/shout_panel/shout_panel.js +++ b/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 () { diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 27019577..a0ab0ccb 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/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) }, diff --git a/src/main.js b/src/main.js index 43869b01..ee0adcb6 100644 --- a/src/main.js +++ b/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 diff --git a/src/modules/api.js b/src/modules/api.js index fee584e8..d6cef55f 100644 --- a/src/modules/api.js +++ b/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 }) { diff --git a/src/modules/shout.js b/src/modules/shout.js deleted file mode 100644 index 88aefbfe..00000000 --- a/src/modules/shout.js +++ /dev/null @@ -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 diff --git a/src/stores/shout.js b/src/stores/shout.js new file mode 100644 index 00000000..105e80e6 --- /dev/null +++ b/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 + } + } +})