From 8cc89c68a41e3557b3587e401276f705b3b0391e Mon Sep 17 00:00:00 2001
From: lizzie <jones@MacBook-Air.local>
Date: Wed, 20 Nov 2024 19:17:41 -0500
Subject: [PATCH] fixed community and only send when user exists

---
 client/src/components/main/chat/Message.tsx |  6 +++++-
 client/src/components/main/chat/index.css   | 16 +++++++++++++++-
 client/src/components/main/chat/index.tsx   |  7 ++-----
 client/src/hooks/useChat.ts                 |  5 +++--
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/client/src/components/main/chat/Message.tsx b/client/src/components/main/chat/Message.tsx
index cfc37db..cb1cb26 100644
--- 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
index 74fcf53..8712820 100644
--- a/client/src/components/main/chat/index.css
+++ b/client/src/components/main/chat/index.css
@@ -62,7 +62,7 @@
 
 .chat-footer {
   background-color: #466694;
-  color: #FFFFFF;
+  color: #c6c6c6;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -70,6 +70,16 @@
   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
index d92a5a7..9137892 100644
--- 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
index 1743afe..d327f3b 100644
--- 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,