Merge branch 'from/develop/tusooa/1156-vue3-shoutbox' into 'develop'

Fix no reactivity on vuex 4 values

Closes #1156

See merge request pleroma/pleroma-fe!1505

src/App.js

@@ -65,7 +65,7 @@ export default {
         }
       }
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' },
+    shout () { return this.$store.state.shout.joined },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&

src/components/side_drawer/side_drawer.js

@@ -49,7 +49,7 @@ const SideDrawer = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    shout () { return this.$store.state.shout.channel.state === 'joined' },
+    shout () { return this.$store.state.shout.joined },
     unseenNotifications () {
       return unseenNotificationsFromStore(this.$store)
     },

src/modules/shout.js

 const shout = {
   state: {
     messages: [],
-    channel: { state: '' }
+    channel: { state: '' },
+    joined: false
   },
   mutations: {
     setChannel (state, channel) {
@@ -13,11 +14,23 @@ const shout = {
     },
     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)
       })