Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14579 | Rev 14582 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
14581 stevensc 1 
/* eslint-disable react/prop-types */
14176 stevensc 2 
import React from 'react'
3 
import { useState, useRef, useEffect } from 'react'
4 
import styled from 'styled-components'
5 
import { axios } from '../../../utils'
6 
import Emojione from './emojione/Emojione'
7 
import SendFileModal from './send-file-modal/SendFileModal'
8 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
9 
import MessageTemplate from './messageTemplate/MessageTemplate'
11350 nelberth 10 
 
11 
const StyledChatHead = styled.div`
12 
  .notify {
13 
    animation: notify 2s infinite;
14 
  }
15 
 
16 
  @keyframes notify {
17 
    0% {
18 
      background-color: unset;
19 
    }
20 
    50% {
21 
      background-color: #00b0ff;
22 
    }
23 
    100% {
24 
      background-color: unset;
25 
    }
26 
  }
14176 stevensc 27 
`
11350 nelberth 28 
 
29 
const StyledShowOptions = styled.div`
30 
  height: 342px;
31 
  flex-direction: column;
32 
  overflow-y: auto;
33 
  position: relative;
34 
  &.show {
35 
    display: flex;
36 
  }
37 
  &.hide {
38 
    display: none;
39 
  }
40 
  .optionBack {
41 
    margin: 1rem 0 0.5rem 1rem;
42 
    cursor: pointer;
43 
  }
44 
  .optionsTab {
45 
    &__option {
46 
      padding: 0.5rem;
47 
      border-bottom: 1px solid #e2e2e2;
48 
      cursor: pointer;
49 
      &:hover {
50 
        background-color: #e2e2e2;
51 
      }
52 
      &__icon {
53 
        margin-right: 0.3rem;
54 
      }
55 
    }
56 
  }
57 
  .addPersonToGroupTab {
58 
    display: flex;
59 
    flex-direction: column;
60 
    &__person {
61 
      display: flex;
62 
      justify-content: space-between;
63 
      align-items: center;
64 
      padding: 0.2rem 0.5rem;
65 
      border-bottom: 1px solid #e2e2e2;
66 
    }
67 
  }
14176 stevensc 68 
`
11350 nelberth 69 
 
14581 stevensc 70 
const PersonalChat = ({ entity, index, onClose, onMinimize, onRead }) => {
71 
 
14176 stevensc 72 
	// entity destructuring
73 
	const {
74 
		id,
75 
		image,
76 
		name,
77 
		online,
78 
		type,
79 
		unsee_messages,
14578 stevensc 80 
		url_clear,
14176 stevensc 81 
		url_close,
82 
		url_get_all_messages,
83 
		url_send,
84 
		url_upload,
85 
		minimized,
86 
		profile,
87 
		handleReadChat,
88 
		// group
89 
		url_leave,
90 
		url_delete,
91 
		url_add_user_to_group,
92 
		url_get_contact_group_list,
93 
		url_get_contacts_availables_for_group,
14581 stevensc 94 
	} = entity
11350 nelberth 95 
 
14176 stevensc 96 
	// states
97 
	const [messages, setMessages] = useState([])
98 
	const [responseMessage, setResponseMessage] = useState(null)
99 
	const [newMessages, setNewMessages] = useState([])
100 
	const [oldMessages, setOldMessages] = useState([])
101 
	const [currentPage, setCurrentPage] = useState(1)
102 
	const [pages, setPages] = useState(1)
103 
	const [loading, setLoading] = useState(false)
104 
	const [showOptions, setShowOptions] = useState(false)
105 
	const [optionTab, setOptionTab] = useState('default')
106 
	const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
107 
	const [groupContactsList, setGroupContactsList] = useState([])
108 
	const [confirmModalShow, setConfirmModalShow] = useState(false)
109 
	const [optionsLoading, setOptionsLoading] = useState(false)
110 
	const [showEmojiTab, setShowEmojiTab] = useState(false)
111 
	const [shareFileModalShow, setShareFileModalShow] = useState(false)
11350 nelberth 112 
 
14176 stevensc 113 
	// refs
114 
	const conversationListEl = useRef(null)
115 
	const loader = useRef(null)
116 
	const modalActionUrl = useRef('')
117 
	const chatboxEl = useRef(null)
118 
	const textAreaEl = useRef(null)
11350 nelberth 119 
 
14176 stevensc 120 
	// optionTabs
121 
	const optionTabs = {
122 
		add_person_to_group: 'add_person_to_group',
123 
		group_contacts_list: 'group_contacts_list',
124 
		default: 'default',
125 
	}
11350 nelberth 126 
 
14176 stevensc 127 
	// timeIntervals
128 
	let getMessageInterval
11350 nelberth 129 
 
14176 stevensc 130 
	const handleActive = () => {
131 
		onRead(index)
132 
		onMinimize(index)
133 
	}
11350 nelberth 134 
 
14176 stevensc 135 
	// const handleGetMessages = async () => {
136 
	//   await axios.get(url_get_all_messages).then((response) => {
137 
	//     const resData = response.data;
138 
	//     if (resData.success) {
139 
	//       const updatedMessages = resData.data.items.slice();
140 
	//       let newNewMessages = [];
141 
	//       updatedMessages.map((updatedNewMessage) => {
142 
	//         const existInNewMessages = newMessages.findIndex(
143 
	//           (newMessage) => newMessage.id === updatedNewMessage.id
144 
	//         );
145 
	//         if (existInNewMessages === -1) {
146 
	//           newNewMessages = [updatedNewMessage, ...newNewMessages];
147 
	//           setPages(resData.data.pages);
148 
	//         }
149 
	//       });
150 
	//       if (newNewMessages.length > 0) {
151 
	//         setNewMessages((prevState) => [...prevState, ...newNewMessages]);
152 
	//       }
11350 nelberth 153 
 
14176 stevensc 154 
	//       // setMessages([...resData.data.items, ...oldMessages]);
155 
	//     }
156 
	//   });
157 
	//   onRead(index);
158 
	// };
11350 nelberth 159 
 
14176 stevensc 160 
	const handleGetMessages = async () => {
161 
		const response = await axios.get(url_get_all_messages)
162 
		const resData = response.data
163 
		if (!resData.success) {
164 
			return ('ha ocurrido un error', resData)
165 
		}
166 
		const updatedMessages = [...resData.data.items].reverse()
167 
		const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
168 
			if (
169 
				messages.findIndex((message) => message.id === updatedMessage.id) === -1
170 
			) {
171 
				acum = [...acum, updatedMessage]
172 
			}
173 
			return acum
174 
		}, [])
