Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev 15775 Rev 16780
Línea 1... Línea 1...
1 
/* eslint-disable camelcase */
 1 
/* eslint-disable camelcase */
2 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
3 
import React, { useEffect, useRef, useState } from "react";
 3 
import React, { useEffect, useRef, useState } from 'react'
4 
import { axios } from "../../../utils";
 4 
import { axios } from '../../../utils'
5 
import { Modal } from "react-bootstrap";
 5 
import { Modal } from 'react-bootstrap'
6 
import { useForm } from "react-hook-form";
 6 
import { useForm } from 'react-hook-form'
7 
import { addNotification } from "../../../redux/notification/notification.actions";
 7 
import { addNotification } from '../../../redux/notification/notification.actions'
8 
import { useDispatch } from "react-redux";
 8 
import { useDispatch } from 'react-redux'
9 
import styled from "styled-components";
 9 
import styled from 'styled-components'
10 
import Datetime from "react-datetime";
 10 
import Datetime from 'react-datetime'
11 
import SearchIcon from "@mui/icons-material/Search";
 11 
import SearchIcon from '@mui/icons-material/Search'
12 
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
 12 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
13 
import EmptySection from "../../../shared/empty-section/EmptySection";
 13 
import EmptySection from '../../../shared/empty-section/EmptySection'
14 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 14 
import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
15 
 
 15 
 
16 
import "react-datetime/css/react-datetime.css";
 16 
import 'react-datetime/css/react-datetime.css'
17 
import ChatList from "../components/ChatList";
 17 
import ChatList from '../components/ChatList'
18 
import TextBox from "../components/TextBox";
 18 
import TextBox from '../components/TextBox'
Línea 19... Línea 19...
19 
 
 19 
 
20 
const StyledShowOptions = styled.div`
 20 
const StyledShowOptions = styled.div`
21 
  height: 342px;
 21 
  height: 342px;
22 
  flex-direction: column;
 22 
  flex-direction: column;
Línea 55... Línea 55...
55 
      align-items: center;
 55 
      align-items: center;
56 
      padding: 0.2rem 0.5rem;
 56 
      padding: 0.2rem 0.5rem;
57 
      border-bottom: 1px solid #e2e2e2;
 57 
      border-bottom: 1px solid #e2e2e2;
58 
    }
 58 
    }
59 
  }
 59 
  }
60 
`;
 60 
`
Línea 61... Línea 61...
61 
 
 61 
 
62 
const OPTIONS = {
 62 
const OPTIONS = {
63 
  GROUP: "group",
 63 
  GROUP: 'group',
64 
  CONFERENCE: "conference",
 64 
  CONFERENCE: 'conference',
65 
  ADD_CONTACTS: "addContacts",
 65 
  ADD_CONTACTS: 'addContacts',
66 
  LIST_CONTACTS: "listContacts",
 66 
  LIST_CONTACTS: 'listContacts',
67 
  INITIAL: null,
 67 
  INITIAL: null
Línea 68... Línea 68...
68 
};
 68 
}
69 
 
 69 
 
