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