175 
		if (newMessages.length > 0) {
176 
			setMessages([...messages, ...newMessages])
177 
			setPages(resData.data.pages)
178 
			scrollToBottom()
179 
		}
180 
		setLoading(false)
181 
	}
11350 nelberth 182 
 
14176 stevensc 183 
	const handleLoadMore = async () => {
184 
		await axios.get(`${url_get_all_messages}?page=${currentPage}`)
185 
			.then((response) => {
186 
				const resData = response.data
187 
				if (resData.success) {
188 
					if (resData.data.page > 1) {
189 
						const updatedOldMessages = [...resData.data.items].reverse()
190 
						setOldMessages([...updatedOldMessages, ...oldMessages])
191 
						/* scrollDownBy(100); */
192 
					}
193 
				}
194 
			})
195 
	}
11350 nelberth 196 
 
14176 stevensc 197 
	const handleCloseChat = () => {
198 
		onClose(id, url_close)
199 
	}
11350 nelberth 200 
 
14176 stevensc 201 
	const handleChatBoxKeyDown = async (e) => {
202 
		if (e.key === 'Enter') {
203 
			e.preventDefault()
204 
			const message = e.target.value
205 
			const formData = new FormData()
206 
			formData.append('message', emojione.toShort(message))
207 
			await axios.post(url_send, formData).then((response) => {
208 
				const resData = response.data
209 
				if (resData.success) {
14581 stevensc 210 
					let newMessage = resData.data
211 
 
212 
					online
213 
						? newMessage = { ...newMessage, not_received: false }
214 
						: newMessage = { ...newMessage, not_received: true }
215 
 
216 
					setMessages([...messages, newMessage])
14176 stevensc 217 
				}
218 
			})
219 
			e.target.value = ''
14581 stevensc 220 
			/* await handleGetMessages(); */
14176 stevensc 221 
			setShowEmojiTab(false)
222 
			setResponseMessage(null)
223 
		}
224 
	}
11350 nelberth 225 
 
14176 stevensc 226 
	const handleShowOptions = () => {
227 
		onMinimize(index, false)
228 
		setShowOptions(!showOptions)
229 
	}
11350 nelberth 230 
 
14176 stevensc 231 
	const handleChangeTab = (tab) => {
232 
		setOptionTab(tab)
233 
	}
11350 nelberth 234 
 