70 
const PersonalChat = ({
 70 
const PersonalChat = ({
71 
  entity,
 71 
  entity,
72 
  onClose,
 72 
  onClose,
73 
  onMinimize,
 73 
  onMinimize,
74 
  onRead,
 74 
  onRead,
75 
  not_seen_messages,
 75 
  not_seen_messages,
76 
  minimized,
 76 
  minimized,
77 
  timezones,
 77 
  timezones
78 
}) => {
 78 
}) => {
79 
  const {
 79 
  const {
80 
    // id,
 80 
    // id,
Línea 86... Línea 86...
86 
    url_send,
 86 
    url_send,
87 
    url_upload,
 87 
    url_upload,
88 
    profile,
 88 
    profile,
89 
    url_leave,
 89 
    url_leave,
90 
    url_delete,
 90 
    url_delete,
- 
 
 91 
    url_close,
91 
    url_add_user_to_group,
 92 
    url_add_user_to_group,
92 
    url_get_contact_group_list,
 93 
    url_get_contact_group_list,
93 
    url_get_contacts_availables_for_group,
 94 
    url_get_contacts_availables_for_group,
94 
    url_zoom,
 95 
    url_zoom
95 
  } = entity;
 96 
  } = entity
Línea 96... Línea 97...
96 
 
 97 
 
Línea 97... Línea 98...
97 
  const [optionTab, setOptionTab] = useState(OPTIONS.INITIAL);
 98 
  const [optionTab, setOptionTab] = useState(OPTIONS.INITIAL)
98 
 
 99 
 
Línea 99... Línea 100...
99 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([]);
 100 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
100 
  const [groupContactsList, setGroupContactsList] = useState([]);
 101 
  const [groupContactsList, setGroupContactsList] = useState([])
Línea 101... Línea 102...
101 
 
 102 
 
Línea 102... Línea 103...
102 
  const [confirmModalShow, setConfirmModalShow] = useState(false);
 103 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
103 
  const [showConferenceModal, setShowConferenceModal] = useState(false);
 104 
  const [showConferenceModal, setShowConferenceModal] = useState(false)
104 
 
 105 
 
105 
  const [search, setSearch] = useState("");
 106 
  const [search, setSearch] = useState('')
Línea 106... Línea 107...
106 
 
 107 
 
Línea 107... Línea 108...
107 
  const [messages, setMessages] = useState([]);
 108 
  const [messages, setMessages] = useState([])
108 
  const [oldMessages, setOldMessages] = useState([]);
 109 
  const [oldMessages, setOldMessages] = useState([])
109 
  const [currentPage, setCurrentPage] = useState(1);
 110 
  const [currentPage, setCurrentPage] = useState(1)
Línea 110... Línea 111...
110 
  const [lastPage, setLastPage] = useState(1);
 111 
  const [lastPage, setLastPage] = useState(1)
111 
 
 112 
 
112 
  const [loading, setLoading] = useState(false);
 113 
  const [loading, setLoading] = useState(false)
113 
 
 114 
 
Línea 114... Línea 115...
114 
  const filtredGroupList = groupContactsList.filter((conversation) =>
 115 
  const filtredGroupList = groupContactsList.filter((conversation) =>
115 
    conversation.name.toLowerCase().includes(search.toLowerCase())
 116 
    conversation.name.toLowerCase().includes(search.toLowerCase())
116 
  );
 117 
  )
117 
 
 118 
 
Línea 118... Línea 119...
118 
  // refs
 119 
  // refs
119 
  const conversationListEl = useRef(null);
 120 
  const conversationListEl = useRef(null)
120 
  const loader = useRef(null);
 121 
  const loader = useRef(null)
121 
  const modalActionUrl = useRef("");
 122 
  const modalActionUrl = useRef('')
122 
 
 123 
 
123 
  const handleActive = () => {
 124 
  const handleActive = () => {
124 
    onRead(entity);
 125 
    onRead(entity)
125 
    onMinimize(entity);
 126 
    onMinimize(entity)
126 
  };
 127 
  }
127 
 
 128 
 
128 
  const handleGetMessages = async () => {
 129 
  const handleGetMessages = async () => {
129 
    setLoading(true);
 130 
    setLoading(true)
130 
    const response = await axios.get(url_get_all_messages);
 131 
    const response = await axios.get(url_get_all_messages)
131 
    const resData = response.data;
 132 
    const resData = response.data
132 
    if (!resData.success) {
 133 
    if (!resData.success) {
133 
      return "ha ocurrido un error";
 134 
      return 'ha ocurrido un error'
Línea 134... Línea 135...
134 
    }
 135 
    }
135 
    const updatedMessages = [...resData.data.items].reverse();
 136 
    const updatedMessages = [...resData.data.items].reverse()
136 
    const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
 137 
    const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
137 
      if (
 138 
      if (
138 
        messages.findIndex((message) => message.id === updatedMessage.id) === -1
 139 
        messages.findIndex((message) => message.id === updatedMessage.id) === -1
139 
      ) {
 140 
      ) {
140 
        acum = [...acum, updatedMessage];
 141 
        acum = [...acum, updatedMessage]
141 
      }
 142 
      }
142 
      return acum;
 143 
      return acum
Línea 143... Línea 144...
143 
    }, []);
 144 
    }, [])
144 
 
 145 
 
145 
    if (newMessages.length > 0) {
 146 
    if (newMessages.length > 0) {
146 
      setMessages([...messages, ...newMessages]);
 147 
      setMessages([...messages, ...newMessages])
147 
      setLoading(false);
 148 
      setLoading(false)
148 
      setLastPage(resData.data.pages);
 149 
      setLastPage(resData.data.pages)
149 
      scrollToBottom();
 150 
      scrollToBottom()
150 
    } else {
 151 
    } else {
151 
      setLoading(false);
 152 
      setLoading(false)
152 
    }
 153 
    }
153 
  };
 154 
  }
154 
 
 155 
 
155 
  const handleLoadMore = async () => {
 156 
  const handleLoadMore = async () => {
156 
    await axios
 157 
    await axios
Línea 157... Línea 158...
157 
      .get(`${url_get_all_messages}?page=${currentPage}`)
 158 
      .get(`${url_get_all_messages}?page=${currentPage}`)
Línea 158... Línea 159...
158 
      .then((response) => {
 159 
      .then((response) => {
159 
        const resData = response.data;
 160 
        const resData = response.data
160 
        if (resData.success) {
 161 
        if (resData.success) {
161 
          if (resData.data.page > 1) {
 162 
          if (resData.data.page > 1) {
162 
            const updatedOldMessages = [...resData.data.items].reverse();
 163 
            const updatedOldMessages = [...resData.data.items].reverse()
163 
            setOldMessages([...updatedOldMessages, ...oldMessages]);
 164 
            setOldMessages([...updatedOldMessages, ...oldMessages])
164 
            /* scrollDownBy(100); */
 165 
            /* scrollDownBy(100); */
Línea 165... Línea 166...
165 
          }
 166 
          }
166 
        }
 167 
        }
167 
      });
 168 
      })
Línea 168... Línea 169...
168 
  };
 169 
  }
