) : (
<>
diff --git a/client/src/components/main/homePage/community/index.tsx b/client/src/components/main/homePage/community/index.tsx
index b02dcbb..e40db50 100644
--- a/client/src/components/main/homePage/community/index.tsx
+++ b/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 (
@@ -22,7 +23,9 @@ const CommunityHomePage = () => {
{/* Sidebar for members */}
{/* Button to chat with the community */}
-
Chat with Community
+
+ Chat with Community
+
{/* Display questions related to the community */}
diff --git a/client/src/hooks/useChat.ts b/client/src/hooks/useChat.ts
index cb3deee..e564ff2 100644
--- a/client/src/hooks/useChat.ts
+++ b/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('');
const [messages, setMessages] = useState<{ message: string; username: string; sendTo: string }[]>(
@@ -13,6 +16,12 @@ const useChat = () => {
const [send, setSend] = useState('');
const messageContainer = document.querySelector('.scrollable-container');
+ useEffect(() => {
+ if (pathname.includes('community')) {
+ setSend(community || '');
+ }
+ }, [community, pathname, setSend]);
+
const handleSendTo = (e: React.ChangeEvent) => {
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);
diff --git a/client/src/hooks/useQuestionPage.ts b/client/src/hooks/useQuestionPage.ts
index a5cd437..9940a06 100644
--- a/client/src/hooks/useQuestionPage.ts
+++ b/client/src/hooks/useQuestionPage.ts
@@ -1,8 +1,10 @@
+/* eslint-disable no-console */
import { useSearchParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import useUserContext from './useUserContext';
import { Answer, OrderType, Question } from '../types';
import { getQuestionsByFilter } from '../services/questionService';
+import { getUser } from '../services/userService';
/**
* Custom hook for managing the question page state, filtering, and real-time updates.
@@ -12,13 +14,14 @@ import { getQuestionsByFilter } from '../services/questionService';
* @returns setQuestionOrder - Function to set the sorting order of questions (e.g., newest, oldest).
*/
const useQuestionPage = () => {
- const { socket } = useUserContext();
+ const { socket, user } = useUserContext();
const [searchParams] = useSearchParams();
const [titleText, setTitleText] = useState('All Questions');
const [search, setSearch] = useState('');
const [questionOrder, setQuestionOrder] = useState('newest');
const [qlist, setQlist] = useState([]);
+ const [userCommunity, setUserCommunity] = useState('');
useEffect(() => {
let pageTitle = 'All Questions';
@@ -105,7 +108,22 @@ const useQuestionPage = () => {
};
}, [questionOrder, search, socket]);
- return { titleText, qlist, setQuestionOrder };
+ useEffect(() => {
+ const fetchUserCommunity = async () => {
+ if (!user?.username) return;
+
+ try {
+ const data = await getUser(user.username); // Fetch user data from MongoDB
+ setUserCommunity(data.community || '');
+ } catch (error) {
+ console.error('Error fetching community:', error);
+ }
+ };
+
+ fetchUserCommunity();
+ }, [user]);
+
+ return { titleText, qlist, setQuestionOrder, userCommunity };
};
export default useQuestionPage;