diff --git a/jam-ui/src/components/page/JKMusicSessionsLobby.js b/jam-ui/src/components/page/JKMusicSessionsLobby.js index d51b0f7ca..57bb9b5c2 100644 --- a/jam-ui/src/components/page/JKMusicSessionsLobby.js +++ b/jam-ui/src/components/page/JKMusicSessionsLobby.js @@ -1,39 +1,55 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Col, Row, Card, CardBody } from 'reactstrap'; import FalconCardHeader from '../common/FalconCardHeader'; import { useTranslation } from 'react-i18next'; import { useResponsive } from '@farfetch/react-context-responsive'; import JKLobbyUserList from '../sessions/JKLobbyUserList'; import JKLobbyChat from '../sessions/JKLobbyChat'; +import { useDispatch, useSelector } from 'react-redux'; +import { fetchOnlineMusicians } from '../../store/features/onlineMusiciansSlice'; +import { fetchUserLatencies } from '../../store/features/latencySlice'; +import { useAuth } from '../../context/UserAuth'; function JKMusicSessionsLobby() { const { t } = useTranslation(); const { greaterThan } = useResponsive(); + const dispatch = useDispatch(); + const { currentUser } = useAuth(); + + const onlineMusicians = useSelector(state => state.onlineMusician.musicians); + const loadingStatus = useSelector(state => state.onlineMusician.status); + + useEffect(() => { + dispatch(fetchOnlineMusicians()); + }, []); + + useEffect(() => { + if (loadingStatus === 'succeeded' && onlineMusicians.length > 0) { + const userIds = onlineMusicians.map(p => p.id); + const options = { currentUserId: currentUser.id, participantIds: userIds }; + dispatch(fetchUserLatencies(options)); + } + }, [loadingStatus]); return ( -
<> {greaterThan.sm ? ( - - - -
- -
- - - - -
- - ) : ( - - + + +
+ +
+ + + +
+ ) : ( + )}
diff --git a/jam-ui/src/components/profile/JKMoreDetailsButton.js b/jam-ui/src/components/profile/JKMoreDetailsButton.js new file mode 100644 index 000000000..d74e6983b --- /dev/null +++ b/jam-ui/src/components/profile/JKMoreDetailsButton.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { useTranslation } from 'react-i18next'; + +function JKMoreDetailsButton({ toggleMoreDetails, cssClasses, children}) { + const { t } = useTranslation(); + return ( + + + { children } + + + ); +} + +export default JKMoreDetailsButton; diff --git a/jam-ui/src/components/sessions/JKLobbyChat.js b/jam-ui/src/components/sessions/JKLobbyChat.js index f2fd29e04..0be9f7a85 100644 --- a/jam-ui/src/components/sessions/JKLobbyChat.js +++ b/jam-ui/src/components/sessions/JKLobbyChat.js @@ -1,21 +1,82 @@ -import React from 'react'; -import { Card, CardBody, CardFooter, CardHeader, CardText, CardTitle, Button } from 'reactstrap'; +import React, { useState, useRef, useEffect } from 'react'; +import { Container, Row, Col, Button } from 'reactstrap'; +import { useDispatch, useSelector } from 'react-redux'; +import { fetchLobbyChatMessages } from '../../store/features/lobbyChatMessagesSlice'; +import { useAuth } from '../../context/UserAuth'; function JKLobbyChat() { + const CHANNEL_LOBBY = 'lobby'; + const [newMessage, setNewMessage] = useState(''); + const dispatch = useDispatch(); + const messageTextBox = useRef(); + const { currentUser } = useAuth(); + + const chatMessages = useSelector(state => state.lobbyChat.messages); + + useEffect(() => { + dispatch(fetchLobbyChatMessages()); + }, []); + + const handleOnKeyPress = event => { + if (event.key === 'Enter' || event.key === 'NumpadEnter') { + event.preventDefault(); + sendMessage(); + event.target.value = ''; + } + }; + + const sendMessage = () => { + let msgData = { + message: newMessage, + channel: CHANNEL_LOBBY, + user_id: currentUser.id, + }; + setNewMessage(''); + + try { + //dispatch(postNewMessage(msgData)); + } catch (err) { + console.log('addNewMessage error', err); + } finally { + } + }; + return ( - // - // Header - // - // Special Title Treatment - // With supporting text below as a natural lead-in to additional content. - // - // - //
-
Header
-
Body
+
+ Lobby Chat +
+
+ + + + {chatMessages.map((msg, index) => ( +
+ {msg.user_id} : {msg.message} +
+ ))} + +
+ + +