move websocket connection logic into module

src/components/settings_modal/helpers/shared_computed_object.js

@@ -12,24 +12,7 @@ const SharedComputedObject = () => ({
         this.$store.dispatch('setOption', { name: key, value })
       }
     }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
-  // Special cases (need to transform values or perform actions first)
-  useStreamingApi: {
-    get () { return this.$store.getters.mergedConfig.useStreamingApi },
-    set (value) {
-      const promise = value
-        ? this.$store.dispatch('enableMastoSockets')
-        : this.$store.dispatch('disableMastoSockets')
-
-      promise.then(() => {
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-      }).catch((e) => {
-        console.error('Failed starting MastoAPI Streaming socket', e)
-        this.$store.dispatch('disableMastoSockets')
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-      })
-    }
-  }
 })
 
 export default SharedComputedObject

src/modules/config.js

@@ -178,31 +178,51 @@ const config = {
       commit('setHighlight', { user, color, type })
     },
     setOption ({ commit, dispatch, state }, { name, value }) {
-      commit('setOption', { name, value })
+      const exceptions = new Set([
-      switch (name) {
+        'useStreamingApi'
-        case 'theme':
+      ])
-          setPreset(value)
+
-          break
+      if (exceptions.has(name)) {
-        case 'sidebarColumnWidth':
+        switch (name) {
-        case 'contentColumnWidth':
+          case 'useStreamingApi': {
-        case 'notifsColumnWidth':
+            const action = value ? 'enableMastoSockets' : 'disableMastoSockets'
-          applyConfig(state)
+
-          break
+            dispatch(action).then(() => {
-        case 'customTheme':
+              commit('setOption', { name: 'useStreamingApi', value })
-        case 'customThemeSource':
+            }).catch((e) => {
-          applyTheme(value)
+              console.error('Failed starting MastoAPI Streaming socket', e)
-          break
+              dispatch('disableMastoSockets')
-        case 'interfaceLanguage':
+              dispatch('setOption', { name: 'useStreamingApi', value: false })
-          messages.setLanguage(this.getters.i18n, value)
+            })
-          dispatch('loadUnicodeEmojiData', value)
+          }
-          Cookies.set(
+        }
-            BACKEND_LANGUAGE_COOKIE_NAME,
+      } else {
-            localeService.internalToBackendLocaleMulti(value)
+        commit('setOption', { name, value })
-          )
+        switch (name) {
-          break
+          case 'theme':
-        case 'thirdColumnMode':
+            setPreset(value)
-          dispatch('setLayoutWidth', undefined)
+            break
-          break
+          case 'sidebarColumnWidth':
+          case 'contentColumnWidth':
+          case 'notifsColumnWidth':
+            applyConfig(state)
+            break
+          case 'customTheme':
+          case 'customThemeSource':
+            applyTheme(value)
+            break
+          case 'interfaceLanguage':
+            messages.setLanguage(this.getters.i18n, value)
+            dispatch('loadUnicodeEmojiData', value)
+            Cookies.set(
+              BACKEND_LANGUAGE_COOKIE_NAME,
+              localeService.internalToBackendLocaleMulti(value)
+            )
+            break
+          case 'thirdColumnMode':
+            dispatch('setLayoutWidth', undefined)
+            break
+        }
       }
     }
   }