Move chat to own module.

src/components/chat/chat.js

@@ -1,23 +1,18 @@
 const chat = {
   data () {
     return {
-      messages: [],
       currentMessage: '',
-      socket: this.$store.state.users.socket,
       channel: null
     }
   },
-  created () {
-    this.channel = this.socket.channel('chat:public')
-    this.channel.on('new_msg', (msg) => {
-      this.messages.push(msg)
-      this.messages = this.messages.slice(-19, 20)
-    })
-    this.channel.join()
+  computed: {
+    messages () {
+      return this.$store.state.chat.messages
+    }
   },
   methods: {
     submit(message) {
-      this.channel.push('new_msg', {text: message}, 10000)
+      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
       this.currentMessage = '';
     }
   }

src/main.js

@@ -18,6 +18,7 @@ import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
+import chatModule from './modules/chat.js'
 
 import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
@@ -58,7 +59,8 @@ const store = new Vuex.Store({
     statuses: statusesModule,
     users: usersModule,
     api: apiModule,
-    config: configModule
+    config: configModule,
+    chat: chatModule
   },
   plugins: [createPersistedState(persistedStateOptions)],
   strict: false // Socket modifies itself, let's ignore this for now.

src/modules/api.js

@@ -1,10 +1,12 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import {isArray} from 'lodash'
+import { Socket } from 'phoenix'
 
 const api = {
   state: {
     backendInteractor: backendInteractorService(),
-    fetchers: {}
+    fetchers: {},
+    socket: null
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -15,6 +17,9 @@ const api = {
     },
     removeFetcher (state, {timeline}) {
       delete state.fetchers[timeline]
+    },
+    setSocket (state, socket) {
+      state.socket = socket
     }
   },
   actions: {
@@ -37,6 +42,12 @@ const api = {
       const fetcher = store.state.fetchers[timeline]
       window.clearInterval(fetcher)
       store.commit('removeFetcher', {timeline})
+    },
+    initializeSocket (store, token) {
+      // Set up websocket connection
+      let socket = new Socket('/socket', {params: {token: token}})
+      socket.connect()
+      store.dispatch('initializeChat', socket)
     }
   }
 }

src/modules/chat.js

@@ -0,0 +1,33 @@
+const chat = {
+  state: {
+    messages: [],
+    channel: null
+  },
+  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)
+    }
+  },
+  actions: {
+    initializeChat (store, socket) {
+      const channel = socket.channel('chat:public')
+      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 chat

src/modules/users.js

@@ -1,7 +1,6 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { compact, map, each, merge } from 'lodash'
 import { set } from 'vue'
-import { Socket } from 'phoenix'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
@@ -20,9 +19,6 @@ export const mergeOrAdd = (arr, obj, item) => {
 }
 
 export const mutations = {
-  setSocket (state, socket) {
-    state.socket = socket
-  },
   setMuted (state, { user: {id}, muted }) {
     const user = state.usersObject[id]
     set(user, 'muted', muted)
@@ -54,8 +50,7 @@ export const defaultState = {
   currentUser: false,
   loggingIn: false,
   users: [],
-  usersObject: {},
-  socket: null
+  usersObject: {}
 }
 
 const users = {
@@ -103,10 +98,7 @@ const users = {
                   commit('setBackendInteractor', backendInteractorService(userCredentials))
 
                   if (user.token) {
-                    // Set up websocket connection
-                    let socket = new Socket('/socket', {params: {token: user.token}})
-                    socket.connect()
-                    store.commit('setSocket', socket)
+                    store.dispatch('initializeSocket', user.token)
                   }
 
                   // Start getting fresh tweets.