169 
 
 170 
 
170 
  const handleCloseChat = () => onClose(entity);
 171 
  const handleCloseChat = () => onClose(entity)
171 
 
 172 
 
172 
  const sendMessage = async (message) => {
 173 
  const sendMessage = async (message) => {
173 
    const formData = new FormData();
 174 
    const formData = new FormData()
Línea 174... Línea 175...
174 
    formData.append("message", emojione.toShort(message));
 175 
    formData.append('message', emojione.toShort(message))
175 
    await axios.post(url_send, formData).then((response) => {
 176 
    await axios.post(url_send, formData).then((response) => {
176 
      const resData = response.data;
 177 
      const resData = response.data
177 
      if (resData.success) {
 178 
      if (resData.success) {
Línea 178... Línea 179...
178 
        let newMessage = resData.data;
 179 
        let newMessage = resData.data
179 
 
 180 
 
180 
        online
 181 
        online
181 
          ? (newMessage = { ...newMessage, not_received: false })
 182 
          ? (newMessage = { ...newMessage, not_received: false })
182 
          : (newMessage = { ...newMessage, not_received: true });
 183 
          : (newMessage = { ...newMessage, not_received: true })
183 
 
 184 
 
184 
        setMessages([...messages, newMessage]);
 185 
        setMessages([...messages, newMessage])
185 
      }
 186 
      }
186 
    });
 187 
    })
187 
    // await handleGetMessages()
 188 
    // await handleGetMessages()
Línea 188... Línea 189...
188 
    // setResponseMessage(null)
 189 
    // setResponseMessage(null)
189 
  };
 190 
  }
190 
 
 191 
 
191 
  const showOptions = (tab = OPTIONS.INITIAL) => {
 192 
  const showOptions = (tab = OPTIONS.INITIAL) => {
192 
    onMinimize(entity, false);
 193 
    onMinimize(entity, false)
193 
    setOptionTab(tab);
 194 
    setOptionTab(tab)
194 
  };
 195 
  }
195 
 
 196 
 
196 
  const handleAddPersonToGroup = async (id) => {
 197 
  const handleAddPersonToGroup = async (id) => {
197 
    const formData = new FormData();
 198 
    const formData = new FormData()
198 
    formData.append("uid", id);
 199 
    formData.append('uid', id)
Línea 199... Línea 200...
199 
    await axios.post(url_add_user_to_group, formData).then((response) => {
 200 
    await axios.post(url_add_user_to_group, formData).then((response) => {
200 
      const resData = response.data;
 201 
      const resData = response.data
201 
      if (resData.success) {
 202 
      if (resData.success) {
202 
        loadPersonsAvailable();
 203 
        loadPersonsAvailable()
203 
      }
 204 
      }
204 
    });
 205 
    })
Línea 205... Línea 206...
205 
  };
 206 
  }
206 
 
 207 
 
207 
  const handleConfirmModalAction = async () => {
 208 
  const handleConfirmModalAction = async () => {
208 
    try {
 209 
    try {
209 
      const { data } = await axios.post(modalActionUrl.current);
 210 
      const { data } = await axios.post(modalActionUrl.current)
210 
      if (!data.success) console.log("Error in confirm modal action");
 211 
      if (!data.success) console.log('Error in confirm modal action')
Línea 211... Línea 212...
211 
      handleConfirmModalShow();
 212 
      handleConfirmModalShow()
Línea 212... Línea 213...
212 
      onClose(entity);
 213 
      onClose(entity)
Línea 213... Línea 214...
213 
      return;
 214 
      return
214 
    } catch (error) {
 215 
    } catch (error) {
215 
      console.log(error);
 216 
      console.log(error)
216 
    }
 217 
    }
Línea 217... Línea 218...
217 
  };
 218 
  }
218 
 
 219 
 
Línea 219... Línea 220...
219 
  const handleObserver = (entities) => {
 220 
  const handleObserver = (entities) => {
220 
    const target = entities[0];
 221 
    const target = entities[0]
Línea 221... Línea 222...
221 
    if (target.isIntersecting) {
 222 
    if (target.isIntersecting) {
222 
      setCurrentPage((prevState) => prevState + 1);
 223 
      setCurrentPage((prevState) => prevState + 1)
223 
    }
 224 
    }
224 
  };
 225 
  }
225 
 
 226 
 
226 
  const scrollToBottom = () => {
 227 
  const scrollToBottom = () => {
227 
    if (conversationListEl.current) {
 228 
    if (conversationListEl.current) {
228 
      conversationListEl.current.scrollTop =
 229 
      conversationListEl.current.scrollTop =
Línea 229... Línea 230...
229 
        conversationListEl.current.scrollHeight * 9;
 230 
        conversationListEl.current.scrollHeight * 9
230 
    }
 231 
    }
231 
  };
 232 
  }
