From 0e51fac2b24c752513afe65736e98eb5fb5ec3af Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 11:02:41 +0100
Subject: 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

(limited to 'src/components/chat')

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 @@
+<template>
+  <div class="chat-panel panel panel-default">
+    <div class="panel-heading timeline-heading base02-background base04">
+      <div class="title">
+        {{$t('chat.title')}}
+      </div>
+    </div>
+    <div class="panel-body base01-background">
+      <div class="chat-window">
+        <div class="chat-message" v-for="message in messages">
+          <span class="chat-avatar">
+            <img :src="message.author.avatar" />
+            {{message.author.username}}:
+          </span>
+          <span class="chat-text">
+            {{message.text}}
+          </span>
+        </div>
+      </div>
+      <div class="chat-input">
+        <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./chat.js"></script>
+
+
+<style lang="scss">
+ .chat-message {
+   padding: 0.2em 0.5em
+ }
+ .chat-avatar {
+     img {
+         height: 32px;
+         width: 32px;
+         border-radius: 5px;
+         margin-right: 0.5em;
+     }
+ }
+ .chat-input {
+     display: flex;
+     input {
+         flex: auto;
+         margin: 0.5em;
+     }
+ }
+</style>
-- 
cgit v1.2.3-70-g09d2


From 27be1e0fa3a9779a624012a8528801679721cb40 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
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/components/chat')

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 6ad27959a696ea0e4f6fe43a98daf4b99bb973ff Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 11:49:40 +0100
Subject: Linting.

---
 src/components/chat/chat.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/chat')

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
-- 
cgit v1.2.3-70-g09d2


From a03b92e252406a8469a9ffe871a6882b3aedb366 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 12:09:54 +0100
Subject: Post on submit, not on enter.

---
 src/components/chat/chat.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/components/chat')

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 @@
         </div>
       </div>
       <div class="chat-input">
-        <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)">
+        <form @submit.prevent="submit(currentMessage)">
+          <input v-model="currentMessage" type="text" >
+        </form>
       </div>
     </div>
   </div>
@@ -41,9 +43,12 @@
  }
  .chat-input {
      display: flex;
-     input {
+     form {
          flex: auto;
-         margin: 0.5em;
+         input {
+             margin: 0.5em;
+             width: 100%;
+         }
      }
  }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 6c4e3a509a23a4f683aee02fcd0b186813ae3de0 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 14:20:34 +0100
Subject: 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(-)

(limited to 'src/components/chat')

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 @@
     </div>
     <div class="panel-body base01-background">
       <div class="chat-window">
-        <div class="chat-message" v-for="message in messages">
+        <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
             <img :src="message.author.avatar" />
             {{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") }}
           </router-link>
         </li>
-        <li v-if='currentUser'>
+        <li v-if='chat && currentUser'>
           <router-link class="base00-background" to='/chat'>
             {{ $t("nav.chat") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From ecb8acb155a77092b0661854b0ca4cf3c19ff56e Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 7 Dec 2017 19:03:26 +0200
Subject: 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(-)

(limited to 'src/components/chat')

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 @@
 
 
 <style lang="scss">
+ .chat-window {
+   max-height: 80vh;
+   overflow-y: auto;
+   overflow-x: hidden;
+ }
  .chat-message {
    padding: 0.2em 0.5em
  }
@@ -47,7 +52,7 @@
          flex: auto;
          input {
              margin: 0.5em;
-             width: 100%;
+             width: fill-available;
          }
      }
  }
-- 
cgit v1.2.3-70-g09d2