Merge pull request #123 from DamyanBG/implement-chat

chat page

Author: DamyanBG

src/App.js

@@ -10,6 +10,7 @@ import HomeDetails from './components/Homes/HomeDetails';
 import SignInPage from './components/User/SignInPage';
 import Rent from './components/Rent/Rent';
 import NewsList from './components/News/NewsList';
+import Chat from './components/Chat/Chat';
 import Profile from './components/User/Profile';
 import ChangeEmail from './components/User/ChangeEmail';
 import ChangePassword from './components/User/ChangePassword';
@@ -34,6 +35,7 @@ function App() {
                             <Route path="/edit-home" element={<EditHome />} />
                             <Route path="/create-land" element={<CreateLand />} />
                             <Route path="/signup" element={<SignUpPage />} />
+                            <Route path="/chat" element={<Chat />} />
                             <Route path="/signin" element={<SignInPage />} />
                             <Route path="/all-homes" element={<AllHomes />} />
                             <Route path="/all-lands" element={<AllLands />} />

src/components/Chat/Chat.js

@@ -0,0 +1,109 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import './Chat.scss';
+import { hostUrl } from '../../common/urls';
+import { UserContext } from '../../context/UserContext';
+
+export default function Chat() {
+    const params = new URLSearchParams(window.location.search);
+    const interlocutorId = params.get('interlocutorId');
+    const names = params.get('names')
+    const [message, setMessage] = useState('');
+    const [messages, setMessages] = useState();
+    const [chatHistory, setChatHistory] = useState([]);
+    const { user } = useContext(UserContext);
+    const ref = useRef()
+
+    const getMessages = () => {
+        fetch(`${hostUrl}/message/${user._id}&${interlocutorId}`)
+            .then((resp) => resp.json())
+            .then(setMessages);
+    };
+
+    const sortMessages = () => {
+        let sorted = Object.entries(messages)
+            .map((arr) =>
+                arr[1].map((v) => ({
+                    position: v.sender_id === user._id ? 'right' : 'left',
+                    text: v.text,
+                    id: v._id,
+                    date: v.createdAt,
+                }))
+            )
+            .flat()
+            .sort((a, b) => new Date(a.date) - new Date(b.date));
+        setChatHistory(sorted);
+    };
+
+    useEffect(() => {
+        if (!interlocutorId || !user._id) return;
+        getMessages();
+    }, [interlocutorId, user._id]);
+
+    useEffect(() => {
+        if (!messages) return;
+        sortMessages();
+    }, [messages]);
+
+    const handleOnMessageChange = (e) => {
+        setMessage(e.target.value);
+    };
+
+    const postMessage = () => {
+        const postBody = {
+            sender_id: user._id,
+            receiver_id: interlocutorId,
+            text: message,
+        };
+        fetch(`${hostUrl}/message`, {
+            method: 'POST',
+            body: JSON.stringify(postBody),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        })
+            .then((resp) => resp.json())
+            .then((json) => {
+                setChatHistory([...chatHistory, {
+                    id: json._id,
+                    text: json.text,
+                    position: "right"
+                }])
+                setMessage('');
+                ref.current.focus()
+            });
+    }
+
+    const handleOnMessageSend = () => {
+        postMessage()
+    };
+
+    const handleOnKeyDown = (e) => {
+        if (e.key === "Enter") {
+            postMessage()
+        }
+    }
+
+    return (
+        <div className="chat-container">
+            <h2>Chat with {names}</h2>
+            <section className="chat-messages">
+                {chatHistory.map((ch) => (
+                    <p key={ch.id} className={`message-${ch.position}`}>
+                        {ch.text}
+                    </p>
+                ))}
+            </section>
+            <input
+                ref={ref}
+                className="chat-input"
+                type="text"
+                value={message}
+                onChange={handleOnMessageChange}
+                onKeyDown={handleOnKeyDown}
+            />
+            <button className="chat-button" onClick={handleOnMessageSend} type="button">
+                Send
+            </button>
+        </div>
+    );
+}

src/components/Chat/Chat.scss

@@ -0,0 +1,41 @@
+.chat-container {
+    margin: 64px 128px;
+    border: 1px solid black;
+    text-align: center;
+}
+
+.chat-messages {
+    display: flex;
+    margin: 24px;
+    flex-direction: column;
+    min-height: 65vh;
+    p {
+        min-width: 200px;
+        border: 1px solid black;
+        border-radius: 6px;
+        padding: 6px;
+        margin-top: 6px;
+    }
+}
+
+.message-left {
+    align-self: flex-start;
+    text-align: start;
+}
+
+.message-right {
+    align-self: flex-end;
+    text-align: end;
+}
+
+.chat-input {
+    width: 95%
+    
+}
+
+.chat-button {
+    width: 5%;
+    padding: 8px;
+    border-radius: 6px;
+    border: 1px solid black;
+}

src/components/Homes/HomeDetails.js

@@ -45,7 +45,7 @@ export default function HomeDetails() {
                 <p>
                     Owner: {homeDetails.owner_names}{' '}
                     {user._id !== homeDetails.owner_id && (
-                        <Link to={`/chat?interlocutorId=${homeDetails.owner_id}`}>
+                        <Link to={`/chat?interlocutorId=${homeDetails.owner_id}&names=${homeDetails.owner_names}`}>
                             <button>Start chat</button>
                         </Link>
                     )}