Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15839 Rev 15844
Línea 14... Línea 14...
14 
const permittedFiles =
 14 
const permittedFiles =
15 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
 15 
  "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
Línea 16... Línea 16...
16 
 
 16 
 
17 
const Chat = ({ entity }) => {
 17 
const Chat = ({ entity }) => {
18 
  const [oldMessages, setOldMessages] = useState([]);
 18 
  const [oldMessages, setOldMessages] = useState([]);
19 
  const [messages, setmessages] = useState([]);
 19 
  const [messages, setMessages] = useState([]);
20 
  const [totalPages, setTotalPages] = useState(1);
 20 
  const [totalPages, setTotalPages] = useState(1);
21 
  const [currentPage, setCurrentPage] = useState(1);
 21 
  const [currentPage, setCurrentPage] = useState(1);
Línea 22... Línea 22...
22 
  const [loading, setLoading] = useState(false);
 22 
  const [loading, setLoading] = useState(false);
Línea 39... Línea 39...
39 
    url_close,
 39 
    url_close,
40 
    url_mark_seen,
 40 
    url_mark_seen,
41 
    type,
 41 
    type,
42 
  } = entity;
 42 
  } = entity;
Línea 43... Línea -...
43 
 
 - 
 
44 
  useEffect(() => {
 - 
 
45 
    let timeInterval;
 - 
 
46 
    if (loading) return;
 - 
 
47 
    timeInterval = setTimeout(() => chatHeartbeat(), 2000);
 - 
 
48 
 
 - 
 
49 
    return () => {
 - 
 
50 
      clearTimeout(timeInterval);
 - 
 
51 
    };
 - 
 
52 
  }, [loading, entity]);
 - 
 
53 
 
 - 
 
54 
  // infiniteScroll
 - 
 
55 
  useEffect(() => {
 - 
 
56 
    const options = {
 - 
 
57 
      root: null,
 - 
 
58 
      rootMargin: "0px",
 - 
 
59 
      threshold: 1.0,
 - 
 
60 
    };
 - 
 
61 
    const observer = new IntersectionObserver(handleObserver, options);
 - 
 
62 
    if (loadMoreEl.current) {
 - 
 
63 
      observer.observe(loadMoreEl.current);
 - 
 
64 
    }
 - 
 
65 
    return () => {
 - 
 
66 
      observer.disconnect();
 - 
 
67 
    };
 43 
 
68 
  }, [totalPages]);
 - 
 
69 
 
 - 
 
70 
  useEffect(() => {
 - 
 
71 
    loadOldMessages();
 - 
 
72 
  }, [currentPage]);
 - 
 
73 
 
 - 
 
74 
  useEffect(() => {
 - 
 
75 
    axios.post(url_mark_seen);
 - 
 
76 
  }, []);
 - 
 
77 
 
 - 
 
78 
  // heartbeat function
 44 
  // Get messages
79 
  const chatHeartbeat = () => {
 45 
  const getMessages = () => {
80 
    setLoading(true);
 46 
    setLoading(true);
81 
    axios
 47 
    axios
82 
      .get(url_get_all_messages)
 48 
      .get(url_get_all_messages)
83 
      .then(({ data: response }) => {
 49 
      .then(({ data: response }) => {
Línea 101... Línea 67...
101 
          },
 67 
          },
102 
          []
 68 
          []
103 
        );
 69 
        );
Línea 104... Línea 70...
104 
 
 70 
 
105 
        if (updatedMessages.length > 0) {
 71 
        if (updatedMessages.length > 0) {
106 
          setmessages([...messages, ...updatedMessages]);
 72 
          setMessages([...messages, ...updatedMessages]);
107 
          setTotalPages(data.pages);
 73 
          setTotalPages(data.pages);
108 
          scrollToBottom();
 74 
          scrollToBottom();
109 
        }
 75 
        }
110 
      })
 76 
      })
111 
      .finally(() => setLoading(false));
 77 
      .finally(() => setLoading(false));
