added owner crown to chat

src/components/Chatbox.tsx

@@ -5,11 +5,12 @@ import './Chatbox.css';
 import Messages from './Messages';
 
 type ChatboxProps = {
+  ownerId: string;
   roomId: string;
   userId: string;
 };
 
-const Chat: React.FC<ChatboxProps> = ({ roomId, userId }) => {
+const Chat: React.FC<ChatboxProps> = ({ ownerId, roomId, userId }) => {
   const [message, setMessage] = useState(''); // Message to be sent
 
   // Send message to database
@@ -35,7 +36,7 @@ const Chat: React.FC<ChatboxProps> = ({ roomId, userId }) => {
 
   return (
     <IonCard class="chat-card">
-      <Messages roomId={roomId} userId={userId}></Messages>
+      <Messages ownerId={ownerId} roomId={roomId} userId={userId}></Messages>
       <IonFooter>
         <IonRow>
           <IonCol size="12" sizeSm="9" class="message-col">

src/components/Messages.css

@@ -14,6 +14,7 @@ ion-col {
 .message-grid {
   margin-right: 0;
   height: 100%;
+  user-select: auto;
 }
 
 .right-align {

src/components/Messages.tsx

@@ -4,6 +4,7 @@ import { currTime, db } from '../services/firebase';
 import './Messages.css';
 
 type MessagesProps = {
+  ownerId: string;
   roomId: string;
   userId: string;
 };
@@ -15,8 +16,7 @@ type Message = {
   content: string;
 };
 
-const Messages: React.FC<MessagesProps> = ({ roomId, userId }) => {
-  const [room] = useState(roomId);
+const Messages: React.FC<MessagesProps> = ({ ownerId, roomId, userId }) => {
   const [chats, setChats] = useState<Message[]>([
     { id: '', senderId: userId, sender: '', content: 'You have joined the room.' },
   ]); // All received messages
@@ -36,7 +36,7 @@ const Messages: React.FC<MessagesProps> = ({ roomId, userId }) => {
   useEffect(() => {
     const chatUnsubscribe = db
       .collection('rooms')
-      .doc(room)
+      .doc(roomId)
       .collection('messages')
       .orderBy('createdAt')
       .where('createdAt', '>', currTime)
@@ -48,10 +48,15 @@ const Messages: React.FC<MessagesProps> = ({ roomId, userId }) => {
             const data = change.doc.data();
             const user = await db.collection('users').doc(data.senderId).get();
             if (data.type !== 'updateState') {
+              let displayName = user.data()?.name;
+              if (data.senderId === ownerId) {
+                displayName = displayName + ' 👑';
+              }
+
               newMsgs.push({
                 id: change.doc.id,
                 senderId: data.senderId,
-                sender: user.data()?.name,
+                sender: displayName,
                 content: data.content,
               });
             }
@@ -66,11 +71,12 @@ const Messages: React.FC<MessagesProps> = ({ roomId, userId }) => {
     return () => {
       chatUnsubscribe();
     };
-  }, [room]);
+  }, [roomId, ownerId]);
 
   // Always scroll to most recent chat message (bottom)
   useEffect(() => {
     let content = contentRef.current;
+    console.log(content);
 
     // Set timeout because DOM doesn't update immediately after 'chats' state is updated
     setTimeout(() => {

src/pages/Room.tsx

@@ -154,7 +154,7 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
               <VideoPlayer ownerId={ownerId} userId={userId} roomId={roomId} stateId={stateId}></VideoPlayer>
             </IonCol>
             <IonCol size="12" sizeLg="3" class="chat-col">
-              <Chat roomId={roomId} userId={userId}></Chat>
+              <Chat ownerId={ownerId} roomId={roomId} userId={userId}></Chat>
             </IonCol>
           </IonRow>
         </IonGrid>