Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11394 | Rev 15851 | 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 
            )}
11403 nelberth 43 
            <div ref={lastMessageEl}>{parse(emojione.shortnameToImage(m))}</div>
11347 nelberth 44 
          </div>
45 
        );
46 
      case "image":
47 
        return (
48 
          <React.Fragment>
49 
            <div className={styles.messageContainer}>
50 
              {chatType === "group" && u !== 1 && (
51 
                <span className={styles.userName}>{user_name}</span>
52 
              )}
53 
              <img
54 
                className={styles.chatImg}
55 
                src={m}
56 
                alt="chat_img"
57 
                ref={type === "new" ? lastEl : undefined}
58 
              />
59 
            </div>
60 
            <a href={m} target="_blank" className={styles.downloadBtn}>
61 
              <i className="fa ti-arrow-circle-down"></i>
62 
            </a>
63 
          </React.Fragment>
64 
        );
65 
      case "video":
66 
        return (
67 
          <React.Fragment>
68 
            <div className={styles.messageContainer}>
69 
              {chatType === "group" && u !== 1 && (
70 
                <span className={styles.userName}>{user_name}</span>
71 
              )}
72 
              <video
73 
                className={styles.chatImg}
74 
                src={m}
75 
                preload="none"
76 
                controls
77 
                ref={type === "new" ? lastEl : undefined}
78 
              ></video>
79 
            </div>
80 
            <a href={m} target="_blank" className={styles.downloadBtn}>
81 
              <i className="fa ti-arrow-circle-down"></i>
82 
            </a>
83 
          </React.Fragment>
84 
        );
85 
      case "document":
86 
        return (
87 
          <React.Fragment>
88 
            <div className={styles.messageContainer}>
89 
              {chatType === "group" && u !== 1 && (
90 
                <span className={styles.userName}>{user_name}</span>
91 
              )}
92 
              <img
93 
                className={styles.pdfImage}
94 
                src="/storage/type/default/filename/pdf.png"
95 
                alt="pdf"
96 
                ref={type === "new" ? lastEl : undefined}
97 
              />
98 
            </div>
99 
            <a href={m} target="_blank" className={styles.downloadBtn}>
100 
              <i className="fa ti-arrow-circle-down"></i>
101 
            </a>
102 
          </React.Fragment>
103 
        );
104 
      default:
105 
        break;
106 
    }
107 
  };
108 
 
109 
  return (
110 
    <React.Fragment>
111 
      {oldMessages.map((message, index) => (
112 
        <div
113 
          className={`${styles.message} ${
114 
            message.u === 1 ? styles.message_sent : styles.message_received
115 
          }`}
116 
          key={index}
117 
        >
118 
          {messageRenderer(message, "old")}
119 
          <span className={styles.message__time}>{message.time}</span>
120 
        </div>
121 
      ))}
122 
      {newMessages.map((message, index) => (
123 
        <div
124 
          className={`${styles.message} ${
125 
            message.u === 1 ? styles.message_sent : styles.message_received
126 
          }`}
127 
          key={index}
128 
        >
129 
          {messageRenderer(message, "new")}
130 
          <span className={styles.message__time}>{message.time}</span>
131 
        </div>
132 
      ))}
133 
    </React.Fragment>
134 
  );
135 
};
136 
 
137 
export default Messages;