Proyectos de Subversion LeadersLinked - Backend

import React from "react";
import parse from "html-react-parser";

import styles from "./messages.module.scss";

const Message = ({ message }) => {
  const { m, user_name, u } = message;

  const messageContent = {
    text: (
      <div className={styles.messageContainer}>
        {chatType === "group" && u !== 1 && (
          <span className={styles.userName}>{user_name}</span>
        )}
        <div ref={lastMessageEl}>{parse(emojione.shortnameToImage(m))}</div>
      </div>
    ),
    image: (
      <>
        <div className={styles.messageContainer}>
          {chatType === "group" && u !== 1 && (
            <span className={styles.userName}>{user_name}</span>
          )}
          <img
            className={styles.chatImg}
            src={m}
            alt="chat_img"
            ref={type === "new" ? lastEl : undefined}
          />
        </div>
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </>
    ),
    video: (
      <>
        <div className={styles.messageContainer}>
          {chatType === "group" && u !== 1 && (
            <span className={styles.userName}>{user_name}</span>
          )}
          <video
            className={styles.chatImg}
            src={m}
            preload="none"
            controls
            ref={type === "new" ? lastEl : undefined}
          ></video>
        </div>
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </>
    ),
    document: (
      <>
        <div className={styles.messageContainer}>
          {chatType === "group" && u !== 1 && (
            <span className={styles.userName}>{user_name}</span>
          )}
          <img
            className={styles.pdfImage}
            src="/storage/type/default/filename/pdf.png"
            alt="pdf"
            ref={type === "new" ? lastEl : undefined}
          />
        </div>
        <a href={m} target="_blank" className={styles.downloadBtn}>
          <i className="fa ti-arrow-circle-down"></i>
        </a>
      </>
    ),
  };

  return (
    <div
      className={`${styles.message} ${
        message.u === 1 ? styles.message_sent : styles.message_received
      }`}
    >
      {messageContent[message.mtype]}
    </div>
  );
};

export default Message;