Proyectos de Subversion LeadersLinked - Backend

Rev

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