Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useRef } from "react";
import parse from "html-react-parser";

import styles from "./messages.module.scss";

const Messages = (props) => {
  const { onScrollToBottom, oldMessages, newMessages, chatType } = props;
  const lastEl = useRef();
  const lastMessageEl = useRef();

  useEffect(() => {
     (lastEl.current);
    if (lastEl.current) {
      lastEl.current.onload = () => {
         ("scrolled");
        onScrollToBottom();
      };
    }
  }, [lastEl.current]);

  useEffect(() => {
    if (lastMessageEl.current) {
      lastMessageEl.current.onload = () => {
         ("scrolled");
        onScrollToBottom();
      };
    }
  }, [lastMessageEl.current]);

  useEffect(() => {
    onScrollToBottom();
  }, [newMessages]);

  const messageRenderer = (message, type) => {
    const { m, mtype, user_name, u } = message;
    switch (mtype) {
      case "text":
        return (
          <div className={styles.messageContainer}>
            {chatType === "group" && u !== 1 && (
              <span className={styles.userName}>{user_name}</span>
            )}
            <div ref={lastMessageEl}>{parse(emojione.shortnameToImage(m))}</div>
          </div>
        );
      case "image":
        return (
          <React.Fragment>
            <div className={styles.messageContainer}>
              {chatType === "group" && u !== 1 && (
                <span className={styles.userName}>{user_name}</span>
              )}
              <img
                className={styles.chatImg}
                src={m}
                alt="chat_img"
                ref={type === "new" ? lastEl : undefined}
              />
            </div>
            <a href={m} target="_blank" className={styles.downloadBtn}>
              <i className="fa ti-arrow-circle-down"></i>
            </a>
          </React.Fragment>
        );
      case "video":
        return (
          <React.Fragment>
            <div className={styles.messageContainer}>
              {chatType === "group" && u !== 1 && (
                <span className={styles.userName}>{user_name}</span>
              )}
              <video
                className={styles.chatImg}
                src={m}
                preload="none"
                controls
                ref={type === "new" ? lastEl : undefined}
              ></video>
            </div>
            <a href={m} target="_blank" className={styles.downloadBtn}>
              <i className="fa ti-arrow-circle-down"></i>
            </a>
          </React.Fragment>
        );
      case "document":
        return (
          <React.Fragment>
            <div className={styles.messageContainer}>
              {chatType === "group" && u !== 1 && (
                <span className={styles.userName}>{user_name}</span>
              )}
              <img
                className={styles.pdfImage}
                src="/storage/type/default/filename/pdf.png"
                alt="pdf"
                ref={type === "new" ? lastEl : undefined}
              />
            </div>
            <a href={m} target="_blank" className={styles.downloadBtn}>
              <i className="fa ti-arrow-circle-down"></i>
            </a>
          </React.Fragment>
        );
      default:
        break;
    }
  };

  return (
    <React.Fragment>
      {oldMessages.map((message, index) => (
        <div
          className={`${styles.message} ${
            message.u === 1 ? styles.message_sent : styles.message_received
          }`}
          key={index}
        >
          {messageRenderer(message, "old")}
          <span className={styles.message__time}>{message.time}</span>
        </div>
      ))}
      {newMessages.map((message, index) => (
        <div
          className={`${styles.message} ${
            message.u === 1 ? styles.message_sent : styles.message_received
          }`}
          key={index}
        >
          {messageRenderer(message, "new")}
          <span className={styles.message__time}>{message.time}</span>
        </div>
      ))}
    </React.Fragment>
  );
};

export default Messages;