87 lines
2.5 KiB
React
87 lines
2.5 KiB
React
|
import { useEffect, useState, useContext } from 'react';
|
||
|
|
import { ApiContext } from '../../utils/api_context';
|
||
|
|
import { useMessages } from '../../utils/use_messages';
|
||
|
|
import { Link, useParams } from 'react-router-dom';
|
||
|
|
import { generateGruvboxFromString } from '../../utils/generate_gruvbox';
|
||
|
|
|
||
|
|
/*
|
||
|
|
A lot of this is stolen from my Docker presentation :).
|
||
|
|
https://github.com/USUFSLC/sochat
|
||
|
|
*/
|
||
|
|
export const ChatRoom = () => {
|
||
|
|
const { id } = useParams();
|
||
|
|
const [chatRoom, setChatRoom] = useState('');
|
||
|
|
const [messages, sendMessage] = useMessages(chatRoom);
|
||
|
|
const [message, setMessage] = useState('');
|
||
|
|
const [color, setColor] = useState(generateGruvboxFromString('placeholder'));
|
||
|
|
const [user, setUser] = useState({});
|
||
|
|
const api = useContext(ApiContext);
|
||
|
|
|
||
|
|
const fetchUser = async () => {
|
||
|
|
const res = await api.get('/users/me');
|
||
|
|
if (res.user) {
|
||
|
|
setUser(res.user);
|
||
|
|
setColor(generateGruvboxFromString(`${res.user.firstName} ${res.user.lastName}`));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const fetchChatRoom = async (id) => {
|
||
|
|
const room = await api.get(`/chat_rooms/${id}`);
|
||
|
|
if (room) {
|
||
|
|
setChatRoom(room);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const scrollToBottomOfChat = () => {
|
||
|
|
const objDiv = document.getElementById('chat');
|
||
|
|
objDiv.scrollTop = objDiv.scrollHeight;
|
||
|
|
};
|
||
|
|
|
||
|
|
const sendThisMessage = () => {
|
||
|
|
sendMessage(message);
|
||
|
|
setMessage('');
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchUser();
|
||
|
|
fetchChatRoom(id);
|
||
|
|
}, [id]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
scrollToBottomOfChat();
|
||
|
|
}, [messages]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="container" style={{ border: `1px solid ${color}` }}>
|
||
|
|
<div style={{ textAlign: 'center' }}>
|
||
|
|
<h2>{chatRoom?.name || `Chat Room ${chatRoom?.id}`}</h2>
|
||
|
|
</div>
|
||
|
|
<div id="chat" className="chat">
|
||
|
|
<p>Welcome!</p>
|
||
|
|
{messages.map((message) => (
|
||
|
|
<div key={message.id} style={{ lineBreak: 'normal' }}>
|
||
|
|
<span style={{ color: generateGruvboxFromString(message.userName) }}>{message.userName}: </span>
|
||
|
|
<span>{message.content}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<textarea
|
||
|
|
placeholder={'Message'}
|
||
|
|
className="input"
|
||
|
|
onChange={(e) => setMessage(e.target.value)}
|
||
|
|
value={message}
|
||
|
|
rows={1}
|
||
|
|
cols={30}
|
||
|
|
></textarea>
|
||
|
|
<div className="button" onClick={sendThisMessage}>
|
||
|
|
Send
|
||
|
|
</div>
|
||
|
|
<div className="button">
|
||
|
|
<Link to="/">Back to map</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|