Chat/src/components/MessageDraft/ReplyMessageDraft.jsx

import ReplyIcon from '@mui/icons-material/Reply';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import ForwardRoundedIcon from '@mui/icons-material/ForwardRounded';
import { connect } from "react-redux";
import { actionAddDraftMessage, actionDeleteDraftMessageId} from "../../reducers/chatReducer";
import { MessageDraftContainer, MessageDraftInfo, MessageDraftText, MessageDraftWrapper, MessageOwnerDraftName } from './MessageDraft.style';
import { checkTypeFileForReply } from '../ReplyMessageMediaIcon/ReplyMessageMediaIcon';
import { useEffect, useRef, useState } from 'react';

const ReplyMessage = ({chat, deleteDraftMessage, mes}) => {
    const message = typeof mes !== 'object' ?  chat?.messages?.[mes] : mes;
    return (
        <MessageDraftWrapper>
            {typeof mes !== 'object' ? <ReplyIcon color="primary"/> : <ForwardRoundedIcon color="primary"/>}
            <MessageDraftContainer>
                {message?.media && checkTypeFileForReply(message.media?.[0]?.type, false, message.media?.[0]?.url)}
                <MessageDraftInfo>
                    <MessageOwnerDraftName>
                        {message?.owner?.nick || ''}
                    </MessageOwnerDraftName>
                    <MessageDraftText>
                        {message?.text.replace(/ /g, "\u00a0") || ''}
                    </MessageDraftText>
                </MessageDraftInfo>
            </MessageDraftContainer>
            <CloseRoundedIcon style={{cursor: 'pointer'}} color="primary" onClick={() => {deleteDraftMessage(chat._id, null)}}/>
        </MessageDraftWrapper>
    ) 
}

export default connect(null, {deleteDraftMessage: actionAddDraftMessage})(ReplyMessage);