Proyectos de Subversion LeadersLinked - Backend

Rev

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

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