123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import {Avatar, Box} from '@mui/material';
- import { dateFormat } from '../utils/dateFormat';
- import { useSelector } from 'react-redux';
- import { Fragment, useRef, useEffect, useMemo} from 'react';
- import { scrollToBottom } from '../utils/scrollToBottom';
- import { useDispatch } from 'react-redux';
- import { editMessage } from '../../../reducers/messageReducer';
- import { TimeAgoMessage } from '../TimeAgoMessage';
- export const MessageForm = () => {
- const randomColor = require('randomcolor');
- const dispatch = useDispatch();
- const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
- const user = useSelector(state => state.getUserSocketReducer.socketUserData)
- const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
- const userColor = useMemo(() => randomColor(),[]);
- const avatarImg = '';
-
- const endMessages = useRef(null);
- useEffect(() => {
- scrollToBottom(endMessages)
- }, [startMessages, usersOnline]);
-
- return (
- <Box className='messageBox'>
- {
- startMessages.map((item, i) =>
- <div key={i} className={
- (item.userName === user.userName)? 'message myMessage' :'message'}>
- <Avatar
- src= {avatarImg || ''}
- sx={
- (item.userName == user.userName)
- ?
- {
- alignSelf: 'flex-end',
- backgroundColor: userColor
- }
- :
- {
- backgroundColor: (usersOnline.map(current => {
- if(item.userName === current.userName ) {
- return current.color
- }
- } )),
- }
- }>
- {item.userName.slice(0, 1)}
- </Avatar>
- <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>
- )
- }
|