Message.jsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import { useEffect, useRef, useState } from "react";
  2. import { Link } from "react-router-dom";
  3. import { backendURL } from "../../helpers/gql";
  4. import MessageOptions from "../MessageOptions/MessageOptions";
  5. import { ReplyMessage } from "../ReplyMessage/ReplyMessage";
  6. import { convert } from "../Time/Time";
  7. import { ForwardedMessageHeader, MessageContainer, MessageFooter, MessageOwner, MessageText, MessageWrapper, TimeMessage } from "./Message.style";
  8. import { saveAs } from "file-saver";
  9. import { MemoMessageMediaContainer, MessageMediaContainer } from "../MessageMediaContainer/MessageMediaContainer";
  10. export const Message = ({mes, chatId}) => {
  11. const owner = true;
  12. const checkedMessage = mes.forwarded ? mes.forwarded : mes; //check message (it has forwarded message or not, if it has return forwarded mes)
  13. const [anchorEl, setAnchorEl] = useState(null);
  14. const open = Boolean(anchorEl);
  15. const handleClick = (event) => {
  16. setAnchorEl(event.currentTarget);
  17. };
  18. const handleClose = () => {
  19. setAnchorEl(null)
  20. };
  21. return (
  22. <div>
  23. <MessageWrapper >
  24. <MessageContainer onClick={(e) => {handleClick(e)}}>
  25. {mes.forwarded && <ForwardedMessageHeader>{`Forwarded from ${checkedMessage?.owner?.nick || ''}`}</ForwardedMessageHeader>}
  26. {checkedMessage?.replyTo && <ReplyMessage owner={owner} message={checkedMessage.replyTo}/>}
  27. {checkedMessage?.media && checkedMessage?.media?.length !==0 && <MemoMessageMediaContainer media={checkedMessage.media}/>}
  28. <MessageText>{checkedMessage?.text?.replace(/ /g, "\u00a0") || ''}</MessageText>
  29. <MessageFooter>
  30. <MessageOwner>{checkedMessage.owner.nick || 'nick'}</MessageOwner>
  31. <TimeMessage owner={owner}>{convert(checkedMessage.createdAt).getTime()}</TimeMessage>
  32. </MessageFooter>
  33. </MessageContainer>
  34. </MessageWrapper>
  35. <MessageOptions message={checkedMessage} chatId={chatId} handleClose={handleClose} open={open} anchorEl={anchorEl}/>
  36. </div>)
  37. }