232 
 
 233 
 
233 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow);
 234 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
234 
 
 235 
 
235 
  const handleConfirmModalAccept = () => handleConfirmModalAction();
 236 
  const handleConfirmModalAccept = () => handleConfirmModalAction()
236 
 
 237 
 
Línea 237... Línea 238...
237 
  /* const handleResponseMessage = (element) => {
 238 
  /* const handleResponseMessage = (element) => {
238 
    element.mtype === 'text'
 239 
    element.mtype === 'text'
239 
      ? setResponseMessage(element)
 240 
      ? setResponseMessage(element)
240 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
 241 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
241 
 
 242 
 
242 
    textAreaEl.current && textAreaEl.current.focus()
 243 
    textAreaEl.current && textAreaEl.current.focus()
243 
  } */
 244 
  } */
244 
 
 245 
 
Línea 245... Línea 246...
245 
  const displayConferenceModal = () =>
 246 
  const displayConferenceModal = () =>
246 
    setShowConferenceModal(!showConferenceModal);
 247 
    setShowConferenceModal(!showConferenceModal)
247 
 
 248 
 
248 
  const loadPersonsAvailable = async () => {
 249 
  const loadPersonsAvailable = async () => {
Línea 306... Línea 307...
306 
          </li>
 307 
          </li>
307 
        )}
 308 
        )}
308 
        {url_delete && (
 309 
        {url_delete && (
309 
          <li
 310 
          <li
310 
            className="optionsTab__option"
 311 
            className="optionsTab__option"
311 
            style={{ color: "red" }}
 312 
            style={{ color: 'red' }}
312 
            onClick={() => {
 313 
            onClick={() => {
313 
              handleConfirmModalShow();
 314 
              handleConfirmModalShow()
314 
              modalActionUrl.current = url_delete;
 315 
              modalActionUrl.current = url_delete
315 
            }}
 316 
            }}
316 
          >
 317 
          >
317 
            <span className="optionsTab__option__icon">
 318 
            <span className="optionsTab__option__icon">
318 
              <i className="fa fa-trash"></i>
 319 
              <i className="fa fa-trash"></i>
319 
            </span>
 320 
            </span>
Línea 321... Línea 322...
321 
          </li>
 322 
          </li>
322 
        )}
 323 
        )}
323 
        {!!url_leave && (
 324 
        {!!url_leave && (
324 
          <li
 325 
          <li
325 
            className="optionsTab__option"
 326 
            className="optionsTab__option"
326 
            style={{ color: "red" }}
 327 
            style={{ color: 'red' }}
327 
            onClick={() => {
 328 
            onClick={() => {
328 
              handleConfirmModalShow();
 329 
              handleConfirmModalShow()
329 
              modalActionUrl.current = url_leave;
 330 
              modalActionUrl.current = url_leave
330 
            }}
 331 
            }}
331 
          >
 332 
          >
332 
            <span className="optionsTab__option__icon">
 333 
            <span className="optionsTab__option__icon">
333 
              <i className="fa fa-user-times"></i>
 334 
              <i className="fa fa-user-times"></i>
334 
            </span>
 335 
            </span>
Línea 352... Línea 353...
352 
        {availableContactsToAdd.length ? (
 353 
        {availableContactsToAdd.length ? (
353 
          <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align="left" />
 354 
          <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align="left" />
354 
        ) : (
 355 
        ) : (
355 
          availableContactsToAdd.map(({ image, name, id }) => (
 356 
          availableContactsToAdd.map(({ image, name, id }) => (
356 
            <div className="addPersonToGroupTab__person" key={id}>
 357 
            <div className="addPersonToGroupTab__person" key={id}>
357 
              <div className="d-inline-flex" style={{ gap: "5px" }}>
 358 
              <div className="d-inline-flex" style={{ gap: '5px' }}>
358 
                <img
 359 
                <img
359 
                  className="chat-image img-circle pull-left"
 360 
                  className="chat-image img-circle pull-left"
360 
                  height="36"
 361 
                  height="36"
361 
                  width="36"
 362 
                  width="36"
362 
                  src={image}
 363 
                  src={image}
Línea 387... Línea 388...
387 
        </div>
 388 
        </div>
388 
        {filtredGroupList.length ? (
 389 
        {filtredGroupList.length ? (
389 
          filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
 390 
          filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
390 
            return (
 391 
            return (
391 
              <div className="addPersonToGroupTab__person" key={id}>
 392 
              <div className="addPersonToGroupTab__person" key={id}>
392 
                <div style={{ display: "flex", alignItems: "center" }}>
 393 
                <div style={{ display: 'flex', alignItems: 'center' }}>
393 
                  <img
 394 
                  <img
394 
                    className="chat-image img-circle pull-left"
 395 
                    className="chat-image img-circle pull-left"
395 
                    height="36"
 396 
                    height="36"
396 
                    width="36"
 397 
                    width="36"
397 
                    src={image}
 398 
                    src={image}
Línea 408... Línea 409...
408 
                  >
 409 
                  >
409 
                    <i className="fa fa-user-times" />
 410 
                    <i className="fa fa-user-times" />
410 
                  </span>
 411 
                  </span>
411 
                )}
 412 
                )}
412 
              </div>
 413 
              </div>
413 
            );
 414 
            )
414 
          })
 415 
          })
415 
        ) : (
 416 
        ) : (
416 
          <div className="addPersonToGroupTab__person">
 417 
          <div className="addPersonToGroupTab__person">
417 
            {CHAT_LABELS.NOT_CONTACTS}
 418 
            {CHAT_LABELS.NOT_CONTACTS}
418 
          </div>
 419 
          </div>
419 
        )}
 420 
        )}
420 
      </>
 421 
      </>
421 
    ),
 422 
    )
422 
  };
 423 
  }
