chat with communities works

client/src/components/fakestackoverflow.tsx

@@ -63,7 +63,7 @@ const FakeStackOverflow = ({ socket }: { socket: FakeSOSocket | null }) => {
               </ProtectedRoute>
             }>
             <Route path='home' element={<CommunityHomePage />} /> {/* should become community */}
-            <Route path='chat/community' element={<ChatPage />} />
+            <Route path='chat/community/:community' element={<ChatPage />} />
             <Route path='tags' element={<TagPage />} />
             <Route path='questions' element={<QuestionPage />} />
             <Route path='chat' element={<ChatPage />} />

client/src/components/main/chat/index.css

@@ -1,127 +1,127 @@
 .chat-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    min-height: 90vh;
-    background-color: #FFFCF5;
-    overflow-y: scroll;
-  }
-
-  .scrollable-container {
-    width: 100%;
-    height: 200px;
-    overflow-y: scroll;
-  }
-
-  .ruled-paper {
-    background-size: 100% 3em;
-    background-color: #FFFCF5;
-    flex-grow: 1;
-    width: 100%;
-    padding-top: 0.2rem;
-    line-height: 1.2;
-  }
-
-
-  .carrot {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 20px;
-  }
-
-  .community-title {
-    margin: 0 auto; /* Horizontally center */
-    background: #6D89B0;
-    text-align: start;
-    padding: 10px;
-    border-radius: 5px;
-    color: white;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .chat-title {
-    padding: 20px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .chat-header {
-    background-color: #466694;
-    color: #FFFFFF;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .chat-footer {
-    background-color: #466694;
-    color: #FFFFFF;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .chat-text-user, .chat-text-me {
-    display: inline-block;
-    font-size: 24px;
-    max-width: 100%;
-    white-space: nowrap;
-    margin-bottom: 5px;
-  }
-
-  .chat-text-user {
-    text-align: left !important;
-    padding: 3px 15px;
-    background: #f1f1f1;
-    color: #000 !important;
-    border-radius: 20px 20px 20px 3px;
-  }
-
-  .chat-text-me {
-    float: right;
-    padding: 3px 15px;
-    background: #DFAEA1;
-    color: #fff !important;
-    border-radius: 30px 20px 3px 30px;
-    margin-bottom: 10px;
-    clear: both;
-  }
-
-  .username {
-    background: #6D89B0;
-    color: white;
-    font-size: 24px;
-    max-width: 975px;
-    font-weight: bold;
-  }
-
-  .username::placeholder {
-    color: white;
-  }
-
-  .message {
-    display: block;
-    width: 100%;
-  }
-
-  .send {
-    background: #BABDE2;
-    border-radius: 10px;
-    padding: 5px;
-    color: white;
-    margin-right: 20px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-
-  .send:hover {
-    background-color: #9498B5;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-height: 90vh;
+  background-color: #FFFCF5;
+  overflow-y: scroll;
+}
+
+.scrollable-container {
+  width: 100%;
+  height: 200px;
+  overflow-y: scroll;
+}
+
+.ruled-paper {
+  background-size: 100% 3em;
+  background-color: #FFFCF5;
+  flex-grow: 1;
+  width: 100%;
+  padding-top: 0.2rem;
+  line-height: 1.2;
+}
+
+
+.carrot {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 20px;
+}
+
+.community-title {
+  margin: 0 auto; /* Horizontally center */
+  background: #6D89B0;
+  text-align: start;
+  padding: 10px;
+  border-radius: 5px;
+  color: white;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.chat-title {
+  padding: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.chat-header {
+  background-color: #466694;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.chat-footer {
+  background-color: #466694;
+  color: #FFFFFF;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.chat-text-user, .chat-text-me {
+  display: inline-block;
+  font-size: 24px;
+  max-width: 100%;
+  white-space: nowrap;
+  margin-bottom: 5px;
+}
+
+.chat-text-user {
+  text-align: left !important;
+  padding: 3px 15px;
+  background: #f1f1f1;
+  color: #000 !important;
+  border-radius: 20px 20px 20px 3px;
+}
+
+.chat-text-me {
+  float: right;
+  padding: 3px 15px;
+  background: #DFAEA1;
+  color: #fff !important;
+  border-radius: 30px 20px 3px 30px;
+  margin-bottom: 10px;
+  clear: both;
+}
+
+.username {
+  background: #6D89B0;
+  color: white;
+  font-size: 24px;
+  max-width: 975px;
+  font-weight: bold;
+}
+
+.username::placeholder {
+  color: white;
+}
+
+.message {
+  display: block;
+  width: 100%;
+}
+
+.send {
+  background: #BABDE2;
+  border-radius: 10px;
+  padding: 5px;
+  color: white;
+  margin-right: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.send:hover {
+  background-color: #9498B5;
+}

client/src/components/main/chat/index.tsx

@@ -1,11 +1,13 @@
 import './index.css';
 import { FaCaretUp, FaCaretDown } from 'react-icons/fa';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import Message from './Message';
 import useChat from '../../../hooks/useChat';
 
 const ChatPage = () => {
   const { pathname } = useLocation();
+  const { community } = useParams();
+
   const {
     currentMessage,
     messages,
@@ -22,7 +24,7 @@ const ChatPage = () => {
       <div className='chat-header d-flex'>
         {pathname.includes('community') ? (
           <span className='chat-title'>
-            chatting now: <span className='community-title'>community</span>
+            chatting now: <span className='community-title'>{community}</span>
           </span>
         ) : (
           <>

client/src/components/main/homePage/community/index.tsx

@@ -1,6 +1,7 @@
 import './index.css';
 import React from 'react';
 // import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import MembersSidebar from './membersSideBar';
 import useQuestionPage from '../../../../hooks/useQuestionPage';
 import QuestionView from './questions';
@@ -11,7 +12,7 @@ import QuestionView from './questions';
  */
 const CommunityHomePage = () => {
   // Use the custom hook to manage the state and fetch community-specific questions
-  const { titleText, qlist } = useQuestionPage();
+  const { titleText, qlist, userCommunity } = useQuestionPage();
 
   return (
     <div className='home-page-container'>
@@ -22,7 +23,9 @@ const CommunityHomePage = () => {
       {/* Sidebar for members */}
       <MembersSidebar />
       {/* Button to chat with the community */}
-      <button className='chat-button'>Chat with Community</button>
+      <Link className='chat-button' to={`/chat/community/${userCommunity}`}>
+        Chat with Community
+      </Link>
 
       {/* Display questions related to the community */}
       <div>

client/src/hooks/useChat.ts

@@ -1,10 +1,13 @@
 /* eslint-disable no-console */
 import { useEffect, useState } from 'react';
 import { addDoc, collection, onSnapshot, orderBy, query } from 'firebase/firestore';
+import { useLocation, useParams } from 'react-router-dom';
 import useUserContext from './useUserContext';
 import { db } from '../firebaseConfig';
 
 const useChat = () => {
+  const { pathname } = useLocation();
+  const { community } = useParams();
   const { user } = useUserContext();
   const [currentMessage, setCurrentMessage] = useState<string>('');
   const [messages, setMessages] = useState<{ message: string; username: string; sendTo: string }[]>(
@@ -13,6 +16,12 @@ const useChat = () => {
   const [send, setSend] = useState<string>('');
   const messageContainer = document.querySelector('.scrollable-container');
 
+  useEffect(() => {
+    if (pathname.includes('community')) {
+      setSend(community || '');
+    }
+  }, [community, pathname, setSend]);
+
   const handleSendTo = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSend(e.target.value);
   };
@@ -22,6 +31,7 @@ const useChat = () => {
   };
 
   const saveMessagesToUserAccount = async (message: string, sendTo: string) => {
+    console.log('in save messages');
     try {
       if (user && user.username) {
         await addDoc(collection(db, 'messages'), {
@@ -45,6 +55,24 @@ const useChat = () => {
     // Query to retrieve messages where the current user is either the sender (username) or receiver (sendTo)
     const q = query(collection(db, 'messages'), orderBy('timestamp', 'asc'));
 
+    if (pathname.includes('community') && community) {
+      const unsubscribe = onSnapshot(q, querySnapshot => {
+        const loadedMessages = querySnapshot.docs
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          .map(doc => ({
+            message: doc.data().message,
+            username: doc.data().username,
+            sendTo: doc.data().sendTo,
+            timestamp: doc.data().timestamp,
+          }))
+          .filter(msg => msg.sendTo === community);
+        setMessages(loadedMessages);
+      });
+
+      // eslint-disable-next-line consistent-return
+      return () => unsubscribe();
+    }
+
     const unsubscribe = onSnapshot(q, querySnapshot => {
       const loadedMessages = querySnapshot.docs
         // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -62,10 +90,9 @@ const useChat = () => {
       setMessages(loadedMessages);
     });
 
-    // Cleanup the snapshot listener on component unmount
     // eslint-disable-next-line consistent-return
     return () => unsubscribe();
-  }, [user, send]);
+  }, [user, send, pathname, community]);
 
   const scrollUp = () => {
     messageContainer?.scrollBy(0, -100);