14176 stevensc 235 
	const handleAddPersonToGroup = async (id) => {
236 
		const formData = new FormData()
237 
		formData.append('uid', id)
238 
		await axios.post(url_add_user_to_group, formData).then((response) => {
239 
			const resData = response.data
240 
			if (resData.success) {
241 
				loadPersonsAvailable()
242 
			}
243 
		})
244 
	}
11350 nelberth 245 
 
14578 stevensc 246 
	const handleConfirmModalAction = async () => {
247 
		await axios.post(modalActionUrl.current).then((response) => {
248 
			const resData = response.data
249 
			if (resData.success) {
250 
			}
251 
		})
252 
		await onClose(id, url_close)
14176 stevensc 253 
	}
11350 nelberth 254 
 
14176 stevensc 255 
	const handleObserver = (entities) => {
256 
		const target = entities[0]
14578 stevensc 257 
		if (target.isIntersecting) {
258 
			setCurrentPage((prevState) => prevState + 1)
259 
		}
14176 stevensc 260 
	}
11350 nelberth 261 
 
14176 stevensc 262 
	const scrollToBottom = () => {
263 
		if (conversationListEl.current) {
264 
			conversationListEl.current.scrollTop =
14579 stevensc 265 
				conversationListEl.current.scrollHeight * 9
14176 stevensc 266 
		}
267 
	}
11350 nelberth 268 
 
14176 stevensc 269 
	const scrollDownBy = (scrollDistance) => {
270 
		if (conversationListEl.current) {
271 
			conversationListEl.current.scrollTop = scrollDistance
272 
		}
273 
	}
11350 nelberth 274 
 
14176 stevensc 275 
	const handleShowEmojiTab = () => {
276 
		setShowEmojiTab(!showEmojiTab)
277 
		// smiley_tpl(`${id}`);
278 
	}
11350 nelberth 279 
 
14176 stevensc 280 
	const handleClickEmoji = (e) => {
281 
		const shortname = e.currentTarget.dataset.shortname
282 
		const currentText = textAreaEl.current.value
283 
		let cursorPosition = textAreaEl.current.selectionStart
284 
		const textBehind = currentText.substring(0, cursorPosition)
285 
		const textForward = currentText.substring(cursorPosition)
286 
		const unicode = emojione.shortnameToUnicode(shortname)
287 
		textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
288 
		textAreaEl.current.focus()
289 
		textAreaEl.current.setSelectionRange(
290 
			cursorPosition + unicode.length,
291 
			cursorPosition + unicode.length
292 
		)
293 
	}
11350 nelberth 294 
 
14176 stevensc 295 
	// useEffect(() => {
296 
	//   setMessages([...oldMessages, ...newMessages]);
297 
	// }, [newMessages, oldMessages]);
11350 nelberth 298 
 
14176 stevensc 299 
	// getMessageOnMaximize and subscribe to infinite Loader
300 
	useEffect(async () => {
301 
		if (!minimized) {
302 
			await handleGetMessages()
303 
			// loader observer
14578 stevensc 304 
			let options = {
305 
				root: null,
306 
				rootMargin: '20px',
307 
				treshold: 1.0,
308 
			}
309 
			const observer = new IntersectionObserver(handleObserver, options)
14176 stevensc 310 
			if (loader.current) {
311 
				observer.observe(loader.current)
312 
			}
313 
		}
314 
		return () => {
315 
			if (loader.current) {
316 
				observer.unobserve(loader.current)
317 
			}
318 
		}
319 
	}, [minimized])
11350 nelberth 320 
 
14176 stevensc 321 
	// LoadMore on change page
322 
	useEffect(() => {
323 
		let loadMore = () => handleLoadMore()
324 
		loadMore()
325 
		return () => {
326 
			loadMore = null
327 
		}
328 
	}, [currentPage])
11350 nelberth 329 
 
14176 stevensc 330 
	// getMessagesInterval
331 
	useEffect(() => {
332 
		if (window.location.pathname === '/group/my-groups') {
333 
			const items = document.getElementsByClassName('sc-jSgupP')
334 
			if (items && items.length > 0)
335 
				items[0].style.display = 'none'
336 
		}
337 
		if (!minimized) {
338 
			clearInterval(getMessageInterval)
339 
			getMessageInterval = setInterval(() => {
340 
				handleGetMessages()
341 
			}, 1000)
342 
		} else {
343 
			clearInterval(getMessageInterval)
344 
		}
345 
		return () => {
346 
			clearInterval(getMessageInterval)
347 
		}
348 
	})
