From 5f2bb80aea0baaa5ad0a2705009c424baba87393 Mon Sep 17 00:00:00 2001 From: lizzie Date: Sat, 16 Nov 2024 14:41:23 -0500 Subject: [PATCH] fixed header styling --- client/src/components/main/chat/index.css | 29 ++++-- client/src/components/main/chat/index.tsx | 108 +++++----------------- client/src/hooks/useChat.ts | 92 ++++++++++++++++++ 3 files changed, 136 insertions(+), 93 deletions(-) create mode 100644 client/src/hooks/useChat.ts diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css index 48eb3c9..ba62a68 100644 --- a/client/src/components/main/chat/index.css +++ b/client/src/components/main/chat/index.css @@ -16,7 +16,7 @@ } .ruled-paper { - background-size: 100% 3em; /* Adjusts spacing between horizontal lines */ + background-size: 100% 3em; background-color: #FFFCF5; flex-grow: 1; width: 100%; @@ -32,11 +32,21 @@ 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 { @@ -62,9 +72,9 @@ .chat-text-user, .chat-text-me { display: inline-block; font-size: 24px; - max-width: 100%; /* Ensure the width doesn’t stretch too far */ - white-space: nowrap; /* Prevents text from wrapping within a single message */ - margin-bottom: 5px; /* Adds space between messages */ + max-width: 100%; + white-space: nowrap; + margin-bottom: 5px; } .chat-text-user { @@ -76,19 +86,20 @@ } .chat-text-me { - float: right; /* Aligns the chat bubble to the right */ + float: right; padding: 3px 15px; background: #DFAEA1; color: #fff !important; - border-radius: 20px 20px 3px 20px; - margin-bottom: 10px; /* Optional: Adds space below the bubble */ - clear: both; /* Ensures no other floated elements affect the layout */ + 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; } diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 3883b82..7ece429 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -1,100 +1,40 @@ -import React, { useEffect, useState } from 'react'; import './index.css'; import { FaCaretUp, FaCaretDown } from 'react-icons/fa'; import { useLocation } from 'react-router-dom'; -import { query, collection, orderBy, onSnapshot, addDoc, getDoc, doc } from 'firebase/firestore'; -import { db } from '../../../firebaseConfig'; import Message from './Message'; -import useUserContext from '../../../hooks/useUserContext'; +import useChat from '../../../hooks/useChat'; const ChatPage = () => { const { pathname } = useLocation(); - const { user } = useUserContext(); - const [currentMessage, setCurrentMessage] = useState(''); - const [messages, setMessages] = useState<{ message: string; username: string; sendTo: string }[]>( - [], - ); - const [send, setSend] = useState(''); - const messageContainer = document.querySelector('.scrollable-container'); - - const handleSendTo = (e: React.ChangeEvent) => { - setSend(e.target.value); - }; - - const handleInputChange = (e: React.ChangeEvent) => { - setCurrentMessage(e.target.value); - }; - - const saveMessagesToUserAccount = async (message: string, sendTo: string) => { - try { - if (user && user.username) { - await addDoc(collection(db, 'messages'), { - username: user.username, - message, - sendTo, - timestamp: new Date(), - }); - setCurrentMessage(''); // Clear the input after sending - } else { - console.error('User not authenticated or username missing'); - } - } catch (error) { - console.error('Error saving message:', error); - } - }; - - useEffect(() => { - console.log('Messages useEffect triggered'); - - if (!user?.username) return; - - // 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')); - - 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.username === user.username && msg.sendTo === send) || - (msg.sendTo === user.username && msg.username === send), - ); - setMessages(loadedMessages); - }); - - // Cleanup the snapshot listener on component unmount - // eslint-disable-next-line consistent-return - return () => unsubscribe(); - }, [user, send]); - - const scrollUp = () => { - messageContainer?.scrollBy(0, -100); - }; - - const scrollDown = () => { - messageContainer?.scrollBy(0, 100); - }; + const { + currentMessage, + messages, + send, + handleSendTo, + handleInputChange, + scrollUp, + saveMessagesToUserAccount, + scrollDown, + } = useChat(); return (
- chatting now: {pathname.includes('community') ? ( - community + + chatting now: community + ) : ( - + <> + chatting now: + + )}
diff --git a/client/src/hooks/useChat.ts b/client/src/hooks/useChat.ts new file mode 100644 index 0000000..8c3ffac --- /dev/null +++ b/client/src/hooks/useChat.ts @@ -0,0 +1,92 @@ +import { useEffect, useState } from 'react'; +import { addDoc, collection, onSnapshot, orderBy, query } from 'firebase/firestore'; +import useUserContext from './useUserContext'; +import { db } from '../firebaseConfig'; + +const useChat = () => { + const { user } = useUserContext(); + const [currentMessage, setCurrentMessage] = useState(''); + const [messages, setMessages] = useState<{ message: string; username: string; sendTo: string }[]>( + [], + ); + const [send, setSend] = useState(''); + const messageContainer = document.querySelector('.scrollable-container'); + + const handleSendTo = (e: React.ChangeEvent) => { + setSend(e.target.value); + }; + + const handleInputChange = (e: React.ChangeEvent) => { + setCurrentMessage(e.target.value); + }; + + const saveMessagesToUserAccount = async (message: string, sendTo: string) => { + try { + if (user && user.username) { + await addDoc(collection(db, 'messages'), { + username: user.username, + message, + sendTo, + timestamp: new Date(), + }); + setCurrentMessage(''); // Clear the input after sending + } else { + console.error('User not authenticated or username missing'); + } + } catch (error) { + console.error('Error saving message:', error); + } + }; + + useEffect(() => { + console.log('Messages useEffect triggered'); + + if (!user?.username) return; + + // 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')); + + 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.username === user.username && msg.sendTo === send) || + (msg.sendTo === user.username && msg.username === send), + ); + setMessages(loadedMessages); + }); + + // Cleanup the snapshot listener on component unmount + // eslint-disable-next-line consistent-return + return () => unsubscribe(); + }, [user, send]); + + const scrollUp = () => { + messageContainer?.scrollBy(0, -100); + }; + + const scrollDown = () => { + messageContainer?.scrollBy(0, 100); + }; + + return { + user, + currentMessage, + messages, + send, + handleSendTo, + handleInputChange, + scrollUp, + saveMessagesToUserAccount, + scrollDown, + }; +}; + +export default useChat;