Chat/src/components/message.js

import ReactTimeAgo from 'react-time-ago'
import TimeAgo from 'javascript-time-ago'
import ru from 'javascript-time-ago/locale/ru.json'
import { useState } from 'react'
import { Menu, MenuItem } from '@mui/material'

TimeAgo.addLocale(ru)

export const ShortMessage = ({ nick, text, date }) => {
    return (
        <>

            <div className="msg-short">
                <span className="msg-nick">Ответ на сообщение {nick}</span>
                <span className="msg-text">{text}</span>
                <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="twitter" />
            </div>
        </>
    )
}

export const Message = ({ id, nick, msg, date, media, own = false, replyTo, onMSGEdit, onMSGReply, onMSGForward }) => {
    let [isEdit, setIsEdit] = useState(false)
    let [messageEdit, setMessageEdit] = useState("" || msg)

    const [contextMenu, setContextMenu] = useState(null);

    const handleContextMenu = (event) => {
        event.preventDefault();
        setContextMenu(
            contextMenu === null
                ? {
                    mouseX: event.clientX - 2,
                    mouseY: event.clientY - 4,
                }
                : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
                // Other native context menus might behave different.
                // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
                null,
        );
    };

    const handleClose = (e, type, msg_id) => {
        if (type === "edit") {
            setIsEdit(true)
        }
        if (type === "reply") {
            onMSGReply([true, msg_id])
        }
        if (type === "forward") {
            alert("Сорян пока не работает)")
            // onMSGForward([true, ""])
        }

        setContextMenu(null);
    };

    let msgEditHandler = () => {
        setIsEdit(false)
        onMSGEdit(id, messageEdit)
    }

    return (

        <li className={own ? "msg-user" : "msg-someone"} onContextMenu={handleContextMenu} >
            <Menu
                open={contextMenu !== null}
                onClose={handleClose}
                anchorReference="anchorPosition"
                anchorPosition={
                    contextMenu !== null
                        ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
                        : undefined
                }
            >
                <MenuItem onClick={e => handleClose(e, "reply", id)}>Ответить</MenuItem>
                <MenuItem onClick={e => handleClose(e, "forward", id)}>Переслать</MenuItem>
                <MenuItem onClick={e => handleClose(e, "edit", id)}>Редактировать</MenuItem>
            </Menu>
            {/* <ContextMenu message={id} element={el.current} owner={own} onEdit={setIsEdit} onForwardTo={onMSGForward} onReplyTo={onMSGReply} /> */}

            {replyTo && <div className="msg-reply">В ответ на сообщение: {replyTo.text}</div>}

            <div className="msg">
                <span className="msg-nick">{nick}</span>

                {isEdit ?
                    <>
                        <input value={messageEdit} onChange={(e) => setMessageEdit(e.target.value)} />
                        <button onClick={() => msgEditHandler()} >Сохранить изменения</button>
                    </> :
                    <span className="msg-text">{msg}</span>}

                <ReactTimeAgo className="msg-date" date={+date} locale="ru" timeStyle="round" />
                {media && media.length > 0 &&
                    <ul className="msg-media">
                        {media.map(file => {
                            return (<li key={file.url}>
                                {file.type && file.type.includes("audio") &&
                                    <audio className="msg-media-audio" preload="metadata" controls>
                                        <source src={"/" + file.url} type={file.type} />
                                        <a href={"/" + file.url}>Скачать</a>
                                    </audio>
                                }

                                {
                                    file.type && file.type.includes("image") &&
                                    <img className="msg-media-img" src={"/" + file.url} alt="media" />
                                }

                                {
                                    file.type && file.type.includes("video") &&
                                    <video className="msg-media-video" preload="metadata" controls>
                                        <source src={"/" + file.url} type={file.type} />
                                        <a href={"/" + file.url}>Скачать</a>
                                    </video>
                                }

                            </li>)
                        })}
                    </ul>}
            </div>

        </li>
    )
}