From fbee80474baf3bfc41656268e22395983811f2f7 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 4 Dec 2017 19:08:33 +0100 Subject: Basic frontend changes for chat. --- src/main.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/main.js') diff --git a/src/main.js b/src/main.js index 6c5bf83e..ca3bb955 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,7 @@ import UserProfile from './components/user_profile/user_profile.vue' import Settings from './components/settings/settings.vue' import Registration from './components/registration/registration.vue' import UserSettings from './components/user_settings/user_settings.vue' +import Chat from './components/chat/chat.vue' import statusesModule from './modules/statuses.js' import usersModule from './modules/users.js' @@ -60,7 +61,8 @@ const store = new Vuex.Store({ config: configModule }, plugins: [createPersistedState(persistedStateOptions)], - strict: process.env.NODE_ENV !== 'production' + strict: false // Socket modifies itself, let's ignore this for now. + // strict: process.env.NODE_ENV !== 'production' }) const i18n = new VueI18n({ @@ -90,7 +92,8 @@ window.fetch('/static/config.json') { name: 'mentions', path: '/:username/mentions', component: Mentions }, { name: 'settings', path: '/settings', component: Settings }, { name: 'registration', path: '/registration', component: Registration }, - { name: 'user-settings', path: '/user-settings', component: UserSettings } + { name: 'user-settings', path: '/user-settings', component: UserSettings }, + { name: 'chat', path: '/chat', component: Chat } ] const router = new VueRouter({ -- cgit v1.2.3-70-g09d2 From 27be1e0fa3a9779a624012a8528801679721cb40 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:47:10 +0100 Subject: Move chat to own module. --- src/components/chat/chat.js | 15 +++++---------- src/main.js | 4 +++- src/modules/api.js | 13 ++++++++++++- src/modules/chat.js | 33 +++++++++++++++++++++++++++++++++ src/modules/users.js | 12 ++---------- 5 files changed, 55 insertions(+), 22 deletions(-) create mode 100644 src/modules/chat.js (limited to 'src/main.js') diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index 3b84bd3d..fc942a30 100644 --- a/src/components/chat/chat.js +++ b/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 = ''; } } diff --git a/src/main.js b/src/main.js index ca3bb955..72b75a52 100644 --- a/src/main.js +++ b/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. diff --git a/src/modules/api.js b/src/modules/api.js index e61382eb..ccd6cfb7 100644 --- a/src/modules/api.js +++ b/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) } } } diff --git a/src/modules/chat.js b/src/modules/chat.js new file mode 100644 index 00000000..b1244ebe --- /dev/null +++ b/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 diff --git a/src/modules/users.js b/src/modules/users.js index a75271a4..8303ecc1 100644 --- a/src/modules/users.js +++ b/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. -- cgit v1.2.3-70-g09d2 From 612fb183671783c3ac3eeea21428c024a47713b1 Mon Sep 17 00:00:00 2001 From: eal Date: Thu, 7 Dec 2017 18:20:44 +0200 Subject: Add option for disabling chat. --- src/main.js | 3 +++ src/modules/api.js | 17 +++++++++++++---- static/config.json | 3 ++- 3 files changed, 18 insertions(+), 5 deletions(-) (limited to 'src/main.js') diff --git a/src/main.js b/src/main.js index 72b75a52..a8ee5fda 100644 --- a/src/main.js +++ b/src/main.js @@ -82,6 +82,9 @@ window.fetch('/static/config.json') store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen }) + if (data['chatDisabled']) { + store.dispatch('disableChat') + } const routes = [ { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' }, diff --git a/src/modules/api.js b/src/modules/api.js index ccd6cfb7..c91fb97b 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -6,7 +6,8 @@ const api = { state: { backendInteractor: backendInteractorService(), fetchers: {}, - socket: null + socket: null, + chatDisabled: false }, mutations: { setBackendInteractor (state, backendInteractor) { @@ -20,6 +21,9 @@ const api = { }, setSocket (state, socket) { state.socket = socket + }, + setChatDisabled (state, value) { + state.chatDisabled = value } }, actions: { @@ -45,9 +49,14 @@ const api = { }, initializeSocket (store, token) { // Set up websocket connection - let socket = new Socket('/socket', {params: {token: token}}) - socket.connect() - store.dispatch('initializeChat', socket) + if (!store.state.chatDisabled) { + let socket = new Socket('/socket', {params: {token: token}}) + socket.connect() + store.dispatch('initializeChat', socket) + } + }, + disableChat (store) { + store.commit('setChatDisabled', true) } } } diff --git a/static/config.json b/static/config.json index b186246b..880efca8 100644 --- a/static/config.json +++ b/static/config.json @@ -4,5 +4,6 @@ "background": "/static/bg.jpg", "logo": "/static/logo.png", "registrationOpen": false, - "defaultPath": "/main/all" + "defaultPath": "/main/all", + "chatDisabled": false } -- cgit v1.2.3-70-g09d2