From 9fb66786564c0e00b1b8369396dacd5d5c3152e2 Mon Sep 17 00:00:00 2001
From: Simon Huang <shuang85497@gmail.com>
Date: Sat, 15 Aug 2020 17:05:42 -0400
Subject: [PATCH] implemented sendMessage to populate database

---
 schema.ts               |  7 +++++++
 src/components/Chat.tsx | 25 +++++++++++++++++++++----
 src/pages/Room.tsx      |  7 +++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/schema.ts b/schema.ts
index e92352e..48706b2 100644
--- a/schema.ts
+++ b/schema.ts
@@ -6,6 +6,13 @@ const collection = {
     roomId: {
       createdAt: 'timestamp',
       ownerId: 'userId',
+      messages: {
+        messageId: {
+          createdAt: 'timestamp',
+          senderId: 'userId',
+          content: 'Message content',
+        },
+      },
     },
   },
 };
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 9da69ae..e402a2a 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -1,8 +1,25 @@
 import { IonButton, IonCol, IonContent, IonFooter, IonGrid, IonRow, IonTextarea } from '@ionic/react';
-import React from 'react';
+import React, { useState } from 'react';
+import { db, timestamp } from '../services/firebase';
 import './Chat.css';
 
-const Chat: React.FC = () => {
+type ChatProps = {
+  roomId: string;
+  userId: string;
+};
+
+const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
+  const [message, setMessage] = useState('');
+
+  const sendMessage = async () => {
+    const messageId = await db.collection('rooms').doc(roomId).collection('messages').add({
+      createdAt: timestamp,
+      senderId: userId,
+      content: message,
+    });
+    console.log(messageId);
+  };
+
   return (
     <>
       <IonContent>
@@ -37,10 +54,10 @@ const Chat: React.FC = () => {
         <IonGrid>
           <IonRow>
             <IonCol size="9">
-              <IonTextarea></IonTextarea>
+              <IonTextarea onIonChange={(e) => setMessage(e.detail.value!)}></IonTextarea>
             </IonCol>
             <IonCol size="3" class="send-msg">
-              <IonButton expand="block" color="primary" class="send-button">
+              <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
                 Send
               </IonButton>
             </IonCol>
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
index 85bd09a..f360802 100644
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@@ -100,7 +100,6 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
         await refUser.onDisconnect().remove();
 
         // Remove the room if the leaving user is the last in the room
-        console.log('userCount: ' + userCount);
         if (userCount <= 1) {
           await refRoom.onDisconnect().remove();
           await refAvailable.onDisconnect().remove();
@@ -123,7 +122,11 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
           <IonTitle>Turtle</IonTitle>
         </IonToolbar>
       </IonHeader>
-      {loading ? <IonContent className="ion-padding">Loading...</IonContent> : <Chat></Chat>}
+      {loading ? (
+        <IonContent className="ion-padding">Loading...</IonContent>
+      ) : (
+        <Chat roomId={roomId} userId={userId}></Chat>
+      )}
     </IonPage>
   );
 };