Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import parse from 'html-react-parser'

import styled from 'styled-components'

import LikeButton from '../like-button/LikeButton'

import { addNotification } from '../../../../redux/notification/notification.actions'

import { useDispatch } from 'react-redux'

const StyledChatImgMessage = styled.div`

  display: flex;

  justify-content: center;

  align-items: center;

  position: initial !important;

  transform: initial !important;

  .chat_image_container {

    video {

      width: 100%;

      outline: none;

    }

    img {

      width: 150px;

      max-height: 200px;

    }

    .pdf {

      width: 40px;

    }

  }

  .chat_image__download_button {

    margin-left: 0.5rem;

    .fa {

      font-size: 1rem;

      color: gray;

    }

  }

`

const ResponseMessageContainer = styled.div`

  display: flex;

  flex-direction: column;

  text-align: center;

  gap: 10px;

  align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};

`

function propsAreEqual (prevProp, nextProp) {

  return prevProp.time === nextProp.time

}

const MessageTemplate = ({ message, setResponseMessage, responseMessage, time }) => {

  const [isShow, setIsShow] = useState(false)

  const [isLiked, setIsLiked] = useState(false)

  const dispatch = useDispatch()

  const senderName = (message) => {

    if (message.type === 'group') {

      return message.u === 1 ? '' : message.user_name

    }

  }

  const handleLike = () => {

    setIsLiked(!isLiked)

    setIsShow(!isShow)

  }

  const handleResponse = (msg) => {

    setIsShow(false)

    setResponseMessage(msg)

  }

  const handleCopy = async () => {

    await navigator.clipboard.writeText(`${message.m}`)

    dispatch(addNotification({

      style: 'success',

      msg: 'Mensaje copiado en el portapapeles'

    }))

    setIsShow(!isShow)

  }

  switch (message.mtype) {

    case 'text':

      return (

        <li

          key={message.id}

          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}

        >

          <div className="conversation-text">

            <div className="conversation_container w-100">

              {

                responseMessage &&

                <ResponseMessageContainer isRight={message.u === 1}>

                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>

                  <div className="ctext-wrap">

                    {senderName(responseMessage)}

                    <p className="">

                      {parse(emojione.shortnameToImage(responseMessage.m))}

                      <br />

                    </p>

                  </div>

                </ResponseMessageContainer>

              }

              <div className="conversation-text">

                <div className="ctext-wrap">

                  {senderName(message)}

                  <p className="">

                    {parse(emojione.shortnameToImage(message.m))}

                    <br />

                    <div className="d-inline-flex align-items-center">

                      {

                        !message.not_received &&

                        <i className={'fa fa-check text-right ellipsis '} style={message.seen ? { color: 'blue' } : { color: 'gray' }} />

                      }

                      <label>{time}</label>

                    </div>

                  </p>

                  {

                    isLiked &&

                    <i

                      className="fas fa-heart"

                      style={{

                        color: '#0961bf',

                        position: 'absolute',

                        top: '87%',

                        left: '85%'

                      }}

                    />

                  }

                </div>

                <i

                  className="la la-ellipsis-v icon"

                  style={{ position: 'relative' }}

                  onClick={() => setIsShow(!isShow)}

                />

                {

                  isShow &&

                  <div className="display-reactions" >

                    <LikeButton onClick={handleLike} />

                    <button type="button" onClick={() => handleResponse(message)}>

                      <i className="fa fa-reply" />

                    </button>

                    <button type="button" onClick={() => handleCopy(message)}>

                      <i className="fa fa-copy" />

                    </button>

                  </div>

                }

              </div>

            </div>

          </div>

        </li>

      )

    case 'image':

      return (

        <li

          key={message.id}

          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}

        >

          <div

            className="conversation-text"

            data-toggle="tooltip"

            data-placement="left"

            data-html="true"

          >

            <div className="ctext-wrap">

              {senderName(message)}

              <StyledChatImgMessage>

                <div className="chat_image_container">

                  <img src={message.m} alt="chat_image" />

                </div>

                {

                  message.u !== 1 &&

                  <a

                    href={message.m}

                    download

                    className="chat_image__download_button"

                  >

                    <i className="fa fa-arrow-circle-o-down" />

                  </a>

                }

              </StyledChatImgMessage>

              <br />

              <i className="text-right">{time}</i>

              {

                isLiked &&

                <i

                  className="fas fa-heart"

                  style={{

                    color: '#0961bf',

                    position: 'absolute',

                    top: '87%',

                    left: '85%'

                  }}

                />

              }

            </div>

            <i

              className="la la-ellipsis-v icon"

              style={{ position: 'relative' }}

              onClick={() => setIsShow(!isShow)}

            />

            {

              isShow &&

              <div className="display-reactions">

                <LikeButton onClick={handleLike} />

                <button type="button" onClick={() => handleResponse(message)}>

                  <i className="fa fa-reply" />

                </button>

              </div>

            }

          </div>

        </li>

      )

    case 'video':

      return (

        <li

          key={message.id}

          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}

        >

          <div

            className="conversation-text"

            data-toggle="tooltip"

            data-placement="left"

            data-html="true"

          >

            <div className="ctext-wrap">

              {senderName(message)}

              <StyledChatImgMessage>

                <a

                  href={message.m}

                  target="_blank"

                  className="chat_image__download_button" rel="noreferrer"

                >

                  <div className="chat_image_container">

                    <video src={message.m} preload="none" controls></video>

                  </div>

                </a>

                {message.u !== 1 &&

                  <a

                    href={message.m}

                    download

                    className="chat_image__download_button"

                  >

                    <i className="fa fa-arrow-circle-o-down" />

                  </a>

                }

              </StyledChatImgMessage>

              <br />

              <i className="text-right">{time}</i>

              {

                isLiked &&

                <i

                  className="fas fa-heart"

                  style={{

                    color: '#0961bf',

                    position: 'absolute',

                    top: '87%',

                    left: '85%'

                  }}

                />

              }

            </div>

            <i

              className="la la-ellipsis-v icon"

              style={{ position: 'relative' }}

              onClick={() => setIsShow(!isShow)}

            />

            {

              isShow &&

              <div className="display-reactions">

                <LikeButton onClick={handleLike} />

                <button type="button" onClick={() => handleResponse(message)}>

                  <i className="fa fa-reply" />

                </button>

              </div>

            }

          </div>

        </li>

      )

    case 'document':

      return (

        <li

          key={message.id}

          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}

        >

          <div

            className="conversation-text"

            data-toggle="tooltip"

            data-placement="left"

            data-html="true"

          >

            <div className="ctext-wrap">

              {senderName(message)}

              <StyledChatImgMessage>

                <div className="chat_image_container">

                  <img

                    className="pdf"

                    src="/storage/type/default/filename/pdf.png"

                    alt="pdf"

                  />

                </div>

                {message.u !== 1 &&

                  <a

                    href={message.m}

                    target="_blank"

                    className="chat_image__download_button" rel="noreferrer"

                  >

                    <i className="fa ti-arrow-circle-down"></i>

                  </a>

                }

              </StyledChatImgMessage>

              <br />

              <i className="text-right">{time}</i>

              {

                isLiked &&

                <i

                  className="fas fa-heart"

                  style={{

                    color: '#0961bf',

                    position: 'absolute',

                    top: '87%',

                    left: '85%'

                  }}

                />

              }

            </div>

            <i

              className="la la-ellipsis-v icon"

              style={{ position: 'relative' }}

              onClick={() => setIsShow(!isShow)}

            />

            {

              isShow &&

              <div className="display-reactions">

                <LikeButton onClick={handleLike} />

                <button type="button" onClick={() => handleResponse(message)}>

                  <i className="fa fa-reply" />

                </button>

              </div>

            }

          </div>

        </li>

      )

    default:

      return (

        <li

          key={message.id}

          className={`clearfix ${message.u === 1 ? 'odd' : ''} m-t-10 conversers${message.u}`}

        >

          <div

            className="conversation-text"

            data-toggle="tooltip"

            data-placement="left"

            data-html="true"

          >

            <div className="ctext-wrap">

              {senderName(message)}

              <p>

                {message.mtype}

                <br />

                <i className="text-right">{time}</i>

              </p>

            </div>

            <i

              className="la la-ellipsis-v icon"

              style={{ position: 'relative' }}

              onClick={() => setIsShow(!isShow)}

            />

            {

              isShow &&

              <div className="display-reactions">

                <LikeButton onClick={handleLike} />

                <button type="button" onClick={() => setResponseMessage(message)}>

                  <i className="fa fa-reply" />

                </button>

              </div>

            }

          </div>

        </li>

      )

  }

}

export default React.memo(MessageTemplate, propsAreEqual)