Línea 423... Línea 424...
423 
 
 424 
 
424 
  // getMessageOnMaximize and subscribe to infinite Loader
 425 
  // getMessageOnMaximize and subscribe to infinite Loader
425 
  useEffect(async () => {
 426 
  useEffect(async () => {
426 
    const options = {
 427 
    const options = {
427 
      root: null,
 428 
      root: null,
428 
      rootMargin: "20px",
 429 
      rootMargin: '20px',
429 
      treshold: 1.0,
 430 
      treshold: 1.0
430 
    };
 431 
    }
431 
    const observer = new IntersectionObserver(handleObserver, options);
 432 
    const observer = new IntersectionObserver(handleObserver, options)
432 
    if (!minimized) {
 433 
    if (!minimized) {
433 
      await handleGetMessages();
 434 
      await handleGetMessages()
434 
      // loader observer
 435 
      // loader observer
435 
      if (loader.current) {
 436 
      if (loader.current) {
436 
        observer.observe(loader.current);
 437 
        observer.observe(loader.current)
437 
      }
 438 
      }
438 
    }
 439 
    }
439 
    return () => {
 440 
    return () => {
440 
      if (loader.current) {
 441 
      if (loader.current) {
441 
        observer.unobserve(loader.current);
 442 
        observer.unobserve(loader.current)
442 
      }
 443 
      }
443 
    };
 444 
    }
Línea 444... Línea 445...
444 
  }, [minimized]);
 445 
  }, [minimized])
445 
 
 446 
 
446 
  // LoadMore on change page
 447 
  // LoadMore on change page
447 
  useEffect(() => {
 448 
  useEffect(() => {
448 
    let loadMore = () => handleLoadMore();
 449 
    let loadMore = () => handleLoadMore()
449 
    loadMore();
 450 
    loadMore()
450 
    return () => {
 451 
    return () => {
451 
      loadMore = null;
 452 
      loadMore = null
Línea 452... Línea 453...
452 
    };
 453 
    }
453 
  }, [currentPage]);
 454 
  }, [currentPage])
454 
 
 455 
 
455 
  // getMessagesInterval
 456 
  // getMessagesInterval
456 
  useEffect(() => {
 457 
  useEffect(() => {
457 
    if (window.location.pathname === "/group/my-groups") {
 458 
    if (window.location.pathname === '/group/my-groups') {
458 
      const items = document.getElementsByClassName("sc-jSgupP");
 459 
      const items = document.getElementsByClassName('sc-jSgupP')
459 
      if (items && items.length > 0) {
 460 
      if (items && items.length > 0) {
460 
        items[0].style.display = "none";
 461 
        items[0].style.display = 'none'
Línea 461... Línea 462...
461 
      }
 462 
      }
462 
    }
 463 
    }
463 
  }, [minimized]);
 464 
  }, [minimized])
464 
 
 465 
 
465 
  useEffect(() => {
 466 
  useEffect(() => {
466 
    let timer;
 467 
    let timer
467 
    if (!minimized && !loading) {
 468 
    if (!minimized && !loading) {
468 
      timer = setTimeout(() => handleGetMessages(), 1000);
 469 
      timer = setTimeout(() => handleGetMessages(), 1000)
469 
    }
 470 
    }
Línea 470... Línea 471...
470 
    return () => {
 471 
    return () => {
471 
      clearTimeout(timer);
 472 
      clearTimeout(timer)
472 
    };
 473 
    }
473 
  }, [minimized, loading]);
 474 
  }, [minimized, loading])
474 
 
 475 
 
Línea 475... Línea 476...
475 
  // useEffect for tabs changing
 476 
  // useEffect for tabs changing
476 
  useEffect(() => {
 477 
  useEffect(() => {
477 
    if (optionTab === "addContacts") loadPersonsAvailable();
 478 
    if (optionTab === 'addContacts') loadPersonsAvailable()
478 
    if (optionTab === "listContacts") loadGroupContacts();
 479 
    if (optionTab === 'listContacts') loadGroupContacts()
479 
  }, [optionTab]);
 480 
  }, [optionTab])
480 
 
 481 
 
