fixed community and only send when user exists

neu-cs4530 · Nov 21, 2024 · 8cc89c6 · 8cc89c6
1 parent 14c3cec
commit 8cc89c6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/client/src/components/main/chat/Message.tsx b/client/src/components/main/chat/Message.tsx
@@ -8,7 +8,11 @@ const Message = ({ message, username }: { message: string; username: string }) =
   return (
     <>
       <div className={`${username === user?.username ? 'chat-text-me' : 'chat-text-user'}`}>
-        {pathname.includes('community') && <p className='user-name'>{username}</p>}
+        {pathname.includes('community') && (
+          <p className={`${username === user?.username ? 'user-name-me' : 'user-name'}`}>
+            {username}
+          </p>
+        )}
         <p className='message'>{message}</p>
       </div>
       <br />

diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css
@@ -62,14 +62,24 @@
 
 .chat-footer {
   background-color: #466694;
-  color: #FFFFFF;
+  color: #c6c6c6;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
 
+.user-name {
+  font-size: 15px;
+  color: #6b6b6b;
+}
+
+.user-name-me {
+  font-size: 15px;
+  color: #f0eded;
+}
+
 .chat-text-user, .chat-text-me {
   display: inline-block;
   font-size: 24px;
@@ -84,6 +94,8 @@
   background: #f1f1f1;
   color: #000 !important;
   border-radius: 20px 20px 20px 3px;
+  margin-left: 10px;
+  font-size: 18px;
 }
 
 .chat-text-me {
@@ -94,6 +106,8 @@
   border-radius: 30px 20px 3px 30px;
   margin-bottom: 10px;
   clear: both;
+  margin-right: 10px;
+  font-size: 18px;
 }
 
 .username {

diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx
@@ -1,15 +1,12 @@
 import './index.css';
 import { FaCaretUp, FaCaretDown } from 'react-icons/fa';
-import { useLocation, useParams } from 'react-router-dom';
-import { useState } from 'react';
 import Message from './Message';
 import useChat from '../../../hooks/useChat';
 
 const ChatPage = () => {
-  const { pathname } = useLocation();
-  const { community } = useParams();
-
   const {
+    pathname,
+    community,
     currentMessage,
     messages,
     send,

diff --git a/client/src/hooks/useChat.ts b/client/src/hooks/useChat.ts
@@ -68,8 +68,7 @@ const useChat = () => {
       if (
         user &&
         user.username &&
-        listOfUsers.includes(sendTo) &&
-        listOfUsers.includes(searchTerm)
+        ((listOfUsers.includes(sendTo) && listOfUsers.includes(searchTerm)) || community)
       ) {
         await addDoc(collection(db, 'messages'), {
           username: user.username,
@@ -138,6 +137,8 @@ const useChat = () => {
   };
 
   return {
+    pathname,
+    community,
     user,
     currentMessage,
     messages,