Línea -... Línea 78...
- 
 
 78 
  };
- 
 
 79 
 
- 
 
 80 
  const onIntersection = async (entities) => {
- 
 
 81 
    const target = entities[0];
- 
 
 82 
    if (target.isIntersecting) {
- 
 
 83 
      if (currentPage < totalPages) {
- 
 
 84 
        setCurrentPage((prevState) => prevState + 1);
- 
 
 85 
        bottomToScroll.current.scrollBy(0, 200);
- 
 
 86 
      }
- 
 
 87 
    }
- 
 
 88 
  };
- 
 
 89 
 
- 
 
 90 
  const getAllMessages = () => {
- 
 
 91 
    setLoading(true);
- 
 
 92 
    axios
- 
 
 93 
      .get(url_get_all_messages, {
- 
 
 94 
        params: {
- 
 
 95 
          page: currentPage,
- 
 
 96 
        },
- 
 
 97 
      })
- 
 
 98 
      .then(({ data: response }) => {
- 
 
 99 
        const { data, success } = response;
- 
 
 100 
        if (success && data.page > 1) {
- 
 
 101 
          setOldMessages([...data.items.slice().reverse(), ...oldMessages]);
- 
 
 102 
        }
- 
 
 103 
      })
- 
 
 104 
      .finally(() => setLoading(false));
112 
  };
 105 
  };
113 
 
 106 
 
114 
  // utilsFunctions
 107 
  //Utilitys
115 
  const scrollToBottom = () => {
 108 
  const scrollToBottom = () => {
116 
    const divToScrollEl = divToScroll.current;
 109 
    const divToScrollEl = divToScroll.current;
Línea 131... Línea 124...
131 
    );
 124 
    );
132 
  };
 125 
  };
Línea 133... Línea 126...
133 
 
 126 
 
134 
  const handleUploadFile = (e) => {
 127 
  const handleUploadFile = (e) => {
135 
    const file = e.target.files[0];
 - 
 
136 
    if (file) {
 128 
    const file = e.target.files[0];
137 
      setSelectedFile(file);
 - 
 
138 
    }
 129 
    if (file) setSelectedFile(file);
Línea 139... Línea 130...
139 
  };
 130 
  };
140 
 
 131 
 
141 
  const removeSelectedFile = () => {
 132 
  const removeSelectedFile = () => {
Línea 142... Línea -...
142 
    setSelectedFile("");
 - 
 
143 
  };
 - 
 
144 
 
 - 
 
145 
  const handleObserver = async (entities) => {
 - 
 
146 
    const target = entities[0];
 - 
 
147 
    if (target.isIntersecting) {
 - 
 
148 
      if (currentPage < totalPages) {
 - 
 
149 
        setCurrentPage((prevState) => prevState + 1);
 - 
 
150 
        bottomToScroll.current.scrollBy(0, 200);
 - 
 
151 
      }
 - 
 
152 
    }
 - 
 
153 
  };
 - 
 
154 
 
 - 
 
155 
  const loadOldMessages = async () => {
 - 
 
156 
    if (currentPage < totalPages && currentPage > 1) {
 - 
 
157 
    }
 - 
 
158 
    await axios
 - 
 
159 
      .get(url_get_all_messages, {
 - 
 
160 
        params: {
 - 
 
161 
          page: currentPage,
 - 
 
162 
        },
 - 
 
163 
      })
 - 
 
164 
      .then(async (response) => {
 - 
 
165 
        const resData = response.data;
 - 
 
166 
        if (resData.success) {
 - 
 
167 
          if (resData.data.page > 1) {
 - 
 
168 
            setOldMessages([
 - 
 
169 
              ...resData.data.items.slice().reverse(),
 - 
 
170 
              ...oldMessages,
 - 
 
171 
            ]);
 - 
 
172 
          }
 - 
 
173 
        }
 - 
 
174 
      });
 133 
    setSelectedFile("");
175 
  };
 134 
  };
