Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11393 | Rev 11403 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11347 nelberth 1 
import React, { useEffect, useRef } from "react";
2 
import parse from "html-react-parser";
3 
 
4 
import styles from "./messages.module.scss";
5 
 
6 
const Messages = (props) => {
7 
  const { onScrollToBottom, oldMessages, newMessages, chatType } = props;
8 
  const lastEl = useRef();
9 
  const lastMessageEl = useRef();
10 
 
11 
  useEffect(() => {
12 
     (lastEl.current);
13 
    if (lastEl.current) {
14 
      lastEl.current.onload = () => {
15 
         ("scrolled");
16 
        onScrollToBottom();
17 
      };
18 
    }
19 
  }, [lastEl.current]);
20 
 
21 
  useEffect(() => {
22 
    if (lastMessageEl.current) {
23 
      lastMessageEl.current.onload = () => {
24 
         ("scrolled");
25 
        onScrollToBottom();
26 
      };
27 
    }
28 
  }, [lastMessageEl.current]);
29 
 
30 
  useEffect(() => {
31 
    onScrollToBottom();
32 
  }, [newMessages]);
33 
 
34 
  const messageRenderer = (message, type) => {
35 
    const { m, mtype, user_name, u } = message;
36 
    switch (mtype) {
37 
      case "text":
38 
        return (
39 
          <div className={styles.messageContainer}>
40 
            {chatType === "group" && u !== 1 && (
41 
              <span className={styles.userName}>{user_name}</span>
42 
            )}
43 
          </div>
44 
        );
45 
      case "image":
46 
        return (
47 
          <React.Fragment>
48 
            <div className={styles.messageContainer}>
49 
              {chatType === "group" && u !== 1 && (
50 
                <span className={styles.userName}>{user_name}</span>
51 
              )}
52 
              <img
53 
                className={styles.chatImg}
54 
                src={m}
55 
                alt="chat_img"
56 
                ref={type === "new" ? lastEl : undefined}
57 
              />
58 
            </div>
59 
            <a href={m} target="_blank" className={styles.downloadBtn}>
60 
              <i className="fa ti-arrow-circle-down"></i>
61 
            </a>
62 
          </React.Fragment>
63 
        );
64 
      case "video":
65 
        return (
66 
          <React.Fragment>
67 
            <div className={styles.messageContainer}>
68 
              {chatType === "group" && u !== 1 && (
69 
                <span className={styles.userName}>{user_name}</span>
70 
              )}
71 
              <video
72 
                className={styles.chatImg}
73 
                src={m}
74 
                preload="none"
75 
                controls
76 
                ref={type === "new" ? lastEl : undefined}
77 
              ></video>
78 
            </div>
79 
            <a href={m} target="_blank" className={styles.downloadBtn}>
80 
              <i className="fa ti-arrow-circle-down"></i>
81 
            </a>
82 
          </React.Fragment>
83 
        );
84 
      case "document":
85 
        return (
86 
          <React.Fragment>
87 
            <div className={styles.messageContainer}>
88 
              {chatType === "group" && u !== 1 && (
89 
                <span className={styles.userName}>{user_name}</span>
90 
              )}
91 
              <img
92 
                className={styles.pdfImage}
93 
                src="/storage/type/default/filename/pdf.png"
94 
                alt="pdf"
95 
                ref={type === "new" ? lastEl : undefined}
96 
              />
97 
            </div>
98 
            <a href={m} target="_blank" className={styles.downloadBtn}>
99 
              <i className="fa ti-arrow-circle-down"></i>
100 
            </a>
101 
          </React.Fragment>
102 
        );
103 
      default:
104 
        break;
105 
    }
106 
  };
107 
 
108 
  return (
109 
    <React.Fragment>
110 
      {oldMessages.map((message, index) => (
111 
        <div
112 
          className={`${styles.message} ${
113 
            message.u === 1 ? styles.message_sent : styles.message_received
114 
          }`}
115 
          key={index}
116 
        >
117 
          {messageRenderer(message, "old")}
118 
          <span className={styles.message__time}>{message.time}</span>
119 
        </div>
120 
      ))}
121 
      {newMessages.map((message, index) => (
122 
        <div
123 
          className={`${styles.message} ${
124 
            message.u === 1 ? styles.message_sent : styles.message_received
125 
          }`}
126 
          key={index}
127 
        >
128 
          {messageRenderer(message, "new")}
129 
          <span className={styles.message__time}>{message.time}</span>
130 
        </div>
131 
      ))}
132 
    </React.Fragment>
133 
  );
134 
};
135 
 
136 
export default Messages;