11350 nelberth 349 
 
14176 stevensc 350 
	const handleConfirmModalShow = () => {
351 
		setConfirmModalShow(!confirmModalShow)
352 
	}
11350 nelberth 353 
 
14176 stevensc 354 
	const handleConfirmModalAccept = () => {
355 
		handleConfirmModalAction()
356 
	}
11350 nelberth 357 
 
14176 stevensc 358 
	const handleShareFileModalShow = () => {
359 
		setShareFileModalShow(!shareFileModalShow)
360 
	}
11350 nelberth 361 
 
14176 stevensc 362 
	const handleResponseMessage = (element) => {
14581 stevensc 363 
		element.mtype === 'text'
364 
			? setResponseMessage(element)
365 
			: setResponseMessage({ ...element, m: 'Archivo adjunto' })
366 
 
367 
		textAreaEl.current && textAreaEl.current.focus()
14176 stevensc 368 
	}
11350 nelberth 369 
 
14176 stevensc 370 
	const messagesRender = () => {
371 
		return (
372 
			<React.Fragment>
14581 stevensc 373 
				{currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
374 
				{oldMessages.map((oldMessage) => (
375 
					<MessageTemplate message={oldMessage} />
376 
				))}
377 
				{messages.map((message, i) => {
378 
					let currentTime = message.time
379 
					let prevMessage = messages[i - 1]
380 
 
381 
					const dailys = ['mes', 'meses', 'semana', 'semanas', 'dia', 'dias', 'año', 'años']
382 
					const date = new Date(Date.now()).toLocaleDateString()
383 
 
384 
					if (prevMessage !== undefined) {
385 
						let prevTime = messages[i - 1].time
386 
 
387 
						if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
388 
							return <>
389 
								{/* <h2 className="text-center date-chat">{date}</h2> */}
390 
								<MessageTemplate
391 
									message={message}
392 
									setResponseMessage={handleResponseMessage}
393 
									responseMessage={responseMessage}
394 
								/>
395 
							</>
396 
						}
397 
					}
398 
 
399 
					return <MessageTemplate
14176 stevensc 400 
						message={message}
401 
						setResponseMessage={handleResponseMessage}
402 
						responseMessage={responseMessage}
403 
					/>
14581 stevensc 404 
				})}
14176 stevensc 405 
			</React.Fragment>
406 
		)
407 
	}
11350 nelberth 408 
 
14176 stevensc 409 
	const optionRender = () => {
410 
		switch (optionTab) {
411 
		case optionTabs.add_person_to_group:
412 
			return addPersonToGroupTab
413 
		case optionTabs.group_contacts_list:
414 
			return groupContactsListTab
415 
		default:
416 
			return optionsDefaultTab
417 
		}
418 
	}
11350 nelberth 419 
 
14176 stevensc 420 
	// useEffect for tabs changing
421 
	useEffect(() => {
422 
		switch (optionTab) {
423 
		case optionTabs.add_person_to_group:
424 
			loadPersonsAvailable()
425 
			break
426 
		case optionTabs.group_contacts_list:
427 
			loadGroupContacts()
428 
			break
429 
		}
430 
	}, [optionTab])
11350 nelberth 431 
 
14176 stevensc 432 
	const loadPersonsAvailable = async () => {
433 
		setOptionsLoading(true)
434 
		await axios.get(url_get_contacts_availables_for_group).then((response) => {
435 
			const resData = response.data
436 
			if (resData.success) {
437 
				setAvailableContactsToAdd(resData.data)
438 
			}
439 
		})
440 
		setOptionsLoading(false)
441 
	}
11350 nelberth 442 
 
14176 stevensc 443 
	const loadGroupContacts = async () => {
444 
		setOptionsLoading(true)
445 
		await axios.get(url_get_contact_group_list).then((response) => {
446 
			const resData = response.data
447 
			if (resData.success) {
448 
				setGroupContactsList(resData.data)
449 
			}
450 
		})
451 
		setOptionsLoading(false)
452 
	}
11350 nelberth 453 
 
14176 stevensc 454 
	const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
455 
		await axios.post(urlDeletePersonFromGroup).then((response) => {
456 
			const resData = response.data
457 
			if (resData.success) {
458 
				loadGroupContacts()
459 
			}
460 
		})
461 
	}
11350 nelberth 462 
 
