Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
import React from 'react'

const MessageTemplate = ({ message }) => {
  const isRightPosition = message.side === 'right'

  const messageRenderer = (msg) => {
    const {
      sender_name,
      sender_image,
      sender_profile,
      side,
      message,
      type,
      filename,
      date,
    } = msg

    switch (type) {
      case 'text':
        return (
          <div
            className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
            key={message}
          >
            <div className="messg-usr-img">
              <a href={sender_profile}>
                <img
                  src={sender_image}
                  className="cursor-pointer"
                  alt={`${sender_name} profile image`}
                />
              </a>
            </div>
            <div className={'message-dt mw-30'}>
              <div className="message-inner-dt">
                <p className={`w-100 ${'text-' + side}`}>{message}</p>
              </div>
              <span className="p-1">{date}</span>
            </div>
          </div>
        )
      case 'image':
        return (
          <div
            className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
            key={message}
          >
            <div className="messg-usr-img">
              <a href={sender_profile}>
                <img
                  src={sender_image}
                  className="cursor-pointer"
                  alt={`${sender_name} profile image`}
                />
              </a>
            </div>
            <div className={'message-dt mw-30'}>
              <div className="message-inner-dt">
                <img src={filename} alt={`${sender_name} message image`} />
              </div>
              <span className="p-1">{date}</span>
            </div>
          </div>
        )
      case 'video':
        return (
          <div
            className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
            key={message}
          >
            <div className="messg-usr-img">
              <a href={sender_profile}>
                <img
                  src={sender_image}
                  className="cursor-pointer"
                  alt={sender_name}
                />
              </a>
            </div>
            <div className={'message-dt mw-30'}>
              <div className="message-inner-dt">
                <video src={filename} />
              </div>
              <span className="p-1">{date}</span>
            </div>
          </div>
        )
      case 'document':
        return (
          <div
            key={message}
            className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
          >
            <div className="messg-usr-img">
              <a href={sender_profile}>
                <img
                  src={sender_image}
                  className="cursor-pointer"
                  alt={sender_name}
                />
              </a>
            </div>
            <div className={'message-dt mw-30'}>
              <div className="message-inner-dt">
                <a
                  href={filename}
                  target="_blank"
                  className={'downloadBtn'}
                  rel="noreferrer"
                >
                  {LABELS.OPEN_DOCUMENT}
                  <i className="fa ti-arrow-circle-down" />
                </a>
              </div>
              <span className="p-1">{date}</span>
            </div>
          </div>
        )
      default:
        break
    }
  }

  return messageRenderer(message)
}
export default MessageTemplate