Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from "react";

import parse from "html-react-parser";

import styled from "styled-components";

import LikeButton from "../like-button/LikeButton";

const StyledChatImgMessage = styled.div`

  display: flex;

  justify-content: center;

  align-items: center;

  position: initial !important;

  transform: initial !important;

  .chat_image_container {

    video {

      width: 150px;

      outline: none;

    }

    img {

      width: 150px;

      max-height: 200px;

    }

    .pdf {

      width: 40px;

    }

  }

  .chat_image__download_button {

    margin-left: 0.5rem;

    .fa {

      font-size: 1.5rem;

      color: black;

    }

  }

`;

const MessageTemplate = ({ message }) => {

  const [isShow, setIsShow] = useState(false);

  const [isLiked, setIsLiked] = useState(false);

  const senderName = (message) => {

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

      return message.u === 1 ? "" : message.user_name;

    }

  };

  const handleLike = () => {

    setIsLiked(!isLiked)

    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"

            data-toggle="tooltip"

            data-placement="left"

            data-html="true"

          >

            <div className="ctext-wrap">

              {senderName(message)}

              <p className="">

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

                <br />

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

              </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)}

            >

            </i>

            {

              isShow

              &&

              <div

                className="display-reactions"

              >

                <LikeButton

                  onClick={handleLike}

                />

              </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}

                    target="_blank"

                    className="chat_image__download_button"

                  >

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

                  </a>

                )}

              </StyledChatImgMessage>

              <br />

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

            </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>

                <div className="chat_image_container">

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

                </div>

                {message.u === 1 ? (

                  ""

                ) : (

                  <a

                    href={message.m}

                    target="_blank"

                    className="chat_image__download_button"

                  >

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

                  </a>

                )}

              </StyledChatImgMessage>

              <br />

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

            </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"

                  >

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

                  </a>

                )}

              </StyledChatImgMessage>

              <br />

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

            </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 className="">

                {message.mtype}

                <br />

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

              </p>

            </div>

          </div>

        </li>

      );

  }

};

export default MessageTemplate;