Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { axios, scrollToBottom } from '../../utils'
3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../redux/notification/notification.actions'
5 
 
6 
import Chat from './Chat'
7 
import ConferenceModal from '../modals/ConferenceModal'
8 
import useMessages from '../../hooks/useMessages'
9 
import ConfirmModal from '../modals/ConfirmModal'
10 
 
11 
const CHAT_TABS = {
12 
  CHAT: 'CHAT',
13 
  DEFAULT: 'DEFAULT',
14 
  GROUP_MEMBERS: 'GROUP_MEMBERS',
1668 stevensc 15 
  ADD_GROUP_MEMBER: 'ADD_GROUP_MEMBER'
5 stevensc 16 
}
17 
 
523 stevensc 18 
const ChatBox = ({ activeTab, entity, changeTab, changeConversation }) => {
5 stevensc 19 
  const {
20 
    url_get_all_messages,
21 
    url_mark_received,
22 
    not_received_messages,
23 
    not_seen_messages,
24 
    url_zoom,
25 
    url_send,
26 
    url_upload,
27 
    url_mark_seen,
28 
    // url_close,
29 
    url_add_user_to_group, // Group url
30 
    url_delete, // Group url
31 
    url_get_contact_group_list, // Group url
32 
    url_leave, // Group url
33 
    name,
1668 stevensc 34 
    profile
5 stevensc 35 
  } = entity
36 
 
1677 stevensc 37 
  const { messages, loadMore, loading, report } =
38 
    useMessages(url_get_all_messages)
5 stevensc 39 
  const [isShowConferenceModal, setisShowConferenceModal] = useState(false)
40 
  const [isShowConfirmModal, setisShowConfirmModal] = useState(false)
41 
  const [options, setOptions] = useState([])
42 
  const scrollRef = useRef(null)
43 
  const actionUrl = useRef('')
44 
  const dispatch = useDispatch()
45 
 
46 
  const toggleConfirmModal = () => {
47 
    setisShowConfirmModal(!isShowConfirmModal)
48 
  }
49 
 
50 
  const toggleConferenceModal = () => {
51 
    setisShowConferenceModal(!isShowConferenceModal)
52 
  }
53 
 
54 
  const deleteGroup = async (url) => {
55 
    axios.post(url).then(({ data: response }) => {
56 
      const { data, success } = response
57 
      if (!success) {
58 
        const errorMessage =
59 
          typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
60 
        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
61 
        return
62 
      }
63 
 
64 
      toggleConfirmModal()
65 
      changeConversation(null)
66 
      changeTab(CHAT_TABS.DEFAULT)
67 
    })
68 
  }
69 
 
70 
  useEffect(() => {
71 
    if (not_seen_messages) axios.post(url_mark_seen)
72 
    if (not_received_messages) axios.post(url_mark_received)
73 
    if (options.length) setOptions([])
74 
  }, [entity])
75 
 
76 
  useEffect(() => {
77 
    if (url_leave) {
78 
      setOptions((prevOptions) =>
79 
        prevOptions.concat({
80 
          url: url_leave,
81 
          label: 'Dejar Grupo',
82 
          action: () => {
83 
            toggleConfirmModal()
84 
            actionUrl.current = url_leave
1668 stevensc 85 
          }
5 stevensc 86 
        })
87 
      )
88 
    }
89 
    if (url_delete) {
90 
      setOptions((prevOptions) =>
91 
        prevOptions.concat({
92 
          url: url_delete,
93 
          label: 'Eliminar Grupo',
94 
          action: () => {
95 
            toggleConfirmModal()
96 
            actionUrl.current = url_delete
1668 stevensc 97 
          }
5 stevensc 98 
        })
99 
      )
100 
    }
101 
    if (url_get_contact_group_list) {
102 
      setOptions((prevOptions) =>
103 
        prevOptions.concat({
104 
          url: url_get_contact_group_list,
105 
          label: 'Integrantes',
1668 stevensc 106 
          action: () => changeTab(CHAT_TABS.GROUP_MEMBERS)
5 stevensc 107 
        })
108 
      )
109 
    }
110 
    if (url_add_user_to_group) {
111 
      setOptions((prevOptions) =>
112 
        prevOptions.concat({
113 
          url: url_add_user_to_group,
114 
          label: 'Agregar Contactos',
1668 stevensc 115 
          action: () => changeTab(CHAT_TABS.ADD_GROUP_MEMBER)
5 stevensc 116 
        })
117 
      )
118 
    }
119 
    if (url_zoom) {
120 
      setOptions((prevOptions) =>
121 
        prevOptions.concat({
122 
          url: url_zoom,
123 
          label: 'Crear Conferencia',
1668 stevensc 124 
          action: toggleConferenceModal
5 stevensc 125 
        })
126 
      )
127 
    }
128 
  }, [entity])
129 
 
130 
  return (
131 
    <>
132 
      <Chat>
133 
        <Chat.Header
523 stevensc 134 
          onClose={() =>
135 
            activeTab === CHAT_TABS.DEFAULT
136 
              ? changeConversation(null)
137 
              : changeTab(CHAT_TABS.DEFAULT)
138 
          }
5 stevensc 139 
          options={options}
140 
        >
141 
          <Chat.Title url={profile}>{name}</Chat.Title>
142 
        </Chat.Header>
143 
 
1677 stevensc 144 
        <Chat.List
145 
          messages={messages}
146 
          onPagination={loadMore}
147 
          loading={loading}
148 
          scrollRef={scrollRef}
149 
          onReport={report}
150 
        />
5 stevensc 151 
 
152 
        <Chat.SubmitForm
153 
          sendUrl={url_send}
154 
          uploadUrl={url_upload}
155 
          onSubmit={() => scrollToBottom(scrollRef)}
156 
        />
157 
      </Chat>
158 
      <ConferenceModal
159 
        show={isShowConferenceModal}
160 
        zoomUrl={url_zoom}
161 
        onClose={toggleConferenceModal}
162 
      />
163 
      <ConfirmModal
164 
        show={isShowConfirmModal}
165 
        onClose={toggleConfirmModal}
166 
        onAccept={() => deleteGroup(actionUrl.current)}
167 
      />
168 
    </>
169 
  )
170 
}
171 
 
172 
export default ChatBox