Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11403 | Rev 15853 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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