Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14581 | Rev 14584 | 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> : ''}
14582 stevensc 374 
				{oldMessages.map((oldMessage, i) =>
375 
					<MessageTemplate key={i} message={oldMessage} />
376 
				)}
377 
				{messages.map((message, i) =>
378 
					<MessageTemplate
379 
						key={i}
14176 stevensc 380 
						message={message}
381 
						setResponseMessage={handleResponseMessage}
382 
						responseMessage={responseMessage}
383 
					/>
14582 stevensc 384 
				)}
14176 stevensc 385 
			</React.Fragment>
386 
		)
387 
	}
11350 nelberth 388 
 
14176 stevensc 389 
	const optionRender = () => {
390 
		switch (optionTab) {
391 
		case optionTabs.add_person_to_group:
392 
			return addPersonToGroupTab
393 
		case optionTabs.group_contacts_list:
394 
			return groupContactsListTab
395 
		default:
396 
			return optionsDefaultTab
397 
		}
398 
	}
11350 nelberth 399 
 
14176 stevensc 400 
	// useEffect for tabs changing
401 
	useEffect(() => {
402 
		switch (optionTab) {
403 
		case optionTabs.add_person_to_group:
404 
			loadPersonsAvailable()
405 
			break
406 
		case optionTabs.group_contacts_list:
407 
			loadGroupContacts()
408 
			break
409 
		}
410 
	}, [optionTab])
11350 nelberth 411 
 
14176 stevensc 412 
	const loadPersonsAvailable = async () => {
413 
		setOptionsLoading(true)
414 
		await axios.get(url_get_contacts_availables_for_group).then((response) => {
415 
			const resData = response.data
416 
			if (resData.success) {
417 
				setAvailableContactsToAdd(resData.data)
418 
			}
419 
		})
420 
		setOptionsLoading(false)
421 
	}
11350 nelberth 422 
 
14176 stevensc 423 
	const loadGroupContacts = async () => {
424 
		setOptionsLoading(true)
425 
		await axios.get(url_get_contact_group_list).then((response) => {
426 
			const resData = response.data
427 
			if (resData.success) {
428 
				setGroupContactsList(resData.data)
429 
			}
430 
		})
431 
		setOptionsLoading(false)
432 
	}
11350 nelberth 433 
 
14176 stevensc 434 
	const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
435 
		await axios.post(urlDeletePersonFromGroup).then((response) => {
436 
			const resData = response.data
437 
			if (resData.success) {
438 
				loadGroupContacts()
439 
			}
440 
		})
441 
	}
11350 nelberth 442 
 
14176 stevensc 443 
	const optionsDefaultTab = (
444 
		<React.Fragment>
445 
			<span className="optionBack" onClick={() => handleShowOptions()}>
446 
				<i className="fa icon-arrow-left"></i>
447 
			</span>
448 
			<div className="optionsTab">
449 
				<ul>
450 
					{!!url_get_contact_group_list && (
451 
						<li
452 
							className="optionsTab__option"
453 
							onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
454 
						>
455 
							<span className="optionsTab__option__icon">
456 
								<i className="fa fa-group"></i>
457 
							</span>
14579 stevensc 458 
							Integrantes
14176 stevensc 459 
						</li>
460 
					)}
461 
					{!!url_add_user_to_group && (
462 
						<li
463 
							className="optionsTab__option"
464 
							onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
465 
						>
466 
							<span className="optionsTab__option__icon">
467 
								<i className="fa fa-user-plus"></i>
468 
							</span>
14579 stevensc 469 
							Agregar contactos
14176 stevensc 470 
						</li>
471 
					)}
472 
					{!!url_delete && (
473 
						<li
474 
							className="optionsTab__option"
475 
							style={{ color: 'red' }}
476 
							onClick={() => {
477 
								handleConfirmModalShow()
478 
								modalActionUrl.current = url_delete
479 
							}}
480 
						>
481 
							<span className="optionsTab__option__icon">
482 
								<i className="fa fa-trash"></i>
483 
							</span>
14579 stevensc 484 
							Eliminar grupo
14176 stevensc 485 
						</li>
486 
					)}
487 
					{!!url_leave && (
488 
						<li
489 
							className="optionsTab__option"
490 
							style={{ color: 'red' }}
491 
							onClick={() => {
492 
								handleConfirmModalShow()
493 
								modalActionUrl.current = url_leave
494 
							}}
495 
						>
496 
							<span className="optionsTab__option__icon">
497 
								<i className="fa fa-user-times"></i>
498 
							</span>
14579 stevensc 499 
							Dejar grupo
14176 stevensc 500 
						</li>
501 
					)}
502 
				</ul>
503 
			</div>
504 
		</React.Fragment>
505 
	)
