Proyectos de Subversion LeadersLinked - SPA

import React, { memo, useEffect, useRef, useState } from "react";

import { axios } from "../../utils";

import { useForm } from "react-hook-form";

import { useDispatch } from "react-redux";

import { addNotification } from "../../redux/notification/notification.actions";

import parse from "html-react-parser";

import styled, { css } from "styled-components";

import SendIcon from "@mui/icons-material/Send";

import IconButton from "@mui/material/IconButton";

import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import AttachFileIcon from "@mui/icons-material/AttachFile";

import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";

import Options from "../UI/Option";

import Emojione from "./emojione/Emojione";

import FileModal from "../modals/FileModal";

import LoaderContainer from "../UI/LoaderContainer";

import Spinner from "../UI/Spinner";

const StyledChatContainer = styled.div`

  background-color: var(--bg-color);

  border-radius: var(--border-radius);

  border: 1px solid var(--border-primary);

  height: 80vh;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

`;

const StyledChatHeader = styled.div`

  align-items: center;

  border-bottom: 1px solid var(--border-primary);

  display: flex;

  justify-content: center;

  padding: 1rem 0.5rem;

  position: relative;

  & > button:first-child {

    position: absolute;

    left: 1rem;

    top: 50%;

    transform: translateY(-50%);

    display: inline-flex;

    @media (min-width: 768px) {

      display: none;

    }

  }

`;

const StyledTitle = styled.h2`

  font-size: 1.5rem;

  font-weight: 500;

  width: fit-content;

  max-width: 20ch;

  text-align: center;

  @media (min-width: 768px) {

    max-width: 30ch;

  }

`;

const StyledMessageList = styled.div`

  gap: 0.5rem;

  display: flex;

  flex-direction: column-reverse;

  height: -webkit-fill-available;

  padding: 0.5rem 0;

  overflow: auto;

`;

const StyledMessage = styled.div`

  box-shadow: var(--light-shadow);

  display: inline-flex;

  flex-direction: column;

  gap: 0.5rem;

  margin-bottom: 0.5rem;

  max-width: 70%;

  min-width: 4rem;

  padding: 0.5rem;

  position: relative;

  & > p {

    color: var(--chat-color);

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    word-break: break-word;

  }

  & > img,

  & > video {

    max-width: 250px;

    max-height: 250px;

    object-fit: contain;

  }

  &:first-child {

    margin-top: 0.5rem;

  }

  .time {

    color: var(--subtitle-color);

    font-size: 0.8rem;

  }

  .emojione {

    width: 1rem;

    height: 1rem;

  }

  ${(props) => {

    if (props.send) {

      return css`

        align-self: flex-end;

        background-color: var(--chat-send);

        border-radius: 10px 0 10px 10px;

        margin-right: 0.5rem;

      `;

    }

    return css`

      align-self: flex-start;

      background-color: var(--chat-received);

      border-radius: 0 10px 10px 10px;

      margin-left: 0.5rem;

    `;

  }}

`;

const StyledForm = styled.form`

  border-top: 1px solid var(--border-primary);

  padding: 0.5rem;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

`;

const StyledInput = styled.input`

  border: none;

  outline: none;

  width: 100%;

  padding: 0.5rem 1rem;

  border-radius: 30px;

  background: var(--bg-color-secondary);

  &:focus {

    background: var(--bg-color-secondary);

  }

`;

const StyledLoader = styled(LoaderContainer)`

  max-height: 50px;

  max-width: 50px;

`;

function messageAreEqual(oldProps, newProps) {

  return oldProps.message.id

    ? oldProps.message.id === newProps.message.id

    : oldProps.message.uuid === newProps.message.uuid;

}

const Chat = ({ children }) => {

  return <StyledChatContainer>{children}</StyledChatContainer>;

};

const Header = ({ children, options = [], onClose }) => {

  return (

    <StyledChatHeader>

      <IconButton onClick={onClose}>

        <ArrowBackIcon />

      </IconButton>

      {children}

      {!!options.length && <Options options={options} right="1rem" />}

    </StyledChatHeader>

  );

};

const Title = ({ children, url }) => {

  if (!url) {

    return <StyledTitle>{children}</StyledTitle>;

  }

  return (

    <a href={url} style={{ width: "fit-content" }}>

      <StyledTitle>{children}</StyledTitle>

    </a>

  );

};

