commit: aa6c13f9e60913639ff27d40009b045e7feb17ca
parent aa98e83ff003df834e50665f7ac5f265751784ed
Author: Sean King <seanking2919@protonmail.com>
Date: Tue, 4 Apr 2023 21:17:54 -0600
Move shout module to store
Diffstat:
8 files changed, 50 insertions(+), 61 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+ }
+ }
+})
