From ced7ebfcac6b2803bcfe27c944cca760a39b1a24 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 6 Dec 2020 17:52:08 +0100
Subject: [PATCH] Refined chat scroll handling & styling.

Moved chat functionality from parent VirtualLotteryPage to isolate
within Chat component.
Chat has better handling for username validation.
When receiving or sending messages to chat the scroll bar position more
user-friendly when loading more pages, sending message or scrolling back
in history while receiving messages.
---
 src/components/VirtualLotteryPage.vue |  65 +--------
 src/ui/Chat.vue                       | 182 +++++++++++++++++---------
 2 files changed, 119 insertions(+), 128 deletions(-)

diff --git a/src/components/VirtualLotteryPage.vue b/src/components/VirtualLotteryPage.vue
index 74f9124..771ad63 100644
--- a/src/components/VirtualLotteryPage.vue
+++ b/src/components/VirtualLotteryPage.vue
@@ -40,22 +40,14 @@
     <hr />
     <div class="middle-elements">
       <Attendees :attendees="attendees" class="outer-attendees" />
-      <Chat
-        class="outer-chat"
-        :chatHistory="chatHistory"
-        :historyPageSize="historyPageSize"
-        :usernameAllowed="usernameAllowed"
-        @loadMoreHistory="loadMoreHistory"
-        @message="sendMessage"
-        @username="setUsername"
-      />
+      <Chat class="outer-chat" />
     </div>
     <Vipps class="vipps" :amount="1" />
   </div>
 </template>
 
 <script>
-import { attendees, winners, getChatHistory, prelottery } from "@/api";
+import { attendees, winners, prelottery } from "@/api";
 import Chat from "@/ui/Chat";
 import Vipps from "@/ui/Vipps";
 import Attendees from "@/ui/Attendees";
@@ -74,21 +66,10 @@ export default {
       socket: null,
       attendeesFetched: false,
       winnersFetched: false,
-      chatHistory: [],
-      historyPage: 0,
-      historyPageSize: 100,
-      lastHistoryPage: false,
-      usernameAccepted: false,
-      username: null,
       wasDisconnected: false,
-      emitUsernameOnConnect: false,
       ticketsBought: {}
     };
   },