11350 nelberth 506 
 
14176 stevensc 507 
	const addPersonToGroupTab = (
508 
		<React.Fragment>
509 
			<span
510 
				className="optionBack"
511 
				onClick={() => handleChangeTab(optionTabs.default)}
512 
			>
513 
				<i className="fa icon-arrow-left"></i>
514 
			</span>
515 
			<div className="addPersonToGroupTab">
516 
				{availableContactsToAdd.length ? (
517 
					availableContactsToAdd.map(({ image, name, id }) => (
518 
						<div className="addPersonToGroupTab__person" key={id}>
14581 stevensc 519 
							<div className="d-inline-flex" style={{ gap: '5px' }}>
520 
								<img
521 
									className="chat-image img-circle pull-left"
522 
									height="36"
523 
									width="36"
524 
									src={image}
525 
									alt="image-image"
526 
								/>
527 
								<div className="name">{name}</div>
528 
							</div>
14176 stevensc 529 
							<span
530 
								style={{
531 
									cursor: 'pointer',
532 
								}}
533 
								onClick={() => {
534 
									handleAddPersonToGroup(id)
535 
								}}
536 
							>
537 
								<i className="fa fa-plus-circle"></i>
538 
							</span>
539 
						</div>
540 
					))
541 
				) : (
542 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
543 
				)}
544 
			</div>
545 
		</React.Fragment>
546 
	)
11350 nelberth 547 
 
14176 stevensc 548 
	const groupContactsListTab = (
549 
		<React.Fragment>
550 
			<span
551 
				className="optionBack"
552 
				onClick={() => handleChangeTab(optionTabs.default)}
553 
			>
554 
				<i className="fa icon-arrow-left"></i>
555 
			</span>
556 
			<div className="addPersonToGroupTab">
557 
				{groupContactsList.length ? (
558 
					groupContactsList.map(
559 
						({ image, name, url_remove_from_group, id }) => (
560 
							<div className="addPersonToGroupTab__person" key={id}>
561 
								<div style={{ display: 'flex', alignItems: 'center' }}>
562 
									<img
563 
										className="chat-image img-circle pull-left"
564 
										height="36"
565 
										width="36"
566 
										src={image}
567 
										alt="image-image"
568 
									/>
569 
									<div className="name">{name}</div>
570 
								</div>
571 
								{url_remove_from_group && (
572 
									<span
573 
										style={{
574 
											cursor: 'pointer',
575 
										}}
576 
										onClick={() => {
577 
											handleDeletePersonFromGroup(url_remove_from_group)
578 
										}}
579 
									>
580 
										<i className="fa fa-user-times"></i>
581 
									</span>
582 
								)}
583 
							</div>
584 
						)
585 
					)
586 
				) : (
587 
					<div className="addPersonToGroupTab__person">No hay Contactos</div>
588 
				)}
589 
			</div>
590 
		</React.Fragment>
591 
	)
11350 nelberth 592 
 
14176 stevensc 593 
	const shareFileModal = (
594 
		<SendFileModal
595 
			show={shareFileModalShow}
596 
			onHide={() => {
597 
				setShareFileModalShow(false)
598 
			}}
599 
			urlUpload={url_upload}
600 
		/>
601 
	)
11350 nelberth 602 
 
