Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14574 stevensc 1 
import React from 'react'
14176 stevensc 2 
import { useState, useEffect } from 'react'
14580 stevensc 3 
import { axios } from '../../utils'
14176 stevensc 4 
import Contacts from './contacts/Contacts'
5 
import NotificationAlert from '../../shared/notification/NotificationAlert'
6 
import Groups from './groups/Groups'
7 
import PersonalChat from './personal-chat/PersonalChat'
11350 nelberth 8 
 
14176 stevensc 9 
const notifyAudio = new Audio('/audio/chat.mp3')
11350 nelberth 10 
 
11 
const Chat = (props) => {
14176 stevensc 12 
	// states
14580 stevensc 13 
	const [fullChats, setFullChats] = useState([])
14176 stevensc 14 
	const [contacts, setContacts] = useState([])
15 
	const [groups, setGroups] = useState([])
16 
	const [activeChats, setActiveChats] = useState([])
17 
	const [isChatOpen, setIsChatOpen] = useState(false)
18 
	const [isMuted, setIsMuted] = useState(false)
19 
	const [activeTab, setActiveTab] = useState('user')
20 
	const [search, setSearch] = useState('')
21 
	const [loading, setLoading] = useState(false)
11350 nelberth 22 
 
14176 stevensc 23 
	const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
24 
	const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
11350 nelberth 25 
 
14176 stevensc 26 
	const handleEntities = entities => {
14580 stevensc 27 
		setFullChats([...entities])
14176 stevensc 28 
		let newUserContacts = []
29 
		let newGroups = []
30 
		entities.map((entity) => {
31 
			if (entity.not_received_messages) {
32 
				handleNewMessage(entity)
33 
			}
34 
			switch (entity.type) {
35 
			case 'user':
36 
				newUserContacts = [...newUserContacts, entity]
37 
				handleUpdateOnline(entity)
38 
				break
39 
			case 'group':
40 
				newGroups = [...newGroups, entity]
41 
				break
42 
			default:
43 
				break
44 
			}
45 
		})
46 
		setContacts(newUserContacts)
47 
		setGroups(newGroups)
48 
	}
14574 stevensc 49 
 
50 
	useEffect(() => {
51 
		axios.get('/chat/heart-beat')
52 
			.then(({ data }) => {
53 
				if (data.success) {
54 
					const entities = data.data
55 
 
56 
					entities.map(entity => {
57 
						if (entity.is_open !== 0) {
58 
							handleOpenConversation(entity, false)
59 
						}
60 
					})
61 
				}
62 
			})
63 
	}, [])
64 
 
14176 stevensc 65 
	const heartBeat = async () => {
66 
		try {
67 
			const res = await axios.get('/chat/heart-beat')
68 
			let entities = []
69 
			const resData = res.data
70 
			if (resData.success) {
71 
				entities = resData.data
72 
				handleEntities(entities)
73 
			}
74 
			return entities
75 
		} catch (error) {
76 
			console.log('>>: chat error > ', error)
77 
		}
78 
	}
11350 nelberth 79 
 
80 
 
14176 stevensc 81 
	const handleUpdateOnline = (entity) => {
82 
		const existingChatId = activeChats.findIndex(
83 
			(activeChat) => activeChat.id === entity.id
84 
		)
85 
		if (existingChatId >= 0) {
86 
			if (activeChats[existingChatId].online !== entity.online) {
87 
				const newActiveChats = [...activeChats]
88 
				newActiveChats[existingChatId].online = entity.online
89 
				setActiveChats(newActiveChats)
90 
			}
91 
		}
92 
	}
11350 nelberth 93 
 
14176 stevensc 94 
	const handleNewMessage = async (unseeEntity) => {
14580 stevensc 95 
		await axios.post(unseeEntity.url_mark_received).then((response) => {
96 
			('')
97 
		})
14176 stevensc 98 
		if (!activeChats.some((activeChat) => activeChat.id === unseeEntity.id)) {
99 
			setActiveChats([...activeChats, { ...unseeEntity, minimized: false }])
100 
			playNotifyAudio()
101 
		} else {
102 
			const existingChatId = activeChats.findIndex(
103 
				(activeChat) => activeChat.id === unseeEntity.id
104 
			)
105 
			if (!activeChats[existingChatId].unsee_messages) {
106 
				const newActiveChats = [...activeChats]
107 
				newActiveChats[existingChatId].unsee_messages = true
108 
				setActiveChats(newActiveChats)
109 
				playNotifyAudio(newActiveChats[existingChatId].minimized)
110 
			}
111 
		}
112 
	}
11350 nelberth 113 
 
14176 stevensc 114 
	const handleOpenConversation = (entity, minimized = false) => {
115 
		if (activeChats.length < 3 && !activeChats.some((el) => el.id === entity.id)) {
116 
			setActiveChats([...activeChats, { ...entity, minimized: minimized }])
117 
		}
118 
		if (activeChats.length >= 3 && !activeChats.some((el) => el.id === entity.id)) {
119 
			activeChats.map((el, index) => {
14580 stevensc 120 
				if (index === 0) {
121 
					axios.post(el.url_close)
122 
				}
14176 stevensc 123 
			})
124 
			const newActiveChats = activeChats.filter((el, index) => index !== 0)
125 
			setActiveChats([...newActiveChats, { ...entity, minimized: minimized }])
126 
		}
127 
	}
11350 nelberth 128 
 
14574 stevensc 129 
	const handleReadChat = async (index) => {
130 
		const newActiveChats = [...activeChats]
131 
		if (activeChats[index].not_seen_messages) {
132 
			const seen = await axios.post(activeChats[index].url_mark_seen)
133 
			if (seen.data.success) {
134 
				newActiveChats[index].not_seen_messages = false
135 
			}
136 
		}
137 
		if (activeChats[index].not_received_messages) {
138 
			const seen = await axios.post(activeChats[index].url_mark_received)
139 
			if (seen.data.success) {
140 
				newActiveChats[index].not_received_messages = false
141 
			}
142 
		}
143 
		if (activeChats !== newActiveChats)
14176 stevensc 144 
			setActiveChats(newActiveChats)
145 
	}
11350 nelberth 146 
 
14176 stevensc 147 
	const handleMinimizeChat = (chatIndex, minimize) => {
148 
		const newActiveChats = [...activeChats]
149 
		switch (minimize) {
150 
		case false:
151 
			newActiveChats[chatIndex].minimized = false
152 
			break
153 
		default:
154 
			newActiveChats[chatIndex].minimized =
14574 stevensc 155 
					!newActiveChats[chatIndex].minimized
14176 stevensc 156 
			break
157 
		}
158 
		setActiveChats(newActiveChats)
159 
	}
11350 nelberth 160 
 
14176 stevensc 161 
	const handleCloseChat = (entityId, url_close) => {
162 
		let newActiveChats = []
163 
		setLoading(true)
14580 stevensc 164 
		axios.post(url_close).then((response) => {
165 
			const resData = response.data
166 
		})
14176 stevensc 167 
		newActiveChats = activeChats.filter(
168 
			(activeChat) => activeChat.id !== entityId
169 
		)
170 
		setActiveChats(newActiveChats)
171 
		setLoading(false)
172 
	}
11350 nelberth 173 
 
14176 stevensc 174 
	const playNotifyAudio = (minimized = true) => {
175 
		if (!isMuted && minimized) {
176 
			notifyAudio.play()
177 
		}
178 
	}
11350 nelberth 179 
 
14176 stevensc 180 
	const handleMute = () => {
181 
		setIsMuted(!isMuted)
182 
		if (isMuted) {
183 
			notifyAudio.play()
184 
		}
185 
	}
11350 nelberth 186 
 
14176 stevensc 187 
	const handleChangeTab = (tab) => {
188 
		setActiveTab(tab)
189 
	}
11350 nelberth 190 
 
14176 stevensc 191 
	useEffect(() => {
192 
		if (!loading) {
14574 stevensc 193 
			const fetchData = async () => {
194 
				setLoading(true)
195 
				const entities = await heartBeat() || []
196 
				setLoading(false)
197 
 
198 
				return entities
14176 stevensc 199 
			}
14574 stevensc 200 
 
201 
			setTimeout(() => {
202 
				fetchData()
203 
			}, '2000')
14176 stevensc 204 
		}
14574 stevensc 205 
	}, [loading])
11350 nelberth 206 
 
14176 stevensc 207 
	useEffect(() => {
208 
		emojione.imageType = 'png'
209 
		emojione.sprites = false
210 
		emojione.ascii = true
211 
		emojione.imagePathPNG = props.emojiOnePath
212 
	}, [])
11350 nelberth 213 
 
14574 stevensc 214 
	return (window.innerWidth > 1000 && window.location.pathname !== '/chat') ? (
14176 stevensc 215 
		<React.Fragment>
216 
			<div id="drupalchat-wrapper">
217 
				<div id="drupalchat">
218 
					<div className="item-list" id="chatbox_chatlist">
219 
						<ul id="mainpanel">
220 
							<li id="chatpanel" className="first last">
14574 stevensc 221 
								<div className="subpanel">
14176 stevensc 222 
									<div
223 
										className="subpanel_title"
14574 stevensc 224 
										onClick={(e) => (e.currentTarget === e.target) && setIsChatOpen(!isChatOpen)}
14176 stevensc 225 
									>
14574 stevensc 226 
										<a
227 
											href="/chat"
228 
											className="text-gray text-chat-title"
14176 stevensc 229 
										>
14574 stevensc 230 
											Chat
231 
											<i className="fa fa-maximize ml-3" />
232 
										</a>
233 
										<div className="subpanel_title-icons">
14176 stevensc 234 
											<i
14574 stevensc 235 
												className={`icon ${isMuted ? 'icon-volume-off' : 'icon-volume-2'} text-20`}
14176 stevensc 236 
												onClick={handleMute}
14574 stevensc 237 
											/>
238 
											<i
239 
												className={`fa ${isChatOpen ? 'fa-angle-down' : 'fa-angle-up'} text-20`}
240 
												onClick={() => setIsChatOpen(!isChatOpen)}
241 
											/>
242 
										</div>
14176 stevensc 243 
									</div>
244 
									<div
245 
										id="showhidechatlist"
14574 stevensc 246 
										style={{ display: isChatOpen ? 'grid' : 'none' }}
14176 stevensc 247 
									>
248 
										<div
249 
											className="drupalchat_search_main chatboxinput"
250 
											style={{ background: '#f9f9f9' }}
251 
										>
14574 stevensc 252 
											<input
253 
												className="drupalchat_searchinput live-search-box"
254 
												id="live-search-box"
255 
												type="text"
256 
												name='search'
257 
												value={search}
258 
												onChange={e => setSearch(e.target.value || '')}
259 
											/>
260 
											<i className="searchbutton fas fa-search" />
14176 stevensc 261 
										</div>
262 
										<div
263 
											className="drupalchat_search_main chatboxinput"
264 
											style={{ background: '#f9f9f9' }}
265 
										>
14574 stevensc 266 
											<button
267 
												className={`${activeTab === 'user' ? 'active' : ''}`}
268 
												onClick={() => handleChangeTab('user')}
14176 stevensc 269 
											>
14574 stevensc 270 
												Contactos
271 
											</button>
272 
											<button
273 
												className={`${activeTab === 'group' ? 'active' : ''}`}
274 
												onClick={() => handleChangeTab('group')}
14176 stevensc 275 
											>
14574 stevensc 276 
												Grupos
277 
											</button>
14176 stevensc 278 
										</div>
279 
										<div
280 
											className="contact-list chatboxcontent"
281 
											style={{
282 
												display: activeTab === 'user' ? 'block' : 'none',
283 
											}}
284 
										>
285 
											<Contacts
286 
												contacts={filtredContacts}
287 
												onOpenConversation={handleOpenConversation}
288 
											/>
289 
										</div>
290 
										<div
291 
											className="group-list chatboxcontent"
292 
											style={{
293 
												display: activeTab === 'group' ? 'block' : 'none',
294 
											}}
295 
										>
296 
											<ul id="group-list-ul" className="live-search-list-group">
297 
												<Groups
298 
													groups={filtredGroups}
299 
													onOpenConversation={handleOpenConversation}
300 
												/>
301 
											</ul>
302 
										</div>
303 
										<div
304 
											className="group-contacts-list chatboxcontent"
305 
											style={{ display: 'none' }}
306 
										>
307 
											<div style={{ textAlign: 'center', fontSize: '13px' }}>
14574 stevensc 308 
												Integrantes del grupo
14176 stevensc 309 
											</div>
310 
											<ul
311 
												id="contact-group-list-ul"
312 
												className="live-search-list"
313 
											></ul>
314 
										</div>
315 
									</div>
316 
								</div>
317 
							</li>
318 
						</ul>
319 
					</div>
320 
				</div>
321 
			</div>
14574 stevensc 322 
			<div style={{ display: 'flex' }}>
14176 stevensc 323 
				{activeChats.map((entity, index) => (
324 
					<PersonalChat
325 
						key={entity.id}
326 
						entity={entity}
327 
						index={index}
328 
						onClose={handleCloseChat}
329 
						onMinimize={handleMinimizeChat}
330 
						onRead={handleReadChat}
331 
					/>
332 
				))}
333 
			</div>
334 
			<NotificationAlert />
335 
		</React.Fragment>
336 
	) : (
337 
		''
338 
	)
339 
}
11350 nelberth 340 
 
14574 stevensc 341 
export default Chat