176 
 
 135 
 
177 
  // on send message
 136 
  // On send
178 
  const onHandleSubmit = (data, event) => {
 137 
  const onHandleSubmit = (data, event) => {
179 
    const formData = new FormData();
 138 
    const formData = new FormData();
Línea 184... Línea 143...
184 
    axios.post(url_send, formData).then((response) => {
 143 
    axios.post(url_send, formData).then((response) => {
185 
      setShowEmojione(false);
 144 
      setShowEmojione(false);
186 
    });
 145 
    });
187 
  };
 146 
  };
Línea 188... Línea -...
188 
 
 - 
 
189 
  // on send file
 147 
 
190 
  const handleSendFile = () => {
 148 
  const handleSendFile = () => {
191 
    const formData = new FormData();
 149 
    const formData = new FormData();
192 
    formData.append("file", selectedFile);
 150 
    formData.append("file", selectedFile);
193 
    axios.post(url_upload, formData).then(async (response) => {
 151 
    axios.post(url_upload, formData).then(async (response) => {
Línea 197... Línea 155...
197 
        setShowEmojione(false);
 155 
        setShowEmojione(false);
198 
      }
 156 
      }
199 
    });
 157 
    });
200 
  };
 158 
  };
Línea -... Línea 159...
- 
 
 159 
 
- 
 
 160 
  useEffect(() => {
- 
 
 161 
    let timeInterval;
- 
 
 162 
    if (loading) return;
- 
 
 163 
    timeInterval = setTimeout(() => getMessages(), 2000);
- 
 
 164 
 
- 
 
 165 
    return () => {
- 
 
 166 
      clearTimeout(timeInterval);
- 
 
 167 
    };
- 
 
 168 
  }, [loading, entity]);
- 
 
 169 
 
- 
 
 170 
  // infiniteScroll
- 
 
 171 
  useEffect(() => {
- 
 
 172 
    const options = {
- 
 
 173 
      root: null,
- 
 
 174 
      rootMargin: "0px",
- 
 
 175 
      threshold: 1.0,
- 
 
 176 
    };
- 
 
 177 
    const observer = new IntersectionObserver(onIntersection, options);
- 
 
 178 
    if (loadMoreEl.current) {
- 
 
 179 
      observer.observe(loadMoreEl.current);
- 
 
 180 
    }
- 
 
 181 
    return () => {
- 
 
 182 
      observer.disconnect();
- 
 
 183 
    };
- 
 
 184 
  }, [totalPages]);
- 
 
 185 
 
- 
 
 186 
  useEffect(() => {
- 
 
 187 
    getAllMessages();
- 
 
 188 
  }, [currentPage]);
- 
 
 189 
 
- 
 
 190 
  useEffect(() => {
- 
 
 191 
    axios.post(url_mark_seen);
- 
 
 192 
  }, []);
201 
 
 193 
 
202 
  return (
 194 
  return (
203 
    <div className={styles.chat}>
 195 
    <div className={styles.chat}>
204 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
 196 
      <div className={styles.messagesContainer} ref={bottomToScroll}>
205 
        <div className={styles.messageWrapper}>
 197 
        <div className={styles.messageWrapper}>
Línea 208... Línea 200...
208 
              Cargando...
 200 
              Cargando...
209 
            </p>
 201 
            </p>
210 
          )}
 202 
          )}
211 
          <Messages
 203 
          <Messages
212 
            oldMessages={oldMessages}
 204 
            oldMessages={oldMessages}
213 
            messages={messages}
 205 
            newMessages={messages}
214 
            onScrollToBottom={scrollToBottom}
 206 
            onScrollToBottom={scrollToBottom}
215 
            chatType={type}
 207 
            chatType={type}
216 
          />
 208 
          />
217 
          <div ref={divToScroll}></div>
 209 
          <div ref={divToScroll}></div>
218 
        </div>
 210 
        </div>