14176 stevensc 463 
	const optionsDefaultTab = (
464 
		<React.Fragment>
465 
			<span className="optionBack" onClick={() => handleShowOptions()}>
466 
				<i className="fa icon-arrow-left"></i>
467 
			</span>
468 
			<div className="optionsTab">
469 
				<ul>
470 
					{!!url_get_contact_group_list && (
471 
						<li
472 
							className="optionsTab__option"
473 
							onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
474 
						>
475 
							<span className="optionsTab__option__icon">
476 
								<i className="fa fa-group"></i>
477 
							</span>
14579 stevensc 478 
							Integrantes
14176 stevensc 479 
						</li>
480 
					)}
481 
					{!!url_add_user_to_group && (
482 
						<li
483 
							className="optionsTab__option"
484 
							onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
485 
						>
486 
							<span className="optionsTab__option__icon">
487 
								<i className="fa fa-user-plus"></i>
488 
							</span>
14579 stevensc 489 
							Agregar contactos
14176 stevensc 490 
						</li>
491 
					)}
492 
					{!!url_delete && (
493 
						<li
494 
							className="optionsTab__option"
495 
							style={{ color: 'red' }}
496 
							onClick={() => {
497 
								handleConfirmModalShow()
498 
								modalActionUrl.current = url_delete
499 
							}}
500 
						>
501 
							<span className="optionsTab__option__icon">
502 
								<i className="fa fa-trash"></i>
503 
							</span>
14579 stevensc 504 
							Eliminar grupo
14176 stevensc 505 
						</li>
506 
					)}
507 
					{!!url_leave && (
508 
						<li
509 
							className="optionsTab__option"
510 
							style={{ color: 'red' }}
511 
							onClick={() => {
512 
								handleConfirmModalShow()
513 
								modalActionUrl.current = url_leave
514 
							}}
515 
						>
516 
							<span className="optionsTab__option__icon">
517 
								<i className="fa fa-user-times"></i>
518 
							</span>
14579 stevensc 519 
							Dejar grupo
14176 stevensc 520 
						</li>
521 
					)}
522 
				</ul>
523 
			</div>
524 
		</React.Fragment>
525 
	)
11350 nelberth 526 
 
14176 stevensc 527 
	const addPersonToGroupTab = (
528 
		<React.Fragment>
529 
			<span
530 
				className="optionBack"
531 
				onClick={() => handleChangeTab(optionTabs.default)}
532 
			>
533 
				<i className="fa icon-arrow-left"></i>
534 
			</span>
535 
			<div className="addPersonToGroupTab">
536 
				{availableContactsToAdd.length ? (
537 
					availableContactsToAdd.map(({ image, name, id }) => (
538 
						<div className="addPersonToGroupTab__person" key={id}>
14581 stevensc 539 
							<div className="d-inline-flex" style={{ gap: '5px' }}>
540 
								<img
541 
									className="chat-image img-circle pull-left"
542 
									height="36"
543 
									width="36"
544 
									src={image}
545 
									alt="image-image"
546 
								/>
547 
								<div className="name">{name}</div>
548 
							</div>
14176 stevensc 549 
							<span
550 
								style={{
551 
									cursor: 'pointer',
552 
								}}
553 
								onClick={() => {
554 
									handleAddPersonToGroup(id)
555 
								}}
556 
							>
557 
								<i className="fa fa-plus-circle"></i>
558 
							</span>
559 
						</div>
560 
					))
561 
				) : (
562 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
563 
				)}
564 
			</div>
565 
		</React.Fragment>
566 
	)
11350 nelberth 567 
 
14176 stevensc 568 
	const groupContactsListTab = (
569 
		<React.Fragment>
570 
			<span
571 
				className="optionBack"
572 
				onClick={() => handleChangeTab(optionTabs.default)}
573 
			>
574 
				<i className="fa icon-arrow-left"></i>
575 
			</span>
576 
			<div className="addPersonToGroupTab">
577 
				{groupContactsList.length ? (
578 
					groupContactsList.map(
579 
						({ image, name, url_remove_from_group, id }) => (
580 
							<div className="addPersonToGroupTab__person" key={id}>
581 
								<div style={{ display: 'flex', alignItems: 'center' }}>
582 
									<img
583 
										className="chat-image img-circle pull-left"
584 
										height="36"
585 
										width="36"
586 
										src={image}
587 
										alt="image-image"
588 
									/>
589 
									<div className="name">{name}</div>
590 
								</div>
591 
								{url_remove_from_group && (
592 
									<span
593 
										style={{
594 
											cursor: 'pointer',
595 
										}}
596 
										onClick={() => {
597 
											handleDeletePersonFromGroup(url_remove_from_group)
598 
										}}
599 
									>
600 
										<i className="fa fa-user-times"></i>
601 
									</span>
602 
								)}
603 
							</div>
604 
						)
605 
					)
606 
				) : (
607 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
608 
				)}
609 
			</div>
610 
		</React.Fragment>
611 
	)