481 
  return (
 482 
  return (
482 
    <>
 483 
    <>
483 
      <div className="personal-chat">
 484 
      <div className="personal-chat">
484 
        <div className={`chat-header ${not_seen_messages ? "notify" : ""}`}>
 485 
        <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
485 
          <img src={image} alt="avatar-image" />
 486 
          <img src={image} alt="avatar-image" />
486 
          <div className="info-content">
 487 
          <div className="info-content">
487 
            <a href={profile} target="_blank" rel="noreferrer">
 488 
            <a href={profile} target="_blank" rel="noreferrer">
488 
              {name}
 489 
              {name}
489 
            </a>
 490 
            </a>
490 
            {type === "user" && (
 491 
            {type === 'user' && (
491 
              <small className={online ? "online" : "offline"}>
 492 
              <small className={online ? 'online' : 'offline'}>
492 
                {online ? "En línea" : "Desconectado"}
 493 
                {online ? 'En línea' : 'Desconectado'}
493 
              </small>
 494 
              </small>
494 
            )}
 495 
            )}
495 
          </div>
 496 
          </div>
496 
          <div className="options ml-auto">
 497 
          <div className="options ml-auto">
497 
            <i
 498 
            <i
498 
              className="cursor-pointer fa fa-gear"
 499 
              className="cursor-pointer fa fa-gear"
499 
              onClick={() =>
 500 
              onClick={() =>
500 
                showOptions(
 501 
                showOptions(
501 
                  type === "user" ? OPTIONS.CONFERENCE : OPTIONS.GROUP
 502 
                  type === 'user' ? OPTIONS.CONFERENCE : OPTIONS.GROUP
502 
                )
 503 
                )
503 
              }
 504 
              }
504 
            />
 505 
            />
505 
            <i
 506 
            <i
Línea 513... Línea 514...
513 
          </div>
 514 
          </div>
514 
        </div>
 515 
        </div>
Línea 515... Línea 516...
515 
 
 516 
 
516 
        <div
 517 
        <div
517 
          className="panel-body"
 518 
          className="panel-body"
518 
          style={{ display: !minimized ? "block" : "none" }}
 519 
          style={{ display: !minimized ? 'block' : 'none' }}
519 
        >
 520 
        >
520 
          {optionTab ? (
 521 
          {optionTab ? (
521 
            <StyledShowOptions>
 522 
            <StyledShowOptions>
522 
              <span className="optionBack" onClick={() => showOptions()}>
 523 
              <span className="optionBack" onClick={() => showOptions()}>
Línea 551... Línea 552...
551 
      <ConferenceModal
 552 
      <ConferenceModal
552 
        show={showConferenceModal}
 553 
        show={showConferenceModal}
553 
        timezones={timezones}
 554 
        timezones={timezones}
554 
        zoomUrl={url_zoom}
 555 
        zoomUrl={url_zoom}
555 
        onCreate={() => {
 556 
        onCreate={() => {
556 
          showOptions();
 557 
          showOptions()
557 
          displayConferenceModal();
 558 
          displayConferenceModal()
558 
        }}
 559 
        }}
559 
      />
 560 
      />
560 
    </>
 561 
    </>
561 
  );
 562 
  )
562 
};
 563 
}
Línea 563... Línea 564...
563 
 
 564 
 
564 
const StyleModal = ({
 565 
const StyleModal = ({
565 
  title = "Crea una conferencia",
 566 
  title = 'Crea una conferencia',
566 
  size = "md",
 567 
  size = 'md',
567 
  show = false,
 568 
  show = false,
568 
  children,
 569 
  children
569 
}) => {
 570 
}) => {
Línea 570... Línea 571...
570 
  const [isShow, setIsShow] = useState(show);
 571 
  const [isShow, setIsShow] = useState(show)
571 
 
 572 
 
572 
  useEffect(() => {
 573 
  useEffect(() => {
Línea 573... Línea 574...
573 
    setIsShow(show);
 574 
    setIsShow(show)
Línea 574... Línea 575...
574 
  }, [show]);
 575 
  }, [show])
575 
 
 576 
 
576 
  const closeModal = () => setIsShow(false);
 577 
  const closeModal = () => setIsShow(false)
577 
 
 578 
 
578 
  return (
 579 
  return (
579 
    <Modal show={isShow} onHide={closeModal} style={{ overflowY: "scroll" }}>
 580 
    <Modal show={isShow} onHide={closeModal} style={{ overflowY: 'scroll' }}>
580 
      <Modal.Header closeButton>
 581 
      <Modal.Header closeButton>
581 
        <Modal.Title>{title}</Modal.Title>
 582 
        <Modal.Title>{title}</Modal.Title>
582 
      </Modal.Header>
 583 
      </Modal.Header>
Línea 583... Línea 584...
583 
      <Modal.Body>{children}</Modal.Body>
 584 
      <Modal.Body>{children}</Modal.Body>
584 
    </Modal>
 585 
    </Modal>
585 
  );
 586 
  )
586 
};
 587 
}
587 
 
 588 
 
588 
export const ConferenceModal = ({
 589 
export const ConferenceModal = ({
589 
  show = false,
 590 
  show = false,
590 
  timezones = {},
 591 
  timezones = {},
591 
  zoomUrl = "",
 592 
  zoomUrl = '',
592 
  onCreate = () => null,
 593 
  onCreate = () => null
593 
}) => {
 594 
}) => {
594 
  const dt = new Date();
 595 
  const dt = new Date()
595 
  const { handleSubmit, register, errors, reset } = useForm({ mode: "all" });
 596 
  const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
596 
  const [date, setDate] = useState({
 597 
  const [date, setDate] = useState({
597 
    year: dt.toLocaleString("default", { year: "numeric" }),
 598 
    year: dt.toLocaleString('default', { year: 'numeric' }),
598 
    month: dt.toLocaleString("default", { month: "2-digit" }),
 599 
    month: dt.toLocaleString('default', { month: '2-digit' }),
599 
    day: dt.toLocaleString("default", { day: "2-digit" }),
 600 
    day: dt.toLocaleString('default', { day: '2-digit' })
600 
  });
 601 
  })
601 
  const [time, setTime] = useState(
 602 
  const [time, setTime] = useState(
602 
    dt.toLocaleString("es", {
 603 
    dt.toLocaleString('es', {
603 
      hour: "numeric",
 604 
      hour: 'numeric',
604 
      minute: "2-digit",
 605 
      minute: '2-digit',
Línea 605... Línea 606...
605 
      second: "2-digit",
 606 
      second: '2-digit'
Línea 606... Línea 607...
606 
    })
 607 
    })
607 
  );
 608 
  )
608 
  const [coferenceType, setConferenceType] = useState(1);
 609 
  const [coferenceType, setConferenceType] = useState(1)
609 
  const dispatch = useDispatch();
 610 
  const dispatch = useDispatch()
610 
 
 611 
 
611 
  const handleChange = (value) => setConferenceType(value);
 612 
  const handleChange = (value) => setConferenceType(value)
612 
 
 613 
 
613 
  const handleDateTime = (value) => {
 614 
  const handleDateTime = (value) => {
614 
    setDate({
 615 
    setDate({
615 
      ...date,
 616 
      ...date,
616 
      year: new Intl.DateTimeFormat("es", { year: "numeric" }).format(value),
 617 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
617 
      month: new Intl.DateTimeFormat("es", { month: "2-digit" }).format(value),
 618 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
618 
      day: new Intl.DateTimeFormat("es", { day: "2-digit" }).format(value),
 619 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
619 
    });
 620 
    })
620 
    setTime(
 621 
    setTime(
Línea 621... Línea 622...
621 
      new Intl.DateTimeFormat("es", {
 622 
      new Intl.DateTimeFormat('es', {
622 
        hour: "numeric",
 623 
        hour: 'numeric',
623 
        minute: "2-digit",
 624 
        minute: '2-digit',
Línea 624... Línea 625...
624 
        second: "numeric",
 625 
        second: 'numeric'
625 
      }).format(value)
 626 
      }).format(value)
626 
    );
 627 
    )
627 
  };
 628 
  }
628 
 
 629 
 
Línea 629... Línea 630...
629 
  const onSubmit = async (data) => {
 630 
  const onSubmit = async (data) => {
Línea 630... Línea 631...
630 
    try {
 631 
    try {
631 
      const formData = new FormData();
 632 
      const formData = new FormData()
632 
 
 633 
 
633 
      Object.entries(data).forEach(([key, value]) =>
 634 
      Object.entries(data).forEach(([key, value]) =>
Línea 634... Línea 635...
634 
        formData.append(key, value)
 635 
        formData.append(key, value)
635 
      );
 636 
      )
636 
      formData.append("date", `${date.year}-${date.month}-${date.day}`);
 637 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
637 
      formData.append("time", time);
 638 
      formData.append('time', time)
638 
 
 639 
 
639 
      const { data: response } = await axios.post(zoomUrl, formData);
 640 
      const { data: response } = await axios.post(zoomUrl, formData)
640 
 
 641 
 
641 
      if (!response.success && typeof response.data === "string") {
 642 
      if (!response.success && typeof response.data === 'string') {
Línea 642... Línea 643...
642 
        dispatch(addNotification({ msg: response.data, style: "danger" }));
 643 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
643 
        return;
 644 
        return
644 
      }
 645 
      }
645 
 
 646 
 
646 
      if (!response.success && typeof response.data === "object") {
 647 
      if (!response.success && typeof response.data === 'object') {
647 
        Object.entries(response.data).forEach(([key, value]) => {
 648 
        Object.entries(response.data).forEach(([key, value]) => {
648 
          dispatch(
 649 
          dispatch(
649 
            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })
 650 
            addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' })
650 
          );
 651 
          )
651 
        });
 652 
        })
Línea 652... Línea 653...
652 
        return;
 653 
        return
653 
      }
 654 
      }
654 
 
 655 
 
655 
      dispatch(addNotification({ msg: response.data, style: "success" }));
 656 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
Línea 671... Línea 672...
671 
          <input
 672 
          <input
672 
            type="text"
 673 
            type="text"
673 
            name="title"
 674 
            name="title"
674 
            className="form-control"
 675 
            className="form-control"
675 
            maxLength={128}
 676 
            maxLength={128}
676 
            ref={register({ required: "Por favor ingrese un título" })}
 677 
            ref={register({ required: 'Por favor ingrese un título' })}
677 
          />
 678 
          />
678 
          {errors.title && (
 679 
          {errors.title && (
679 
            <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
 680 
            <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
680 
          )}
 681 
          )}
681 
        </div>
 682 
        </div>
Línea 683... Línea 684...
683 
          <label htmlFor="first_name">Descripción</label>
 684 
          <label htmlFor="first_name">Descripción</label>
684 
          <input
 685 
          <input
685 
            type="text"
 686 
            type="text"
686 
            name="description"
 687 
            name="description"
687 
            className="form-control"
 688 
            className="form-control"
688 
            ref={register({ required: "Por favor ingrese una descripción" })}
 689 
            ref={register({ required: 'Por favor ingrese una descripción' })}
689 
          />
 690 
          />
690 
          {errors.description && (
 691 
          {errors.description && (
691 
            <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
 692 
            <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
692 
          )}
 693 
          )}
693 
        </div>
 694 
        </div>
Línea 701... Línea 702...
701 
          >
 702 
          >
702 
            <option value="i">Inmediata</option>
 703 
            <option value="i">Inmediata</option>
703 
            <option value="s">Programada</option>
 704 
            <option value="s">Programada</option>
704 
          </select>
 705 
          </select>
705 
        </div>
 706 
        </div>
706 
        {coferenceType === "s" && (
 707 
        {coferenceType === 's' && (
707 
          <div className="form-group">
 708 
          <div className="form-group">
708 
            <label htmlFor="timezone">Horario</label>
 709 
            <label htmlFor="timezone">Horario</label>
709 
            <Datetime
 710 
            <Datetime
710 
              dateFormat="DD-MM-YYYY"
 711 
              dateFormat="DD-MM-YYYY"
711 
              onChange={(e) => {
 712 
              onChange={(e) => {
712 
                if (e.toDate) {
 713 
                if (e.toDate) {
713 
                  handleDateTime(e.toDate());
 714 
                  handleDateTime(e.toDate())
714 
                }
 715 
                }
715 
              }}
 716 
              }}
716 
              inputProps={{ className: "form-control" }}
 717 
              inputProps={{ className: 'form-control' }}
717 
              initialValue={Date.parse(new Date())}
 718 
              initialValue={Date.parse(new Date())}
718 
              closeOnSelect
 719 
              closeOnSelect
719 
            />
 720 
            />
720 
          </div>
 721 
          </div>
721 
        )}
 722 
        )}
722 
        <div className="form-group">
 723 
        <div className="form-group">
723 
          <label htmlFor="timezone">Zona horaria</label>
 724 
          <label htmlFor="timezone">Zona horaria</label>
724 
          <select
 725 
          <select
725 
            className="form-control"
 726 
            className="form-control"
726 
            name="timezone"
 727 
            name="timezone"
727 
            ref={register({ required: "Por favor elige una Zona horaria" })}
 728 
            ref={register({ required: 'Por favor elige una Zona horaria' })}
728 
          >
 729 
          >
729 
            <option value="" hidden>
 730 
            <option value="" hidden>
730 
              Zona horaria
 731 
              Zona horaria
731 
            </option>
 732 
            </option>
732 
            {timezones &&
 733 
            {timezones &&
Línea 759... Línea 760...
759 
          <input
 760 
          <input
760 
            type="password"
 761 
            type="password"
761 
            name="password"
 762 
            name="password"
762 
            className="form-control"
 763 
            className="form-control"
763 
            ref={register({
 764 
            ref={register({
764 
              required: "Por favor ingrese una contraseña",
 765 
              required: 'Por favor ingrese una contraseña',
765 
              maxLength: {
 766 
              maxLength: {
766 
                value: 6,
 767 
                value: 6,
767 
                message: "La contraseña debe tener al menos 6 digitos",
 768 
                message: 'La contraseña debe tener al menos 6 digitos'
768 
              },
 769 
              }
769 
            })}
 770 
            })}
770 
          />
 771 
          />
771 
          {errors.password && (
 772 
          {errors.password && (
772 
            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 773 
            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
773 
          )}
 774 
          )}
Línea 775... Línea 776...
775 
        <button className="btn btn-primary" type="submit">
 776 
        <button className="btn btn-primary" type="submit">
776 
          Crear
 777 
          Crear
777 
        </button>
 778 
        </button>
778 
      </form>
 779 
      </form>
779 
    </StyleModal>
 780 
    </StyleModal>
780 
  );
 781 
  )
781 
};
 782 
}
Línea 782... Línea 783...
782 
 
 783