From fbee80474baf3bfc41656268e22395983811f2f7 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 4 Dec 2017 19:08:33 +0100 Subject: [PATCH 1/8] Basic frontend changes for chat. --- config/index.js | 8 +++++++- package.json | 1 + src/components/nav_panel/nav_panel.vue | 5 +++++ src/i18n/messages.js | 4 ++++ src/main.js | 7 +++++-- src/modules/users.js | 14 +++++++++++++- yarn.lock | 4 ++++ 7 files changed, 39 insertions(+), 4 deletions(-) diff --git a/config/index.js b/config/index.js index 6652048c..c48d91b8 100644 --- a/config/index.js +++ b/config/index.js @@ -23,9 +23,15 @@ module.exports = { assetsPublicPath: '/', proxyTable: { '/api': { - target: 'https://social.heldscal.la/', + target: 'htts://localhost:4000/', changeOrigin: true, cookieDomainRewrite: 'localhost' + }, + '/socket': { + target: 'htts://localhost:4000/', + changeOrigin: true, + cookieDomainRewrite: 'localhost', + ws: true } }, // CSS Sourcemaps off by default because relative paths are "buggy" diff --git a/package.json b/package.json index e8d84274..4e98647b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "localforage": "^1.5.0", "node-sass": "^3.10.1", "object-path": "^0.11.3", + "phoenix": "^1.3.0", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", "vue": "^2.3.4", diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index aea841e9..fa4000b0 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,6 +7,11 @@ {{ $t("nav.timeline") }} +
  • + + {{ $t("nav.chat") }} + +
  • {{ $t("nav.mentions") }} diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 9aeffdfa..ecb3557c 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -179,7 +179,11 @@ const fi = { } const en = { + chat: { + title: 'Chat' + }, nav: { + chat: 'Local Chat', timeline: 'Timeline', mentions: 'Mentions', public_tl: 'Public Timeline', 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({ diff --git a/src/modules/users.js b/src/modules/users.js index 30f8dc27..a75271a4 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,6 +1,7 @@ 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) => { @@ -19,6 +20,9 @@ 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) @@ -50,7 +54,8 @@ export const defaultState = { currentUser: false, loggingIn: false, users: [], - usersObject: {} + usersObject: {}, + socket: null } const users = { @@ -97,6 +102,13 @@ const users = { // Set our new backend interactor 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) + } + // Start getting fresh tweets. store.dispatch('startFetching', 'friends') diff --git a/yarn.lock b/yarn.lock index d0d2dde9..3fcd29ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4226,6 +4226,10 @@ phantomjs-prebuilt@^2.1.3, phantomjs-prebuilt@^2.1.7: request-progress "~2.0.1" which "~1.2.10" +phoenix@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e" + pify@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" From 0e51fac2b24c752513afe65736e98eb5fb5ec3af Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:02:41 +0100 Subject: [PATCH 2/8] Add missing component code. --- src/components/chat/chat.js | 26 +++++++++++++++++++ src/components/chat/chat.vue | 49 ++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 src/components/chat/chat.js create mode 100644 src/components/chat/chat.vue diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js new file mode 100644 index 00000000..3b84bd3d --- /dev/null +++ b/src/components/chat/chat.js @@ -0,0 +1,26 @@ +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() + }, + methods: { + submit(message) { + this.channel.push('new_msg', {text: message}, 10000) + this.currentMessage = ''; + } + } +} + +export default chat; diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue new file mode 100644 index 00000000..9d3ab39c --- /dev/null +++ b/src/components/chat/chat.vue @@ -0,0 +1,49 @@ + + + + + + From 27be1e0fa3a9779a624012a8528801679721cb40 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:47:10 +0100 Subject: [PATCH 3/8] 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 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. From 6ad27959a696ea0e4f6fe43a98daf4b99bb973ff Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 11:49:40 +0100 Subject: [PATCH 4/8] Linting. --- src/components/chat/chat.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index fc942a30..ef326d4a 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -11,11 +11,11 @@ const chat = { } }, methods: { - submit(message) { + submit (message) { this.$store.state.chat.channel.push('new_msg', {text: message}, 10000) - this.currentMessage = ''; + this.currentMessage = '' } } } -export default chat; +export default chat From a03b92e252406a8469a9ffe871a6882b3aedb366 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 12:09:54 +0100 Subject: [PATCH 5/8] Post on submit, not on enter. --- src/components/chat/chat.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 9d3ab39c..0c397472 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -18,7 +18,9 @@
    - +
    + +
    @@ -41,9 +43,12 @@ } .chat-input { display: flex; - input { + form { flex: auto; - margin: 0.5em; + input { + margin: 0.5em; + width: 100%; + } } } From 6c4e3a509a23a4f683aee02fcd0b186813ae3de0 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Tue, 5 Dec 2017 14:20:34 +0100 Subject: [PATCH 6/8] Don't display if we don't have a chat. --- src/components/chat/chat.vue | 2 +- src/components/nav_panel/nav_panel.js | 3 +++ src/components/nav_panel/nav_panel.vue | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 0c397472..488faf9a 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -7,7 +7,7 @@
    -
    +
    {{message.author.username}}: diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index baeaaede..ea5d7ea4 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -2,6 +2,9 @@ const NavPanel = { computed: { currentUser () { return this.$store.state.users.currentUser + }, + chat () { + return this.$store.state.chat.channel } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index fa4000b0..ccc772a8 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,7 +7,7 @@ {{ $t("nav.timeline") }}
    • -
  • +
  • {{ $t("nav.chat") }} From 612fb183671783c3ac3eeea21428c024a47713b1 Mon Sep 17 00:00:00 2001 From: eal Date: Thu, 7 Dec 2017 18:20:44 +0200 Subject: [PATCH 7/8] 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(-) 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 } From ecb8acb155a77092b0661854b0ca4cf3c19ff56e Mon Sep 17 00:00:00 2001 From: eal Date: Thu, 7 Dec 2017 19:03:26 +0200 Subject: [PATCH 8/8] Some css fixes. Scale chat panel size to viewport height, fit message field to width. --- src/components/chat/chat.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 488faf9a..6c1e2c38 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -30,6 +30,11 @@