14176 stevensc 603 
	const userChat = (
604 
		<React.Fragment>
14581 stevensc 605 
			<div
606 
				className="chatbox active-chat"
607 
				style={{
608 
					bottom: '0px',
609 
					right: `${(index + 1) * 295}px`,
610 
					zIndex: '1',
611 
					display: 'block',
612 
				}}
613 
			>
14176 stevensc 614 
				<div className="chatbox-icon">
615 
					<div className="contact-floating red">
616 
						<img className="chat-image img-circle pull-left" src={image} />
617 
						<small className="unread-msg">2</small>
618 
						{/* <small className="status"'+ status+'></small> */}
619 
					</div>
620 
				</div>
621 
				<div className="panel personal-chat">
622 
					<StyledChatHead>
623 
						<div
624 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
625 
							}`}
626 
						>
627 
							<div className="panel-title">
628 
								<img
629 
									className="chat-image img-circle pull-left"
630 
									height="36"
631 
									width="36"
632 
									src={image}
633 
									alt="avatar-image"
634 
								/>
635 
								<div className="header-elements">
636 
									<a href={profile} target="_blank" rel="noreferrer">
637 
										{name}
638 
									</a>
639 
									<br />
640 
									<small className={`status ${online ? 'Online' : 'Offline'}`}>
641 
										<b>{online ? 'En línea' : 'Desconectado'}</b>
642 
									</small>
643 
									<div className="pull-right options">
644 
										<div
645 
											className="btn-group uploadFile"
646 
											id="uploadFile"
647 
											data-client="'+chatboxtitle+'"
648 
										>
649 
											{/* <span>
11350 nelberth 650 
                      <i className="fa fa-trash"></i>
651 
                    </span> */}
14176 stevensc 652 
										</div>
653 
										<div
654 
											className="btn-group"
14579 stevensc 655 
										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
656 
										// href="javascript:void(0)"
14176 stevensc 657 
										>
658 
											{/* <span>
11350 nelberth 659 
                      <i className="fa fa-trash"></i>
660 
                    </span> */}
14176 stevensc 661 
										</div>
662 
										<div
663 
											className="btn-group"
14579 stevensc 664 
										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
665 
										// href="javascript:void(0)"
14176 stevensc 666 
										>
667 
											<span>
668 
												<i
669 
													className={'fa fa-minus-circle'}
670 
													onClick={handleActive}
671 
												></i>
672 
											</span>
673 
										</div>
674 
										<div
675 
											className="btn-group"
14579 stevensc 676 
										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
677 
										// href="javascript:void(0)"
14176 stevensc 678 
										>
679 
											<span>
680 
												<i
681 
													className="fa fa-times-circle"
682 
													onClick={handleCloseChat}
683 
												></i>
684 
											</span>
685 
										</div>
686 
									</div>
687 
								</div>
688 
							</div>
689 
						</div>
690 
					</StyledChatHead>
691 
					<div
692 
						className="panel-body"
693 
						style={{ display: !minimized ? 'block' : 'none' }}
694 
					>
695 
						<div
696 
							id="uploader_'+chatboxtitle+'"
697 
							style={{ display: 'none', height: '342px' }}
698 
						>
699 
							<p>
14579 stevensc 700 
								Your browser does not have Flash, Silverlight or HTML5 support.
14176 stevensc 701 
							</p>
702 
						</div>
703 
						<div className="chat-conversation" style={{ position: 'relative' }}>
704 
							<div className="reverseChatBox" ref={conversationListEl}>
705 
								<ul
706 
									className="conversation-list chatboxcontent"
707 
									id="resultchat_'+chatboxtitle+'"
708 
								>
709 
									{messagesRender()}
710 
								</ul>
711 
							</div>
712 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
713 
								<div id="chatFrom" className="chatFrom">
14581 stevensc 714 
									{
715 
										responseMessage
716 
										&&
717 
										<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
718 
											<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
719 
											<p>{responseMessage.m}</p>
720 
										</div>
721 
									}
14176 stevensc 722 
									<div className="block-wchat">
723 
										<button
724 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
725 
											id="uploadFile"
726 
											onClick={handleShareFileModalShow}
727 
										></button>
728 
										<button
729 
											className="icon ti-face-smile font-24 btn-emoji"
730 
											id="toggle-emoji"
731 
											onClick={handleShowEmojiTab}
732 
										></button>
733 
										<div className="input-container">
734 
											<div className="input-emoji">
735 
												<div
736 
													className="input-placeholder"
737 
													style={{ visibility: 'hidden', display: 'none' }}
738 
												>
14579 stevensc 739 
													Escribe un mensaje
14176 stevensc 740 
												</div>
741 
												<textarea
742 
													className="input chatboxtextarea"
743 
													id="chatboxtextarea"
744 
													name="chattxt"
745 
													style={{ resize: 'none', height: '20px' }}
746 
													placeholder="Escribe un mensaje"
747 
													onKeyDown={handleChatBoxKeyDown}
748 
													ref={textAreaEl}
14581 stevensc 749 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 750 
													onFocus={() => onRead(index)}
751 
												></textarea>
752 
												<input
753 
													id="to_uname"
754 
													name="to_uname"
755 
													value="'+chatboxtitle+'"
756 
													type="hidden"
757 
												/>
758 
												<input
759 
													id="from_uname"
760 
													name="from_uname"
761 
													value="Beenny"
762 
													type="hidden"
763 
												/>
764 
											</div>
765 
										</div>
766 
									</div>
767 
								</div>
768 
								<div className="wchat-box-items-positioning-container">
769 
									<div className="wchat-box-items-overlay-container">
770 
										<div
771 
											className="target-emoji"
772 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
773 
										>
774 
											<div id={`smileyPanel_${id}`}>
775 
												<div>
776 
													<Emojione onClickEmoji={handleClickEmoji} />
777 
												</div>
778 
											</div>
779 
										</div>
780 
									</div>
781 
								</div>
782 
							</div>
783 
						</div>
784 
					</div>
785 
				</div>
786 
			</div>
787 
			{shareFileModal}
788 
		</React.Fragment>
789 
	)
11350 nelberth 790 
 
14176 stevensc 791 
	const groupChat = (
792 
		<React.Fragment>
793 
			<div
794 
				className="chatbox active-chat"
795 
				style={{
796 
					bottom: '0px',
797 
					right: `${(index + 1) * 295}px`,
798 
					zIndes: '1',
799 
					display: 'block',
800 
				}}
801 
				id={`chatbox_${id}`}
802 
				ref={chatboxEl}
803 
			>
804 
				<div className="chatbox-icon">
805 
					<div className="contact-floating red">
806 
						<img className="chat-image img-circle pull-left" src={image} />
807 
						<small className="unread-msg">2</small>
808 
						{/* <small className="status"'+ status+'></small> */}
809 
					</div>
810 
				</div>
811 
				<div className="panel personal-chat">
812 
					<StyledChatHead>
813 
						<div
814 
							className={`panel-heading chatboxhead ${unsee_messages ? 'notify' : ''
815 
							}`}
816 
						>
817 
							<div className="panel-title-group">
818 
								<img
819 
									className="chat-image img-circle pull-left"
820 
									height="36"
821 
									width="36"
822 
									src="/images/users-group.png"
823 
									alt="avatar-image"
824 
								/>
825 
								<div className="header-elements">
826 
									<p>{name}</p>
827 
									<br />
828 
									<div className="pull-right options">
829 
										<div
830 
											className="btn-group uploadFile"
831 
											id="uploadFile"
832 
											data-client="'+chatboxtitle+'"
833 
										>
834 
											{/* <span>
11350 nelberth 835 
                      <i className="fa fa-trash"></i>
836 
                    </span> */}
14176 stevensc 837 
										</div>
838 
										<div
839 
											className="btn-group"
14579 stevensc 840 
										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
841 
										// href="javascript:void(0)"
14176 stevensc 842 
										>
843 
											{/* <span>
11350 nelberth 844 
                      <i className="fa fa-trash"></i>
845 
                    </span> */}
14176 stevensc 846 
										</div>
847 
										<div
848 
											className="btn-group addUser"
849 
											data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
850 
											data-name="Grupo de jesus"
851 
										>
852 
											<span>
853 
												<i
854 
													// className="fa fa-user-plus"
855 
													className="fa fa-gear"
856 
													onClick={handleShowOptions}
857 
												></i>
858 
											</span>
859 
										</div>
860 
										<div
861 
											className="btn-group"
14579 stevensc 862 
										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
863 
										// href="javascript:void(0)"
14176 stevensc 864 
										>
865 
											<span>
866 
												<i
867 
													className={'fa fa-minus-circle'}
868 
													onClick={handleActive}
869 
												></i>
870 
											</span>
871 
										</div>
872 
										<div
873 
											className="btn-group"
14579 stevensc 874 
										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
875 
										// href="javascript:void(0)"
14176 stevensc 876 
										>
877 
											<span>
878 
												<i
879 
													className="fa fa-times-circle"
880 
													onClick={handleCloseChat}
881 
												></i>
882 
											</span>
883 
										</div>
884 
									</div>
885 
								</div>
886 
							</div>
887 
						</div>
888 
					</StyledChatHead>
889 
					<div
890 
						className="panel-body"
891 
						style={{ display: !minimized ? 'block' : 'none' }}
892 
					>
893 
						<StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
894 
							{optionRender()}
895 
						</StyledShowOptions>
11350 nelberth 896 
 
14176 stevensc 897 
						<div
898 
							className="chat-conversation"
899 
							style={{
900 
								display: showOptions ? 'none' : 'block',
901 
								position: 'relative',
902 
							}}
903 
						>
904 
							<div className="reverseChatBox" ref={conversationListEl}>
905 
								<ul
906 
									className="conversation-list chatboxcontent"
907 
									id="resultchat_'+chatboxtitle+'"
908 
								>
909 
									{messagesRender()}
910 
								</ul>
911 
							</div>
912 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
913 
								<div id="chatFrom">
914 
									<div className="block-wchat">
915 
										<button
916 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
917 
											id="uploadFile"
918 
											onClick={handleShareFileModalShow}
919 
										></button>
920 
										<button
921 
											className="icon ti-face-smile font-24 btn-emoji"
922 
											id="toggle-emoji"
923 
											onClick={handleShowEmojiTab}
924 
										></button>
925 
										<div className="input-container">
926 
											<div className="input-emoji">
927 
												<div
928 
													className="input-placeholder"
929 
													style={{ visibility: 'hidden', display: 'none' }}
930 
												>
14579 stevensc 931 
													Escribe un mensaje
14176 stevensc 932 
												</div>
933 
												<textarea
934 
													className="input chatboxtextarea"
935 
													id="chatboxtextarea"
936 
													name="chattxt"
937 
													style={{ resize: 'none', height: '20px' }}
938 
													placeholder="Escribe un mensaje"
939 
													onKeyDown={handleChatBoxKeyDown}
940 
													ref={textAreaEl}
941 
													onFocus={() => onRead(index)}
14581 stevensc 942 
													onBlur={() => responseMessage && setResponseMessage(null)}
14176 stevensc 943 
												></textarea>
944 
												<input
945 
													id="to_uname"
946 
													name="to_uname"
947 
													value="'+chatboxtitle+'"
948 
													type="hidden"
949 
												/>
950 
												<input
951 
													id="from_uname"
952 
													name="from_uname"
953 
													value="Beenny"
954 
													type="hidden"
955 
												/>
956 
											</div>
957 
										</div>
958 
									</div>
959 
								</div>
960 
								<div className="wchat-box-items-positioning-container">
961 
									<div className="wchat-box-items-overlay-container">
962 
										<div
963 
											className="target-emoji"
964 
											style={{ display: showEmojiTab ? 'block' : 'none' }}
965 
										>
966 
											<div id={`smileyPanel_${id}`}>
967 
												<div>
968 
													<Emojione onClickEmoji={handleClickEmoji} />
969 
												</div>
970 
											</div>
971 
										</div>
972 
									</div>
973 
								</div>
974 
							</div>
975 
						</div>
976 
					</div>
977 
				</div>
978 
			</div>
979 
			<ConfirmModal
980 
				show={confirmModalShow}
981 
				onClose={handleConfirmModalShow}
982 
				onAccept={handleConfirmModalAccept}
983 
			/>
984 
			{shareFileModal}
985 
		</React.Fragment>
986 
	)
11350 nelberth 987 
 
14176 stevensc 988 
	switch (type) {
989 
	case 'user':
990 
		return userChat
991 
	case 'group':
992 
		return groupChat
993 
	default:
994 
		break
995 
	}
996 
}
11350 nelberth 997 
 
14581 stevensc 998 
export default PersonalChat