Merge remote-tracking branch 'origin/chat'

client/src/components/fakestackoverflow.tsx

@@ -19,6 +19,7 @@ import CommunityInfo from './main/profile/community';
 import ChooseTagsPage from './login/newUser/chooseTagsPage/index';
 import CommunityHomePage from './main/homePage/community';
 import PostLoginCommunity from './login/newUser/chooseCommunityPage';
+import ChatPage from './main/chat';
 
 const ProtectedRoute = ({
   user,
@@ -64,8 +65,10 @@ const FakeStackOverflow = ({ socket }: { socket: FakeSOSocket | null }) => {
               </ProtectedRoute>
             }>
             <Route path='home' element={<CommunityHomePage />} /> {/* should become community */}
+            <Route path='chat/community' element={<ChatPage />} />
             <Route path='tags' element={<TagPage />} />
             <Route path='questions' element={<QuestionPage />} />
+            <Route path='chat' element={<ChatPage />} />
             <Route path='/question/:qid' element={<AnswerPage />} />
             <Route path='/new/question' element={<NewQuestionPage />} />
             <Route path='/new/answer/:qid' element={<NewAnswerPage />} />

client/src/components/header/index.tsx

@@ -14,6 +14,10 @@ import logo from '../../logo.svg';
 const Header = () => {
   const { val, handleInputChange, handleKeyDown } = useHeader();
 
+  const handleLogout = () => {
+    console.log('Logging out');
+  };
+
   return (
     <div id='header' className='header'>
       {/* Render SVG logo */}

client/src/components/login/newUser/chooseTagsPage/index.css

@@ -60,36 +60,31 @@
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
 }
 
-.button-container {
-  display: flex;
-  justify-content: right;
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.next-button {
-  padding: 12px 25px;
-  font-size: 16px;
-  cursor: pointer;
-  background-color: #466694; 
-  width: 160px;
-  height: 45px;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s, transform 0.2s;
-}
+  .button-container {
+    position: absolute;
+    bottom: 70px;
+    right: 40px;
+  }
 
-.next-button:hover {
-  background-color: #324B73; 
-  transform: translateY(-2px);
-}
+  .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;
+  }
 
-.next-button:active {
-  background-color: #466694;
-  transform: translateY(0);
-}
+  .next-button:active {
+    background-color: #466694;
+  }
 
 .button-text {
   text-decoration: none;

client/src/components/login/newUser/chooseTagsPage/index.tsx

@@ -52,7 +52,7 @@ const ChooseTagsPage = () => {
     <div className='container'>
       <img src={logo} alt='Fake Stack Overflow Logo' className='logo-login' />
       <div className='title'>
-        <h2>What topics interest you? Choose tags below:</h2>
+        <h2>what topics interest you? choose tags below:</h2>
       </div>
       <input
         type='text'

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

@@ -0,0 +1,16 @@
+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 (
+    <div className={`${username === user?.username ? 'chat-text-me' : 'chat-text-user'}`}>
+      {pathname.includes('community') && <p className='user-name'>{username}</p>}
+      <p className='message'>{message}</p>
+    </div>
+  );
+};
+
+export default Message;

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

@@ -0,0 +1,19 @@
+import React, { useRef, useState } from 'react';
+import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
+import { auth, db } from '../../../firebaseConfig';
+
+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;

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

@@ -0,0 +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;
+  }

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

@@ -0,0 +1,71 @@
+import './index.css';
+import { FaCaretUp, FaCaretDown } from 'react-icons/fa';
+import { useLocation } from 'react-router-dom';
+import Message from './Message';
+import useChat from '../../../hooks/useChat';
+
+const ChatPage = () => {
+  const { pathname } = useLocation();
+  const {
+    currentMessage,
+    messages,
+    send,
+    handleSendTo,
+    handleInputChange,
+    scrollUp,
+    saveMessagesToUserAccount,
+    scrollDown,
+  } = useChat();
+
+  return (
+    <div className='chat-container'>
+      <div className='chat-header d-flex'>
+        {pathname.includes('community') ? (
+          <span className='chat-title'>
+            chatting now: <span className='community-title'>community</span>
+          </span>
+        ) : (
+          <>
+            <span className='chat-title'>chatting now: </span>
+            <input
+              className='username'
+              id='searchBar'
+              placeholder={'email'}
+              type='text'
+              onChange={handleSendTo}
+            />
+          </>
+        )}
+      </div>
+      <div className='ruled-paper scrollable-container'>
+        {messages.map((m, index) => (
+          <>
+            <Message key={index} message={m.message} username={m.username} />
+            <br />
+          </>
+        ))}
+      </div>
+      <div className='chat-footer d-flex'>
+        <div className='carrot p-2'>
+          <FaCaretUp size={45} onClick={scrollUp} />
+          <FaCaretDown size={45} onClick={scrollDown} />
+        </div>
+        <input
+          className='p-2 message'
+          id='searchBar'
+          placeholder='type message here'
+          type='text'
+          value={currentMessage}
+          onChange={handleInputChange}
+        />
+        <button
+          className='send p-2'
+          onClick={() => saveMessagesToUserAccount(currentMessage, send)}>
+          send
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatPage;

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

@@ -1,5 +1,6 @@
 import './index.css';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import MembersSidebar from './membersSideBar';
 import Questions from './questions';
 
@@ -12,7 +13,9 @@ const CommunityHomePage = () => (
     <h2 className='home-page-title'>[Insert Community Name]</h2>
     <hr />
     <MembersSidebar />
-    <button className='chat-button'>Chat with Community</button>
+    <Link className='chat-button' to='/chat/community'>
+      Chat with Community
+    </Link>
     <Questions />
   </div>
 );