11350 nelberth 612 
 
14176 stevensc 613 
	const shareFileModal = (
614 
		<SendFileModal
615 
			show={shareFileModalShow}
616 
			onHide={() => {
617 
				setShareFileModalShow(false)
618 
			}}
619 
			urlUpload={url_upload}
620 
		/>
621 
	)
11350 nelberth 622 
 
14176 stevensc 623 
	const userChat = (
624 
		<React.Fragment>
14581 stevensc 625 
			<div
626 
				className="chatbox active-chat"
627 
				style={{
628 
					bottom: '0px',
629 
					right: `${(index + 1) * 295}px`,
630 
					zIndex: '1',
631 
					display: 'block',
632 
				}}
633 
			>
14176 stevensc 634 
				<div className="chatbox-icon">
635 
					<div className="contact-floating red">
636 
						<img className="chat-image img-circle pull-left" src={image} />
637 
						<small className="unread-msg">2</small>
638 
						{/* <small className="status"'+ status+'></small> */}
639 
					</div>
640 
				</div>
641 
				<div className="panel personal-chat">
642 
					<StyledChatHead>
643 
						<div
644 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
645 
							}`}
646 
						>
647 
							<div className="panel-title">
648 
								<img
649 
									className="chat-image img-circle pull-left"
650 
									height="36"
651 
									width="36"
652 
									src={image}
653 
									alt="avatar-image"
654 
								/>
655 
								<div className="header-elements">
656 
									<a href={profile} target="_blank" rel="noreferrer">
657 
										{name}
658 
									</a>
659 
									<br />
660 
									<small className={`status ${online ? 'Online' : 'Offline'}`}>
661 
										<b>{online ? 'En línea' : 'Desconectado'}</b>
662 
									</small>
663 
									<div className="pull-right options">
664 
										<div
665 
											className="btn-group uploadFile"
666 
											id="uploadFile"
667 
											data-client="'+chatboxtitle+'"
668 
										>
669 
											{/* <span>
11350 nelberth 670 
                      <i className="fa fa-trash"></i>
671 
                    </span> */}
14176 stevensc 672 
										</div>
673 
										<div
674 
											className="btn-group"
14579 stevensc 675 
										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
676 
										// href="javascript:void(0)"
14176 stevensc 677 
										>
678 
											{/* <span>
11350 nelberth 679 
                      <i className="fa fa-trash"></i>
680 
                    </span> */}
14176 stevensc 681 
										</div>
682 
										<div
683 
											className="btn-group"
14579 stevensc 684 
										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
685 
										// href="javascript:void(0)"
14176 stevensc 686 
										>
687 
											<span>
688 
												<i
689 
													className={'fa fa-minus-circle'}
690 
													onClick={handleActive}
691 
												></i>
692 
											</span>
693 
										</div>
694 
										<div
695 
											className="btn-group"
14579 stevensc 696 
										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
697 
										// href="javascript:void(0)"
14176 stevensc 698 
										>
699 
											<span>
700 
												<i
701 
													className="fa fa-times-circle"
702 
													onClick={handleCloseChat}
703 
												></i>
704 
											</span>
705 
										</div>
706 
									</div>
707 
								</div>
708 
							</div>
709 
						</div>
710 
					</StyledChatHead>
711 
					<div
712 
						className="panel-body"
713 
						style={{ display: !minimized ? 'block' : 'none' }}
714 
					>
715 
						<div
716 
							id="uploader_'+chatboxtitle+'"
717 
							style={{ display: 'none', height: '342px' }}
718 
						>
719 
							<p>
14579 stevensc 720 
								Your browser does not have Flash, Silverlight or HTML5 support.
14176 stevensc 721 
							</p>
722 
						</div>
723 
						<div className="chat-conversation" style={{ position: 'relative' }}>
724 
							<div className="reverseChatBox" ref={conversationListEl}>
725 
								<ul
726 
									className="conversation-list chatboxcontent"
727 
									id="resultchat_'+chatboxtitle+'"
728 
								>
729 
									{messagesRender()}
730 
								</ul>
731 
							</div>
732 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
733 
								<div id="chatFrom" className="chatFrom">
14581 stevensc 734 
									{
735 
										responseMessage
736 
										&&
737 
										<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
738 
											<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
739 
											<p>{responseMessage.m}</p>
740 
										</div>
741 
									}
14176 stevensc 742 
									<div className="block-wchat">
743 
										<button
744 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
745 
											id="uploadFile"
746 
											onClick={handleShareFileModalShow}
747 
										></button>
748 
										<button
749 
											className="icon ti-face-smile font-24 btn-emoji"
750 
											id="toggle-emoji"
751 
											onClick={handleShowEmojiTab}
752 
										></button>
753 
										<div className="input-container">
754 
											<div className="input-emoji">
755 
												<div
756 
													className="input-placeholder"
757 
													style={{ visibility: 'hidden', display: 'none' }}
758 
												>
14579 stevensc 759 
													Escribe un mensaje
14176 stevensc 760 
												</div>
761 
												<textarea
762 
													className="input chatboxtextarea"
763 
													id="chatboxtextarea"
764 
													name="chattxt"
765 
													style={{ resize: 'none', height: '20px' }}
766 
													placeholder="Escribe un mensaje"
767 
													onKeyDown={handleChatBoxKeyDown}
768 
													ref={textAreaEl}
14581 stevensc 769 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 770 
													onFocus={() => onRead(index)}
771 
												></textarea>
772 
												<input
773 
													id="to_uname"
774 
													name="to_uname"
775 
													value="'+chatboxtitle+'"
776 
													type="hidden"
777 
												/>
778 
												<input
779 
													id="from_uname"
780 
													name="from_uname"
781 
													value="Beenny"
782 
													type="hidden"
783 
												/>
784 
											</div>
785 
										</div>
786 
									</div>
787 
								</div>
788 
								<div className="wchat-box-items-positioning-container">
789 
									<div className="wchat-box-items-overlay-container">
790 
										<div
791 
											className="target-emoji"
792 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
793 
										>
794 
											<div id={`smileyPanel_${id}`}>
795 
												<div>
796 
													<Emojione onClickEmoji={handleClickEmoji} />
797 
												</div>
798 
											</div>
799 
										</div>
800 
									</div>
801 
								</div>
802 
							</div>
803 
						</div>
804 
					</div>
805 
				</div>
806 
			</div>
807 
			{shareFileModal}
808 
		</React.Fragment>
809 
	)
11350 nelberth 810 
 
14176 stevensc 811 
	const groupChat = (
812 
		<React.Fragment>
813 
			<div
814 
				className="chatbox active-chat"
815 
				style={{
816 
					bottom: '0px',
817 
					right: `${(index + 1) * 295}px`,
818 
					zIndes: '1',
819 
					display: 'block',
820 
				}}
821 
				id={`chatbox_${id}`}
822 
				ref={chatboxEl}
823 
			>
824 
				<div className="chatbox-icon">
825 
					<div className="contact-floating red">
826 
						<img className="chat-image img-circle pull-left" src={image} />
827 
						<small className="unread-msg">2</small>
828 
						{/* <small className="status"'+ status+'></small> */}
829 
					</div>
830 
				</div>
831 
				<div className="panel personal-chat">
832 
					<StyledChatHead>
833 
						<div
834 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
835 
							}`}
