From 096461be099dd1ff771b86975a4440c88b8c46c4 Mon Sep 17 00:00:00 2001 From: lizzie Date: Fri, 8 Nov 2024 21:28:02 -0500 Subject: [PATCH 1/9] added some styling --- client/src/components/header/index.tsx | 3 + .../login/newUser/chooseTagsPage/index.css | 138 +++++++++--------- .../login/newUser/chooseTagsPage/index.tsx | 22 +-- 3 files changed, 74 insertions(+), 89 deletions(-) diff --git a/client/src/components/header/index.tsx b/client/src/components/header/index.tsx index 8579f25..1103212 100644 --- a/client/src/components/header/index.tsx +++ b/client/src/components/header/index.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-console */ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import useHeader from '../../hooks/useHeader'; import './index.css'; @@ -10,8 +11,10 @@ import './index.css'; */ const Header = () => { const { val, handleInputChange, handleKeyDown } = useHeader(); + const navigate = useNavigate(); const handleLogout = () => { + navigate('/'); console.log('Logging out'); }; diff --git a/client/src/components/login/newUser/chooseTagsPage/index.css b/client/src/components/login/newUser/chooseTagsPage/index.css index 17683af..c95124e 100644 --- a/client/src/components/login/newUser/chooseTagsPage/index.css +++ b/client/src/components/login/newUser/chooseTagsPage/index.css @@ -1,77 +1,71 @@ .container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - text-align: center; - padding: 20px; - position: relative; - } - .title { - margin-top: -40px; - font-size: 24px; - margin-bottom: 20px; - } - - .tag-list { - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - text-align: center; - display: flex; - gap: 20px; - width: 100%; - flex-wrap: wrap; - } - .tag-pill { - background-color: #d4a5a5; - color: white; - border-radius: 40px; - padding: 1px; - width: 150px; - height: 55px; - text-align: center; - font-size: 17px; - display: flex; - align-items: center; - justify-content: center; - } - - .tag-pill:hover { - background-color: #f4ebe9; - color: #8c6e6e; - border-color: #d4a5a5; - } + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + text-align: center; + padding: 20px; +} - .button-container { - position: absolute; - bottom: 70px; - right: 40px; - } +.title { + padding-top: 80px; + font-size: 24px; +} - .next-button { - padding: 10px 20px; - font-size: 16px; - cursor: pointer; - background-color: #466694; - width: 150px; - height: 45px; - color: white; - border: none; - border-radius: 5px; - } - - .next-button:hover { - background-color: #324B73; - } +.tag-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; + margin-bottom: 20px; + max-width: 500px; + margin: 0; + padding: 0; +} - .next-button:active { - background-color: #466694; - } +.tag-pill { + background-color: #d4a5a5; + color: white; + border-radius: 40px; + padding: 10px 20px; /* Increased padding to make tags more uniform */ + text-align: center; + font-size: 17px; + display: flex; + align-items: center; + width: 100px; + height: 55px; + display: flex; + align-items: center; + justify-content: center; +} - .button-text { - text-decoration: none; - color: white; - } \ No newline at end of file +.tag-pill:hover { + background-color: #f4ebe9; + color: #8c6e6e; +} + +.button-container { + margin-top: 30px; /* Adds space between the tags and button */ +} + +.next-button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #466694; + color: white; + border: none; + border-radius: 5px; + text-decoration: none; + display: inline-block; /* Ensures button width is consistent */ +} + +.next-button:hover { + background-color: #324B73; +} + +.button-text { + text-decoration: none; + color: white; +} \ No newline at end of file diff --git a/client/src/components/login/newUser/chooseTagsPage/index.tsx b/client/src/components/login/newUser/chooseTagsPage/index.tsx index f259a36..73bc0c5 100644 --- a/client/src/components/login/newUser/chooseTagsPage/index.tsx +++ b/client/src/components/login/newUser/chooseTagsPage/index.tsx @@ -10,27 +10,15 @@ const ChooseTagsPage = () => { const { tagNames } = useTagNames(); return (
-
-

what topics interest you? choose tags below:

-
+

what topics interest you? choose tags below:

-
    - {tagNames && - tagNames.map((tag, index) => ( -
  • - {tag.name} -
    • - ))} -
-
- {/* */} +
+ + Chat with Community +
); From 0b0d32830f69605080081ccdac3597009b9003a0 Mon Sep 17 00:00:00 2001 From: lizzie Date: Tue, 12 Nov 2024 16:29:28 -0500 Subject: [PATCH 3/9] starting to implement firebase --- .../src/components/main/chat/SendMessage.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 client/src/components/main/chat/SendMessage.tsx diff --git a/client/src/components/main/chat/SendMessage.tsx b/client/src/components/main/chat/SendMessage.tsx new file mode 100644 index 0000000..1182cfc --- /dev/null +++ b/client/src/components/main/chat/SendMessage.tsx @@ -0,0 +1,24 @@ +import React, { useState } from "react"; +import { addDoc, collection, serverTimestamp } from 'firebase/firestore'; +import { auth, db } from 'firebaseConfig'; + +const SendMessage = () => { + const [message, sentMessage] = useState(''); + + return ( +
+ + + +
+ ); +}; +export default SendMessage; From c8ea58bba7f547b44d3a553e2d80bf1eef261c78 Mon Sep 17 00:00:00 2001 From: lizzie Date: Tue, 12 Nov 2024 21:31:02 -0500 Subject: [PATCH 4/9] added chat with firebase --- client/src/components/main/chat/Message.tsx | 15 ++++ .../src/components/main/chat/SendMessage.tsx | 35 ++++---- client/src/components/main/chat/index.tsx | 84 ++++++++++++++++--- 3 files changed, 104 insertions(+), 30 deletions(-) create mode 100644 client/src/components/main/chat/Message.tsx diff --git a/client/src/components/main/chat/Message.tsx b/client/src/components/main/chat/Message.tsx new file mode 100644 index 0000000..abae3d5 --- /dev/null +++ b/client/src/components/main/chat/Message.tsx @@ -0,0 +1,15 @@ +import { useLocation } from 'react-router-dom'; +import useUserContext from '../../../hooks/useUserContext'; + +const Message = ({ message, username }: { message: string; username: string }) => { + const { user } = useUserContext(); + const { pathname } = useLocation(); + + return ( +
+ {pathname.includes('community') ?

{user?.username}

: ''} + {message} +
+ ); +}; +export default Message; diff --git a/client/src/components/main/chat/SendMessage.tsx b/client/src/components/main/chat/SendMessage.tsx index 1182cfc..872ec3f 100644 --- a/client/src/components/main/chat/SendMessage.tsx +++ b/client/src/components/main/chat/SendMessage.tsx @@ -1,24 +1,19 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from 'react'; import { addDoc, collection, serverTimestamp } from 'firebase/firestore'; -import { auth, db } from 'firebaseConfig'; +import { auth, db } from '../../../firebaseConfig'; -const SendMessage = () => { - const [message, sentMessage] = useState(''); - - return ( -
- - - -
- ); +const SendMessage = async (message: string, sendTo: string) => { + if (message.trim() === '') { + alert('Enter valid message'); + return; + } + const user = auth.currentUser; + await addDoc(collection(db, 'messages'), { + text: message, + email: user, + sendTo, + createdAt: serverTimestamp(), + }); + // scroll?.current.scrollIntoView({ behavior: "smooth" }); }; export default SendMessage; diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 3744021..db2e0c3 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -1,19 +1,66 @@ -import React, { useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import './index.css'; import { FaCaretUp, FaCaretDown } from 'react-icons/fa'; -import { NavLink, useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; +import { query, collection, orderBy, onSnapshot, addDoc } from 'firebase/firestore'; +import { db } from '../../../firebaseConfig'; +import Message from './Message'; +import useUserContext from '../../../hooks/useUserContext'; const ChatPage = () => { const { pathname } = useLocation(); + const { user } = useUserContext(); + const [currentMessage, setCurrentMessage] = useState(''); + const [messages, setMessages] = useState([]); + const [send, setSend] = useState(''); + + // ALSO NEEDS TO UPDATE THE MESSAGES SEEN + 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(() => { + if (!user?.username) return; + + const q = query(collection(db, 'messages'), orderBy('timestamp', 'asc')); + + const unsubscribe = onSnapshot(q, querySnapshot => { + const loadedMessages = querySnapshot.docs.map(doc => doc.data().message); + setMessages(loadedMessages); + }); + + // eslint-disable-next-line consistent-return + return unsubscribe; // Cleanup on component unmount + }, [user]); - // This doesn't work const scrollUp = () => { - window.scrollY += 100; + window.scrollBy(0, -100); }; - // This doesnt work const scrollDown = () => { - window.scrollY -= 100; + window.scrollBy(0, 100); }; return ( @@ -25,21 +72,38 @@ const ChatPage = () => { id='searchBar' placeholder={pathname.includes('community') ? 'community' : 'email'} type='text' + onChange={handleSendTo} />
- hi

- hey, how are you? + {messages.map((m, index) => ( + <> + +

+ + ))}
- - + +
); }; + export default ChatPage; From 36cf47cec82ac82f242775fd3dfad6d8eeb98809 Mon Sep 17 00:00:00 2001 From: lizzie Date: Wed, 13 Nov 2024 16:56:25 -0500 Subject: [PATCH 5/9] tried to update --- client/src/components/main/chat/Message.tsx | 5 ++-- client/src/components/main/chat/index.tsx | 29 +++++++++++++++------ 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/client/src/components/main/chat/Message.tsx b/client/src/components/main/chat/Message.tsx index abae3d5..bd75211 100644 --- a/client/src/components/main/chat/Message.tsx +++ b/client/src/components/main/chat/Message.tsx @@ -7,9 +7,10 @@ const Message = ({ message, username }: { message: string; username: string }) = return (
- {pathname.includes('community') ?

{user?.username}

: ''} - {message} + {pathname.includes('community') &&

{username}

} +

{message}

); }; + export default Message; diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index db2e0c3..5c58d80 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -2,7 +2,7 @@ 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 } from 'firebase/firestore'; +import { query, collection, orderBy, onSnapshot, addDoc, where } from 'firebase/firestore'; import { db } from '../../../firebaseConfig'; import Message from './Message'; import useUserContext from '../../../hooks/useUserContext'; @@ -11,10 +11,9 @@ const ChatPage = () => { const { pathname } = useLocation(); const { user } = useUserContext(); const [currentMessage, setCurrentMessage] = useState(''); - const [messages, setMessages] = useState([]); + const [messages, setMessages] = useState<{ message: string; username: string }[]>([]); const [send, setSend] = useState(''); - // ALSO NEEDS TO UPDATE THE MESSAGES SEEN const handleSendTo = (e: React.ChangeEvent) => { setSend(e.target.value); }; @@ -42,18 +41,32 @@ const ChatPage = () => { }; useEffect(() => { - if (!user?.username) return; + if (!user?.username || !send) return; - const q = query(collection(db, 'messages'), orderBy('timestamp', 'asc')); + const q = query( + collection(db, 'messages'), + where('sendTo', 'in', [send, user.username]), + orderBy('timestamp', 'asc'), + ); const unsubscribe = onSnapshot(q, querySnapshot => { - const loadedMessages = querySnapshot.docs.map(doc => doc.data().message); + const loadedMessages = querySnapshot.docs + .map(doc => ({ + message: doc.data().message, + username: doc.data().username, + })) + .filter( + msg => + (msg.username === user.username && msg.sendTo === send) || + (msg.username === send && msg.sendTo === user.username), + ); + setMessages(loadedMessages); }); // eslint-disable-next-line consistent-return return unsubscribe; // Cleanup on component unmount - }, [user]); + }, [user, send]); const scrollUp = () => { window.scrollBy(0, -100); @@ -78,7 +91,7 @@ const ChatPage = () => {
{messages.map((m, index) => ( <> - +

))} From c77c2ae4a05258d85c8e8a27ed33c08af943528b Mon Sep 17 00:00:00 2001 From: lizzie Date: Thu, 14 Nov 2024 15:29:17 -0500 Subject: [PATCH 6/9] updated chat to only render with who youre messaging --- client/src/components/main/chat/Message.tsx | 2 +- client/src/components/main/chat/index.css | 21 ++++++++++++++------- client/src/components/main/chat/index.tsx | 16 ++++++++++------ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/client/src/components/main/chat/Message.tsx b/client/src/components/main/chat/Message.tsx index bd75211..dce5a61 100644 --- a/client/src/components/main/chat/Message.tsx +++ b/client/src/components/main/chat/Message.tsx @@ -8,7 +8,7 @@ const Message = ({ message, username }: { message: string; username: string }) = return (
{pathname.includes('community') &&

{username}

} -

{message}

+

{message}

); }; diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css index 83ed0f3..d0b9dd8 100644 --- a/client/src/components/main/chat/index.css +++ b/client/src/components/main/chat/index.css @@ -10,8 +10,6 @@ } .ruled-paper { - --ruling-line-color: black; /* Color for horizontal ruling lines */ - background-image: linear-gradient(var(--ruling-line-color) 0.1em, transparent 0.1em); background-size: 100% 3em; /* Adjusts spacing between horizontal lines */ background-color: #FFFCF5; flex-grow: 1; @@ -52,14 +50,23 @@ .chat-text-user { text-align: left; font-size: 24px; - padding: 10px + padding-bottom: 10px; } .chat-text-me { - text-align: right; + text-align: left; font-size: 24px; - padding: 10px; + padding: 3px 7px; + + background: #DFAEA1; + color: #fff !important; + border-radius: 20px 20px 3px 20px; + + display: inline-block; float: right; + max-width: 60%; + word-wrap: break-word; + margin: 5px 0; } .username { @@ -78,8 +85,8 @@ } .message { - flex-grow: 1; - margin-right: 10px; + display: block; + width: 100%; } .send { diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 5c58d80..710dd1c 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -11,7 +11,9 @@ const ChatPage = () => { const { pathname } = useLocation(); const { user } = useUserContext(); const [currentMessage, setCurrentMessage] = useState(''); - const [messages, setMessages] = useState<{ message: string; username: string }[]>([]); + const [messages, setMessages] = useState<{ message: string; username: string; sendTo: string }[]>( + [], + ); const [send, setSend] = useState(''); const handleSendTo = (e: React.ChangeEvent) => { @@ -41,8 +43,9 @@ const ChatPage = () => { }; useEffect(() => { - if (!user?.username || !send) return; + 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'), where('sendTo', 'in', [send, user.username]), @@ -54,18 +57,20 @@ const ChatPage = () => { .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.username === send && msg.sendTo === user.username), + (msg.sendTo === user.username && msg.username === send), ); - setMessages(loadedMessages); }); + // Cleanup the snapshot listener on component unmount // eslint-disable-next-line consistent-return - return unsubscribe; // Cleanup on component unmount + return () => unsubscribe(); }, [user, send]); const scrollUp = () => { @@ -92,7 +97,6 @@ const ChatPage = () => { {messages.map((m, index) => ( <> -

))}
From 758cadc23ee0cc9e54f6814b26e69f05a9989d45 Mon Sep 17 00:00:00 2001 From: lizzie Date: Thu, 14 Nov 2024 15:48:28 -0500 Subject: [PATCH 7/9] messages are rendering and sending and container can scroll --- client/src/components/main/chat/index.css | 16 ++++++++++------ client/src/components/main/chat/index.tsx | 15 ++++++--------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css index d0b9dd8..6ef268a 100644 --- a/client/src/components/main/chat/index.css +++ b/client/src/components/main/chat/index.css @@ -9,6 +9,12 @@ overflow-y: scroll; } + .scrollable-container { + width: 100%; + height: 200px; + overflow-y: scroll; + } + .ruled-paper { background-size: 100% 3em; /* Adjusts spacing between horizontal lines */ background-color: #FFFCF5; @@ -51,6 +57,10 @@ text-align: left; font-size: 24px; padding-bottom: 10px; + + background: #f1f1f1; + color: #000 !important; + border-radius: 20px 20px 20px 3px; } .chat-text-me { @@ -61,12 +71,6 @@ background: #DFAEA1; color: #fff !important; border-radius: 20px 20px 3px 20px; - - display: inline-block; - float: right; - max-width: 60%; - word-wrap: break-word; - margin: 5px 0; } .username { diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 710dd1c..4a03d1f 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -2,7 +2,7 @@ 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, where } from 'firebase/firestore'; +import { query, collection, orderBy, onSnapshot, addDoc } from 'firebase/firestore'; import { db } from '../../../firebaseConfig'; import Message from './Message'; import useUserContext from '../../../hooks/useUserContext'; @@ -15,6 +15,7 @@ const ChatPage = () => { [], ); const [send, setSend] = useState(''); + const messageContainer = document.querySelector('.scrollable-container'); const handleSendTo = (e: React.ChangeEvent) => { setSend(e.target.value); @@ -46,11 +47,7 @@ const ChatPage = () => { 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'), - where('sendTo', 'in', [send, user.username]), - orderBy('timestamp', 'asc'), - ); + const q = query(collection(db, 'messages'), orderBy('timestamp', 'asc')); const unsubscribe = onSnapshot(q, querySnapshot => { const loadedMessages = querySnapshot.docs @@ -74,11 +71,11 @@ const ChatPage = () => { }, [user, send]); const scrollUp = () => { - window.scrollBy(0, -100); + messageContainer?.scrollBy(0, -100); }; const scrollDown = () => { - window.scrollBy(0, 100); + messageContainer?.scrollBy(0, 100); }; return ( @@ -93,7 +90,7 @@ const ChatPage = () => { onChange={handleSendTo} /> -
+
{messages.map((m, index) => ( <> From 297bb633a4e1063e7feab5e1d60655cd79517c37 Mon Sep 17 00:00:00 2001 From: lizzie Date: Fri, 15 Nov 2024 17:39:50 -0500 Subject: [PATCH 8/9] fixed styling --- client/src/components/main/chat/index.css | 48 ++++++++++++++--------- client/src/components/main/chat/index.tsx | 28 ++++++++----- 2 files changed, 48 insertions(+), 28 deletions(-) diff --git a/client/src/components/main/chat/index.css b/client/src/components/main/chat/index.css index 6ef268a..48eb3c9 100644 --- a/client/src/components/main/chat/index.css +++ b/client/src/components/main/chat/index.css @@ -32,15 +32,21 @@ padding: 20px; } - .chat-header { - width: 100%; - background-color: #466694; + .chat-title { padding: 20px; - color: #FFFFFF; - text-align: center; font-size: 24px; font-weight: bold; - position: inherit; + + } + + .chat-header { + background-color: #466694; + color: #FFFFFF; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; } .chat-footer { @@ -53,24 +59,30 @@ width: 100%; } - .chat-text-user { - text-align: left; + .chat-text-user, .chat-text-me { + display: inline-block; font-size: 24px; - padding-bottom: 10px; + 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 */ + } + .chat-text-user { + text-align: left !important; + padding: 3px 15px; background: #f1f1f1; color: #000 !important; border-radius: 20px 20px 20px 3px; } .chat-text-me { - text-align: left; - font-size: 24px; - padding: 3px 7px; - + float: right; /* Aligns the chat bubble to the 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 */ } .username { @@ -78,14 +90,10 @@ color: white; font-size: 24px; font-weight: bold; - border: #6D89B0; - outline: #6D89B0; } .username::placeholder { color: white; - border: #6D89B0; - outline: #6D89B0; } .message { @@ -94,11 +102,15 @@ } .send { - background: #32CD32; + background: #BABDE2; border-radius: 10px; padding: 5px; color: white; margin-right: 20px; font-size: 24px; font-weight: bold; + } + + .send:hover { + background-color: #9498B5; } \ No newline at end of file diff --git a/client/src/components/main/chat/index.tsx b/client/src/components/main/chat/index.tsx index 4a03d1f..3883b82 100644 --- a/client/src/components/main/chat/index.tsx +++ b/client/src/components/main/chat/index.tsx @@ -2,7 +2,7 @@ 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 } from 'firebase/firestore'; +import { query, collection, orderBy, onSnapshot, addDoc, getDoc, doc } from 'firebase/firestore'; import { db } from '../../../firebaseConfig'; import Message from './Message'; import useUserContext from '../../../hooks/useUserContext'; @@ -44,6 +44,8 @@ const ChatPage = () => { }; 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) @@ -51,6 +53,7 @@ const ChatPage = () => { 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, @@ -80,20 +83,25 @@ const ChatPage = () => { return (
-
- chatting now:{' '} - +
+ chatting now: + {pathname.includes('community') ? ( + community + ) : ( + + )}
{messages.map((m, index) => ( <> +
))}
From 5f2bb80aea0baaa5ad0a2705009c424baba87393 Mon Sep 17 00:00:00 2001 From: lizzie Date: Sat, 16 Nov 2024 14:41:23 -0500 Subject: [PATCH 9/9] 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;