From 87a4370e9c338f40b28aa14d7069807b0291d524 Mon Sep 17 00:00:00 2001
From: Simon Huang <shuang85497@gmail.com>
Date: Sun, 23 Aug 2020 16:15:29 -0400
Subject: [PATCH] fixed chat textbox UI and scrolling to bottom

---
 src/components/Chat.css | 18 +++++++------
 src/components/Chat.tsx | 57 +++++++++++++++++++++++++----------------
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/components/Chat.css b/src/components/Chat.css
index f73b792..7f9ee0a 100644
--- a/src/components/Chat.css
+++ b/src/components/Chat.css
@@ -27,10 +27,17 @@ ion-textarea {
   padding: 0;
 }
 
-.input-card {
-  position: absolute;
-  bottom: 0px;
+.input-card-row {
+  position: fixed;
   width: 100%;
+}
+
+.input-card-col {
+  margin: 0;
+  border-top: solid 1px #999;
+}
+
+.input-card-content {
   padding: 0;
 }
 
@@ -39,11 +46,6 @@ ion-textarea {
   height: 100%;
 }
 
-.message-input {
-  margin: 0;
-  border-top: solid 1px #bbb;
-}
-
 .my-msg {
   background: var(--ion-color-primary);
   color: #fff;
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 5e5123c..27d6a5c 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -1,4 +1,4 @@
-import { IonButton, IonCard, IonCardContent, IonCol, IonGrid, IonRow, IonTextarea } from '@ionic/react';
+import { IonButton, IonCard, IonCardContent, IonCol, IonContent, IonGrid, IonRow, IonTextarea } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { currTime, db, timestamp } from '../services/firebase';
 import './Chat.css';
@@ -60,7 +60,7 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
     };
   }, [room]);
 
-  // Only update array containing all messages when there are new messages
+  // Only update array containing all messages ('chats') when there are new messages
   useEffect(() => {
     if (prevMessages !== newMessages) {
       setPrevMessages(newMessages);
@@ -68,6 +68,17 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
     }
   }, [prevMessages, newMessages, chats]);
 
+  // Always scroll to most recent chat message (bottom)
+  useEffect(() => {
+    console.log('scrolling');
+    let content = document.querySelector('ion-content');
+
+    // Set timeout because DOM doesn't update immediately after 'chats' state is updated
+    setTimeout(() => {
+      content?.scrollToBottom(200);
+    }, 100);
+  }, [chats]);
+
   // Send message to database
   const sendMessage = async () => {
     await db.collection('rooms').doc(roomId).collection('messages').add({
@@ -83,7 +94,7 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
 
   return (
     <IonCard class="chat-card">
-      <IonCardContent class="message-card">
+      <IonContent class="message-card">
         <IonGrid class="message-grid">
           {!loading ? (
             chats.map((chat) => {
@@ -100,25 +111,27 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
             <></>
           )}
         </IonGrid>
-      </IonCardContent>
-      <IonCardContent class="input-card">
-        <IonGrid class="message-input">
-          <IonRow>
-            <IonCol size="9">
-              <IonTextarea
-                onIonChange={(e) => setMessage(e.detail.value!)}
-                value={message}
-                class="textarea"
-              ></IonTextarea>
-            </IonCol>
-            <IonCol size="3" class="send-msg">
-              <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
-                Send
-              </IonButton>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
-      </IonCardContent>
+      </IonContent>
+      <IonRow class="input-card-row">
+        <IonCol size="12" sizeLg="3" class="input-card-col">
+          <IonCardContent class="input-card-content">
+            <IonRow>
+              <IonCol size="9">
+                <IonTextarea
+                  onIonChange={(e) => setMessage(e.detail.value!)}
+                  value={message}
+                  class="textarea"
+                ></IonTextarea>
+              </IonCol>
+              <IonCol size="3" class="send-msg">
+                <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
+                  Send
+                </IonButton>
+              </IonCol>
+            </IonRow>
+          </IonCardContent>
+        </IonCol>
+      </IonRow>
     </IonCard>
   );
 };