836 
						>
837 
							<div className="panel-title-group">
838 
								<img
839 
									className="chat-image img-circle pull-left"
840 
									height="36"
841 
									width="36"
842 
									src="/images/users-group.png"
843 
									alt="avatar-image"
844 
								/>
845 
								<div className="header-elements">
846 
									<p>{name}</p>
847 
									<br />
848 
									<div className="pull-right options">
849 
										<div
850 
											className="btn-group uploadFile"
851 
											id="uploadFile"
852 
											data-client="'+chatboxtitle+'"
853 
										>
854 
											{/* <span>
11350 nelberth 855 
                      <i className="fa fa-trash"></i>
856 
                    </span> */}
14176 stevensc 857 
										</div>
858 
										<div
859 
											className="btn-group"
14579 stevensc 860 
										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
861 
										// href="javascript:void(0)"
14176 stevensc 862 
										>
863 
											{/* <span>
11350 nelberth 864 
                      <i className="fa fa-trash"></i>
865 
                    </span> */}
14176 stevensc 866 
										</div>
867 
										<div
868 
											className="btn-group addUser"
869 
											data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
870 
											data-name="Grupo de jesus"
871 
										>
872 
											<span>
873 
												<i
874 
													// className="fa fa-user-plus"
875 
													className="fa fa-gear"