const List = ({ messages = [], onPagination, scrollRef, loading }) => {

  const loadMoreEl = useRef(null);

  useEffect(() => {

    const observer = new IntersectionObserver(onPagination);

    if (loadMoreEl.current) {

      observer.observe(loadMoreEl.current);

    }

    return () => {

      observer.disconnect();

    };

  }, [messages]);

  return (

    <StyledMessageList ref={scrollRef}>

      {messages.map((message) => (

        <List.Message message={message} key={message.id} />

      ))}

      <span ref={loadMoreEl}>.</span>

      {loading && (

        <StyledLoader>

          <Spinner />

        </StyledLoader>

      )}

    </StyledMessageList>

  );

};

// eslint-disable-next-line react/display-name

const Message = memo(({ message }) => {

  const senderName = (message) => {

    if (message.type === "group" && !message.u === 1) {

      return <span className="user_name">{message.user_name}</span>;

    }

  };

  const messagesContent = {

    text: (

      // eslint-disable-next-line no-undef

      <p>{parse(emojione.shortnameToImage(message.m || message.message))}</p>

    ),

    image: <img src={message.m || message.filename} alt="chat_image" />,

    video: (

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

    ),

    document: (

      <a href={message.m || message.filename} download>

        <img className="pdf" src="/images/extension/pdf.png" alt="pdf" />

      </a>

    ),

  };

  return (

    <>

      {senderName(message)}

      <StyledMessage

        send={message.u ? message.u === 1 : message.side === "left"}

      >

        {messagesContent[message.mtype || message.type]}

        <label className="time">

          {!message.not_received && (

            <i

              className="fa fa-check"

              style={message.seen ? { color: "blue" } : { color: "gray" }}

            />

          )}

          {message.time || message.date}

        </label>

      </StyledMessage>

    </>

  );

}, messageAreEqual);

const SubmitForm = ({ sendUrl, uploadUrl, onSubmit: onComplete }) => {

  const [showEmojione, setShowEmojione] = useState(false);

  const [isShowFileModal, setIsShowFileModal] = useState(false);

  const [isSending, setIsSending] = useState(false);

  const dispatch = useDispatch();

  const { handleSubmit, setValue, register, reset, getValues } = useForm();

  const onSubmit = handleSubmit(({ message }) => {

    const formData = new FormData();

    // eslint-disable-next-line no-undef

    formData.append("message", emojione.toShort(message));

    axios.post(sendUrl, formData).then((response) => {

      const { success, data } = response.data;

      if (!success) {

        const errorMessage =

          typeof data === "string" ? data : "Ha ocurrido un error";

        setShowEmojione(false);

        dispatch(addNotification({ style: "danger", msg: errorMessage }));

        return;

      }

      setShowEmojione(false);

      onComplete();

      reset();

    });

  });

  const sendFile = (file) => {

    setIsSending(true);

    const formData = new FormData();

    formData.append("file", file);

    axios

      .post(uploadUrl, formData)

      .then(({ data: response }) => {

        const { success, data } = response;

        if (!success) {

          const errorMessage =

            typeof data === "string" ? data : "Ha ocurrido un error";

          dispatch(addNotification({ style: "success", msg: errorMessage }));

          return;

        }

        toggleFileModal();

        onComplete();

      })

      .finally(() => setIsSending(false));

  };

  const toggleEmojione = () => {

    setShowEmojione(!showEmojione);

  };

  const toggleFileModal = () => {

    setIsShowFileModal(!isShowFileModal);

  };

  const onClickEmoji = (event) => {

    const shortname = event.currentTarget.dataset.shortname;

    const currentMessage = getValues("message");

    // eslint-disable-next-line no-undef

    const unicode = emojione.shortnameToUnicode(shortname);

    setValue("message", `${currentMessage}${unicode}`);

  };

  return (

    <>

      <StyledForm onSubmit={onSubmit}>

        {showEmojione && <Emojione onClickEmoji={onClickEmoji} />}

        <IconButton onClick={toggleFileModal}>

          <AttachFileIcon />

        </IconButton>

        <IconButton onClick={toggleEmojione}>

          <InsertEmoticonIcon />

        </IconButton>

        <StyledInput

          type="text"

          name="message"

          placeholder="Escribe un mensaje"

          ref={register({ required: true })}

        />

        <IconButton type="submit">

          <SendIcon />

        </IconButton>

      </StyledForm>

      <FileModal

        isShow={isShowFileModal}

        onHide={toggleFileModal}

        onComplete={sendFile}

        loading={isSending}

      />

    </>

  );

};

Chat.Header = Header;

Chat.Title = Title;

Chat.List = List;

List.Message = Message;

Chat.SubmitForm = SubmitForm;

export default Chat;