import { Avatar, Box, Button} from '@mui/material'; import { dateFormat } from '../utils/dateFormat'; import { useSelector } from 'react-redux'; import { useRef, useEffect, useState} from 'react'; import { scrollToBottom } from '../utils/scrollToBottom'; import { useDispatch } from 'react-redux'; import { editMessage } from '../../../reducers/messageReducer'; import { MessageEditorMenu } from '../MessageEditorMenu.jsx'; import imgBtn from '../../../assets/img/gg.png'; import useSound from 'use-sound'; import { PrivatChatHeader } from './PrivatChatHeader'; import { privateMessage } from '../../../reducers/userDataReducer'; import notifSound from '../../../assets/get.mp3' import { UserInfoButton } from '../generalChat/UserInfoButton'; //need to fix update wenn message sendet and icon for new private messages export const PrivateChat = () => { const dispatch = useDispatch(); const socket = useSelector(state => state.getUserSocketReducer.socket) const SERVER_URL =process.env.REACT_APP_SERVER_URL const user = useSelector(state => state.getUserSocketReducer.socketUserData) const storeMessageId = useSelector(state => state.messageReducer.messageId) const selectedUser = useSelector(state => state.dataReducer.selectedUser) const newPrivateMessages = useSelector(state => state.getUserSocketReducer.newPrivateMessages) const [startMessages, setStartMessages] = useState([]) let endMessages = useRef(null); socket.on('send privat messages', (messages)=> { setStartMessages(messages) }); ///need to test not working const allMessages = startMessages.concat(newPrivateMessages) const [isEditing, setIsEditing] = useState(false) const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/; //for youtube video const [play] = useSound(notifSound); useEffect(() => { if (!isEditing) { scrollToBottom((endMessages)) } }, [startMessages,allMessages]); return ( <> { allMessages.map((item, i) => { console.log(e.target) if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){ e.currentTarget.className += ' editMessage' dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id})) setIsEditing(true) } }} > {storeMessageId === item._id ? : ""} {item.fromUser} { item.text.match(regYoutube) ? : (item.file && item.fileType && item.fileType.split('/')[0] !== 'image') ? {item.text} : {item.text} } { (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files ? : '' } {isEditiedMessage && Edited} {/* {dateFormat(item).time} */} )} > ) }
{item.text}