Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

  const messageRenderer = (msg) => {
    const { sender_name, sender_image, sender_profile, side, message, type, filename } = 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