876 
													onClick={handleShowOptions}
877 
												></i>
878 
											</span>
879 
										</div>
880 
										<div
881 
											className="btn-group"
14579 stevensc 882 
										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
883 
										// href="javascript:void(0)"
14176 stevensc 884 
										>
885 
											<span>
886 
												<i
887 
													className={'fa fa-minus-circle'}
888 
													onClick={handleActive}
889 
												></i>
890 
											</span>
891 
										</div>
892 
										<div
893 
											className="btn-group"
14579 stevensc 894 
										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
895 
										// href="javascript:void(0)"
14176 stevensc 896 
										>
897 
											<span>
898 
												<i
899 
													className="fa fa-times-circle"
900 
													onClick={handleCloseChat}
901 
												></i>
902 
											</span>
903 
										</div>
904 
									</div>
905 
								</div>
906 
							</div>
907 
						</div>
908 
					</StyledChatHead>
909 
					<div
910 
						className="panel-body"
911 
						style={{ display: !minimized ? 'block' : 'none' }}
912 
					>
913 
						<StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
914 
							{optionRender()}
915 
						</StyledShowOptions>
11350 nelberth 916 
 
14176 stevensc 917 
						<div
918 
							className="chat-conversation"
919 
							style={{
920 
								display: showOptions ? 'none' : 'block',
921 
								position: 'relative',
922 
							}}
923 
						>
924 
							<div className="reverseChatBox" ref={conversationListEl}>
925 
								<ul
926 
									className="conversation-list chatboxcontent"
927 
									id="resultchat_'+chatboxtitle+'"
928 
								>
929 
									{messagesRender()}
930 
								</ul>
931 
							</div>
932 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
933 
								<div id="chatFrom">
934 
									<div className="block-wchat">
935 
										<button
936 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
937 
											id="uploadFile"
938 
											onClick={handleShareFileModalShow}
939 
										></button>
940 
										<button
941 
											className="icon ti-face-smile font-24 btn-emoji"
942 
											id="toggle-emoji"
943 
											onClick={handleShowEmojiTab}
944 
										></button>
945 
										<div className="input-container">
946 
											<div className="input-emoji">
947 
												<div
948 
													className="input-placeholder"
949 
													style={{ visibility: 'hidden', display: 'none' }}
950 
												>
14579 stevensc 951 
													Escribe un mensaje
14176 stevensc 952 
												</div>
953 
												<textarea
954 
													className="input chatboxtextarea"
955 
													id="chatboxtextarea"
956 
													name="chattxt"
957 
													style={{ resize: 'none', height: '20px' }}
958 
													placeholder="Escribe un mensaje"
959 
													onKeyDown={handleChatBoxKeyDown}
960 
													ref={textAreaEl}
961 
													onFocus={() => onRead(index)}
14581 stevensc 962 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 963 
												></textarea>
964 
												<input
965 
													id="to_uname"
966 
													name="to_uname"
967 
													value="'+chatboxtitle+'"
968 
													type="hidden"
969 
												/>
970 
												<input
971 
													id="from_uname"
972 
													name="from_uname"
973 
													value="Beenny"
974 
													type="hidden"
975 
												/>
976 
											</div>
977 
										</div>
978 
									</div>
979 
								</div>
980 
								<div className="wchat-box-items-positioning-container">
981 
									<div className="wchat-box-items-overlay-container">
982 
										<div
983 
											className="target-emoji"
984 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
985 
										>
986 
											<div id={`smileyPanel_${id}`}>
987 
												<div>
988 
													<Emojione onClickEmoji={handleClickEmoji} />
989 
												</div>
990 
											</div>
991 
										</div>
992 
									</div>
993 
								</div>
994 
							</div>
995 
						</div>
996 
					</div>
997 
				</div>
998 
			</div>
999 
			<ConfirmModal
1000 
				show={confirmModalShow}
1001 
				onClose={handleConfirmModalShow}
1002 
				onAccept={handleConfirmModalAccept}
1003 
			/>
1004 
			{shareFileModal}
1005 
		</React.Fragment>
1006 
	)
11350 nelberth 1007 
 
14176 stevensc 1008 
	switch (type) {
1009 
	case 'user':
1010 
		return userChat
1011 
	case 'group':
1012 
		return groupChat
1013 
	default:
1014 
		break
1015 
	}
1016 
}
11350 nelberth 1017 
 
14581 stevensc 1018 
export default PersonalChat