implemented sendMessage to populate database

schema.ts

@@ -6,6 +6,13 @@ const collection = {
     roomId: {
       createdAt: 'timestamp',
       ownerId: 'userId',
+      messages: {
+        messageId: {
+          createdAt: 'timestamp',
+          senderId: 'userId',
+          content: 'Message content',
+        },
+      },
     },
   },
 };

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>

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>
   );
 };