123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import { Avatar, Box, StyledBadge } from '@mui/material';
- import { dateFormat } from '../utils/dateFormat';
- import { useSelector } from 'react-redux';
- import { useRef, useEffect} from 'react';
- import { scrollToBottom } from '../utils/scrollToBottom';
- import { useDispatch } from 'react-redux';
- import { editMessage } from '../../../reducers/messageReducer';
- import { StyledAvatar } from './StyledAvatar';
- export const MessageForm = () => {
- const dispatch = useDispatch();
- const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
- const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
- const user = useSelector(state => state.getUserSocketReducer.socketUserData)
- const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
- const userNamesOnlineSet = new Set(usersOnline.map( i => i.userName))
- const endMessages = useRef(null);
- const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/; //for youtube video
- useEffect(() => {
- scrollToBottom(endMessages)
- }, [startMessages, usersOnline]);
-
- return (
- <Box className='messageBox'>
- {
- startMessages.map((item, i) =>
- <div key={i} className={
- (item.userName === user.userName)? 'message myMessage' :'message'}>
- <StyledAvatar
- anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
- variant = {userNamesOnlineSet.has(item.userName)? 'dot' : ''}
-
- >
- <Avatar
- src= {SERVER_URL + item?.user?.avatar}
- sx={
- (item.userName == user.userName)
- ?
- {
- alignSelf: 'flex-end',
- }
- :
- {}
- }>
- {item?.userName.slice(0, 1)}
- </Avatar>
- </StyledAvatar>
- <div
- key={item._id}
- onClick = {(e) => {
- if(e.target.className.includes('myMessage')){
- e.currentTarget.className += ' editMessage'
- startMessages.map( item => {
- if((item.userName === user.userName) && (item.text === e.target.textContent)){
- console.log('edit message',e.target.textContent )
- dispatch(editMessage({editMessage: e.target.textContent}))
- }
- })}
- }}
- className={
- (item.userName === user.userName)? 'message myMessage' :'message'}>
- <p>{item.text}</p>
- </div>
- <div className={
- (item.userName === user.userName)? 'myDate' :'date'}>
- {dateFormat(item).time}
- </div>
- </div>
- )}
- <div ref={endMessages}></div>
- </Box>
- )
- }
|