Proyectos de Subversion LeadersLinked - Backend

Rev

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