-  created() {
-    getChatHistory(0, this.historyPageSize)
-      .then(messages => this.chatHistory = messages);
-  },
   mounted() {
     this.track();
     this.getAttendees();
@@ -97,23 +78,10 @@ export default {
     this.socket = io(`${BASE_URL}`);
     this.socket.on("color_winner", msg => {});
 
-    this.socket.on("chat", msg => {
-      this.chatHistory.push(msg);
-    });
-
     this.socket.on("disconnect", msg => {
       this.wasDisconnected = true;
     });
 
-    this.socket.on("connect", msg => {
-      if (
-        this.emitUsernameOnConnect ||
-        (this.wasDisconnected && this.username != null)
-      ) {
-        this.setUsername(this.username);
-      }
-    });
-
     this.socket.on("winner", async msg => {
       this.currentWinnerDrawn = true;
       this.currentWinner = { name: msg.name, color: msg.color };
@@ -132,14 +100,6 @@ export default {
     this.socket.on("new_attendee", async msg => {
       this.getAttendees();
     });
-    this.socket.on("accept_username", accepted => {
-      this.usernameAccepted = accepted;
-      if (!accepted) {
-        this.username = null;
-      } else {
-        window.localStorage.setItem("username", this.username);
-      }
-    });
   },
   beforeDestroy() {
     this.socket.disconnect();
@@ -153,27 +113,6 @@ export default {
     }
   },
   methods: {
-    setUsername: function(username) {
-      this.username = username;
-      if (!this.socket || !this.socket.emit) {
-        this.emitUsernameOnConnect = true;
-        return;
-      }
-      this.socket.emit("username", { username });
-    },
-    sendMessage: function(msg) {
-      this.socket.emit("chat", { message: msg });
-    },
-    loadMoreHistory: function() {
-      const { historyPage, historyPageSize } = this;
-      const page = historyPage + 1;
-
-      getChatHistory(page * historyPageSize, historyPageSize)
-        .then(messages => {
-          this.chatHistory = messages.concat(this.chatHistory);
-          this.historyPage = page;
-        });
-    },
     getWinners: async function() {
       let response = await winners();
       if (response) {
diff --git a/src/ui/Chat.vue b/src/ui/Chat.vue
index 522e214..568e49e 100644
--- a/src/ui/Chat.vue
+++ b/src/ui/Chat.vue
@@ -2,23 +2,24 @@
   <div class="chat-container">
     <hr />
     <h2>Chat</h2>
-    <div class="history" ref="history">
+    <div class="history" ref="history" v-if="chatHistory.length > 0">
       <div class="opaque-skirt"></div>
-      <div v-if="existsMore" class="fetch-older-history">
-        <button @click="$emit('loadMoreHistory')">Hent eldre meldinger</button>
+      <div v-if="hasMorePages" class="fetch-older-history">
+        <button @click="loadMoreHistory">Hent eldre meldinger</button>
       </div>
+
       <div class="history-message"
         v-for="(history, index) in chatHistory"
         :key="`${history.username}-${history.timestamp}-${index}`"
       >
         <div>
-          <span class="user-name">{{ history.username }}</span>
+          <span class="username">{{ history.username }}</span>
           <span class="timestamp">{{ getTime(history.timestamp) }}</span>
         </div>
         <span class="message">{{ history.message }}</span>
       </div>
     </div>
-    <div v-if="usernameSet" class="input">
+    <div v-if="username" class="input">
       <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
       <button @click="sendMessage">Send</button>
       <button @click="removeUsername">Logg ut</button>
@@ -37,63 +38,103 @@
 </template>
 
 <script>
+import { getChatHistory } from "@/api";
+import io from "socket.io-client";
+
 export default {
-  props: {
-    usernameAllowed: {
-      type: Boolean
-    },
-    chatHistory: {
-      type: Array
-    },
-    historyPageSize: {
-      type: Number
-    }
-  },
   data() {
     return {
+      socket: null,
+      chatHistory: [],
+      hasMorePages: true,
       message: "",
+      page: 1,
+      pageSize: 10,
       temporaryUsername: null,
-      username: null,
-      usernameSet: false,
-      existsMore: true
+      username: null
     };
   },
+  created() {
+    getChatHistory(1, this.pageSize)
+      .then(resp => {
+        this.chatHistory = resp.messages;
+        this.hasMorePages = resp.total != resp.messages.length;
+      });
+    const username = window.localStorage.getItem('username');
+    if (username) {
+      this.username = username;
+      this.emitUsernameOnConnect = true;
+    }
+  },
   watch: {
     chatHistory: {
       handler: function(newVal, oldVal) {
-        if (this.$refs && this.$refs.history) {
-          const firstMessages = oldVal.length == 0;
-          const diffLargerThanOne = newVal.length - oldVal.length > 1;
-
-          setTimeout(() => {
-            if (firstMessages || diffLargerThanOne == false) {
-              this.scrollToBottomOfHistory();
-            } else {
-              this.scrollToStartOfNewMessages();
-              // what shows the load more button - if we scroll page and less than page size
-              // come back we have reached a limit
-              this.existsMore = newVal.length - oldVal.length == this.historyPageSize
-            }
-          }, 100);
+        if (oldVal.length == 0) {
+          this.scrollToBottomOfHistory();
+        }
+        else if (newVal && newVal.length == oldVal.length) {
+          if (this.isScrollPositionAtBottom()) {
+            this.scrollToBottomOfHistory();
+          }
+        } else {
+          const prevOldestMessage = oldVal[0];
+          this.scrollToMessageElement(prevOldestMessage);
         }
       },
       deep: true
     }
   },
   mounted() {
-    let username = window.localStorage.getItem("username");
-    if (username) {
-      this.username = username;
-      this.usernameSet = true;
-      this.$emit("username", username);
-    }
+    const BASE_URL = __APIURL__ || window.location.origin;
+    this.socket = io(`${BASE_URL}`);
+    this.socket.on("chat", msg => {
+      this.chatHistory.push(msg);
+    });
+
+    this.socket.on("disconnect", msg => {
+      this.wasDisconnected = true;
+    });
+
+    this.socket.on("connect", msg => {
+      if (
+        this.emitUsernameOnConnect ||
+        (this.wasDisconnected && this.username != null)
+      ) {
+        this.setUsername(this.username);
+      }
+    });
+
+    this.socket.on("accept_username", msg => {
+      const { reason, success, username } = msg;
+      this.usernameAccepted = success;
+
+      if (success !== true) {
+        this.username = null;
+        alert(reason)
+      } else {
+        this.usernameAllowed = true;
+        this.username = username;
+        window.localStorage.setItem("username", username);
+      }
+    });
   },
   methods: {
-    pad: function(num) {
+    loadMoreHistory() {
+      let { page, pageSize } = this;
+      page = page + 1;
+
+      getChatHistory(page, pageSize)
+        .then(resp => {
+          this.chatHistory = resp.messages.concat(this.chatHistory);
+          this.page = page;
+          this.hasMorePages = resp.total != this.chatHistory.length;
+        });
+    },
+    pad(num) {
       if (num > 9) return num;
       return `0${num}`;
     },
-    getTime: function(timestamp) {
+    getTime(timestamp) {
       let date = new Date(timestamp);
       const timeString = `${this.pad(date.getHours())}:${this.pad(
         date.getMinutes()
@@ -104,40 +145,50 @@ export default {
       }
       return `${date.toLocaleDateString()} ${timeString}`;
     },
-    sendMessage: function() {
-      this.$emit("message", this.message);
-      this.message = "";
+    sendMessage() {
+      const message = { message: this.message };
+      this.socket.emit("chat", message);
+      this.message = '';
+      this.scrollToBottomOfHistory();
     },
-    removeUsername: function() {
+    setUsername(username=undefined) {
+      if (this.temporaryUsername) {
+        username = this.temporaryUsername;
+      }
+      const message = { username: username };
+      this.socket.emit("username", message);
+    },
+    removeUsername() {
       this.username = null;
       this.temporaryUsername = null;
-      this.usernameSet = false;
       window.localStorage.removeItem("username");
-      this.$emit("username", null);
     },
-    setUsername: function() {
-      if (
-        this.temporaryUsername.length > 3 &&
-        this.temporaryUsername.length < 30
-      ) {
-        this.username = this.temporaryUsername;
-        this.usernameSet = true;
-        this.$emit("username", this.username);
+    isScrollPositionAtBottom() {
+      const { history } = this.$refs;
+      if (history) {
+        return history.offsetHeight + history.scrollTop >= history.scrollHeight;
       }
+      return false
     },
     scrollToBottomOfHistory() {
-      if (this.$refs && this.$refs.history) {
+      setTimeout(() => {
         const { history } = this.$refs;
         history.scrollTop = history.scrollHeight;
-      }
+      }, 1);
     },
-    scrollToStartOfNewMessages() {
-      const { history } = this.$refs;
-      const histLength = history.children.length;
-      const pages = Math.floor(histLength / 100);
+    scrollToMessageElement(message) {
+      const elemTimestamp = this.getTime(message.timestamp);
+      const self = this;
+      const getTimeStamp = (elem) => elem.getElementsByClassName('timestamp')[0].innerText;
+      const prevOldestMessageInNewList = (elem) => getTimeStamp(elem) == elemTimestamp;
 
-      const messageToScrollTo = history.children[histLength - ((pages * 100) + 3)]
-      history.scrollTop = messageToScrollTo.offsetTop;
+      setTimeout(() => {
+        const { history } = self.$refs;
+        const childrenElements = Array.from(history.getElementsByClassName('history-message'));
+
+        const elemInNewList = childrenElements.find(prevOldestMessageInNewList);
+        history.scrollTop = elemInNewList.offsetTop - 70
+      }, 1);
     }
   }
 };
@@ -179,6 +230,7 @@ input {
 .history {
   height: 75%;
   overflow-y: scroll;
+  position: relative;
 
   &-message {
     display: flex;
@@ -186,7 +238,7 @@ input {
     margin: 0.35rem 0;
     position: relative;
 
-    .user-name {
+    .username {
       font-weight: bold;
       font-size: 1.05rem;
       margin-right: 0.3rem;
@@ -217,7 +269,7 @@ input {
   & .fetch-older-history {
     display: flex;
     justify-content: center;
-    margin: 0.2rem 0 0.5rem;
+    margin: 1rem 0;
   }
 
   @include mobile {