Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14579 | Rev 14582 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 14579 Rev 14581
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable react/prop-types */
1 
import React from 'react'
 2 
import React from 'react'
2 
import { useState, useRef, useEffect } from 'react'
 3 
import { useState, useRef, useEffect } from 'react'
3 
import styled from 'styled-components'
 4 
import styled from 'styled-components'
4 
import { axios } from '../../../utils'
 5 
import { axios } from '../../../utils'
5 
import Spinner from '../../../shared/loading-spinner/Spinner'
 - 
 
6 
import Emojione from './emojione/Emojione'
 6 
import Emojione from './emojione/Emojione'
7 
import SendFileModal from './send-file-modal/SendFileModal'
 7 
import SendFileModal from './send-file-modal/SendFileModal'
8 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
 8 
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
9 
import MessageTemplate from './messageTemplate/MessageTemplate'
 9 
import MessageTemplate from './messageTemplate/MessageTemplate'
Línea 65... Línea 65...
65 
      border-bottom: 1px solid #e2e2e2;
 65 
      border-bottom: 1px solid #e2e2e2;
66 
    }
 66 
    }
67 
  }
 67 
  }
68 
`
 68 
`
Línea 69... Línea -...
69 
 
 - 
 
70 
const PersonalChat = (props) => {
 - 
 
71 
	// props destructuring
 69 
 
- 
 
 70 
const PersonalChat = ({ entity, index, onClose, onMinimize, onRead }) => {
72 
	const { index, onClose, onMinimize, onRead } = props
 71 
 
73 
	// entity destructuring
 72 
	// entity destructuring
74 
	const {
 73 
	const {
75 
		id,
 74 
		id,
76 
		image,
 75 
		image,
Línea 90... Línea 89...
90 
		url_leave,
 89 
		url_leave,
91 
		url_delete,
 90 
		url_delete,
92 
		url_add_user_to_group,
 91 
		url_add_user_to_group,
93 
		url_get_contact_group_list,
 92 
		url_get_contact_group_list,
94 
		url_get_contacts_availables_for_group,
 93 
		url_get_contacts_availables_for_group,
95 
	} = props.entity
 94 
	} = entity
Línea 96... Línea 95...
96 
 
 95 
 
97 
	// states
 96 
	// states
98 
	const [messages, setMessages] = useState([])
 97 
	const [messages, setMessages] = useState([])
99 
	const [responseMessage, setResponseMessage] = useState(null)
 98 
	const [responseMessage, setResponseMessage] = useState(null)
Línea 206... Línea 205...
206 
			const formData = new FormData()
 205 
			const formData = new FormData()
207 
			formData.append('message', emojione.toShort(message))
 206 
			formData.append('message', emojione.toShort(message))
208 
			await axios.post(url_send, formData).then((response) => {
 207 
			await axios.post(url_send, formData).then((response) => {
209 
				const resData = response.data
 208 
				const resData = response.data
210 
				if (resData.success) {
 209 
				if (resData.success) {
- 
 
 210 
					let newMessage = resData.data
- 
 
 211 
 
- 
 
 212 
					online
- 
 
 213 
						? newMessage = { ...newMessage, not_received: false }
- 
 
 214 
						: newMessage = { ...newMessage, not_received: true }
- 
 
 215 
 
- 
 
 216 
					setMessages([...messages, newMessage])
211 
				}
 217 
				}
212 
			})
 218 
			})
213 
			e.target.value = ''
 219 
			e.target.value = ''
214 
			await handleGetMessages()
 220 
			/* await handleGetMessages(); */
215 
			setShowEmojiTab(false)
 221 
			setShowEmojiTab(false)
216 
			setResponseMessage(null)
 222 
			setResponseMessage(null)
217 
		}
 223 
		}
218 
	}
 224 
	}
Línea 352... Línea 358...
352 
	const handleShareFileModalShow = () => {
 358 
	const handleShareFileModalShow = () => {
353 
		setShareFileModalShow(!shareFileModalShow)
 359 
		setShareFileModalShow(!shareFileModalShow)
354 
	}
 360 
	}
Línea 355... Línea 361...
355 
 
 361 
 
- 
 
 362 
	const handleResponseMessage = (element) => {
356 
	const handleResponseMessage = (element) => {
 363 
		element.mtype === 'text'
- 
 
 364 
			? setResponseMessage(element)
- 
 
 365 
			: setResponseMessage({ ...element, m: 'Archivo adjunto' })
- 
 
 366 
 
357 
		setResponseMessage(element)
 367 
		textAreaEl.current && textAreaEl.current.focus()
Línea 358... Línea 368...
358 
	}
 368 
	}
359 
 
 369 
 
360 
	const messagesRender = () => {
 370 
	const messagesRender = () => {
361 
		return (
 371 
		return (
362 
			<React.Fragment>
 372 
			<React.Fragment>
363 
				{currentPage < pages && <li ref={loader}>Cargando...</li>}
 373 
				{currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
364 
				{oldMessages.map((oldMessage, index) =>
 374 
				{oldMessages.map((oldMessage) => (
365 
					<MessageTemplate key={index} message={oldMessage} />
 375 
					<MessageTemplate message={oldMessage} />
- 
 
 376 
				))}
- 
 
 377 
				{messages.map((message, i) => {
- 
 
 378 
					let currentTime = message.time
- 
 
 379 
					let prevMessage = messages[i - 1]
- 
 
 380 
 
- 
 
 381 
					const dailys = ['mes', 'meses', 'semana', 'semanas', 'dia', 'dias', 'año', 'años']
- 
 
 382 
					const date = new Date(Date.now()).toLocaleDateString()
- 
 
 383 
 
- 
 
 384 
					if (prevMessage !== undefined) {
- 
 
 385 
						let prevTime = messages[i - 1].time
- 
 
 386 
 
- 
 
 387 
						if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
366 
				)}
 388 
							return <>
- 
 
 389 
								{/* <h2 className="text-center date-chat">{date}</h2> */}
- 
 
 390 
								<MessageTemplate
- 
 
 391 
									message={message}
- 
 
 392 
									setResponseMessage={handleResponseMessage}
- 
 
 393 
									responseMessage={responseMessage}
367 
				{messages.map((message, i) =>
 394 
								/>
- 
 
 395 
							</>
- 
 
 396 
						}
- 
 
 397 
					}
368 
					<MessageTemplate
 398 
 
369 
						key={i}
 399 
					return <MessageTemplate
370 
						message={message}
 400 
						message={message}
371 
						setResponseMessage={handleResponseMessage}
 401 
						setResponseMessage={handleResponseMessage}
372 
						responseMessage={responseMessage}
 402 
						responseMessage={responseMessage}
373 
					/>
 403 
					/>
374 
				)}
 404 
				})}
375 
			</React.Fragment>
 405 
			</React.Fragment>
Línea 376... Línea 406...
376 
		)
 406 
		)
Línea 504... Línea 534...
504 
			</span>
 534 
			</span>
505 
			<div className="addPersonToGroupTab">
 535 
			<div className="addPersonToGroupTab">
506 
				{availableContactsToAdd.length ? (
 536 
				{availableContactsToAdd.length ? (
507 
					availableContactsToAdd.map(({ image, name, id }) => (
 537 
					availableContactsToAdd.map(({ image, name, id }) => (
508 
						<div className="addPersonToGroupTab__person" key={id}>
 538 
						<div className="addPersonToGroupTab__person" key={id}>
- 
 
 539 
							<div className="d-inline-flex" style={{ gap: '5px' }}>
509 
							<img
 540 
								<img
510 
								className="chat-image img-circle pull-left"
 541 
									className="chat-image img-circle pull-left"
511 
								height="36"
 542 
									height="36"
512 
								width="36"
 543 
									width="36"
513 
								src={image}
 544 
									src={image}
514 
								alt="image-image"
 545 
									alt="image-image"
515 
							/>
 546 
								/>
516 
							<div className="name">{name}</div>
 547 
								<div className="name">{name}</div>
- 
 
 548 
							</div>
517 
							<span
 549 
							<span
518 
								style={{
 550 
								style={{
519 
									cursor: 'pointer',
 551 
									cursor: 'pointer',
520 
								}}
 552 
								}}
521 
								onClick={() => {
 553 
								onClick={() => {
Línea 588... Línea 620...
588 
		/>
 620 
		/>
589 
	)
 621 
	)
Línea 590... Línea 622...
590 
 
 622 
 
591 
	const userChat = (
 623 
	const userChat = (
- 
 
 624 
		<React.Fragment>
592 
		<React.Fragment>
 625 
			<div
- 
 
 626 
				className="chatbox active-chat"
- 
 
 627 
				style={{
- 
 
 628 
					bottom: '0px',
- 
 
 629 
					right: `${(index + 1) * 295}px`,
- 
 
 630 
					zIndex: '1',
- 
 
 631 
					display: 'block',
- 
 
 632 
				}}
593 
			<div className="chatbox active-chat">
 633 
			>
594 
				<div className="chatbox-icon">
 634 
				<div className="chatbox-icon">
595 
					<div className="contact-floating red">
 635 
					<div className="contact-floating red">
596 
						<img className="chat-image img-circle pull-left" src={image} />
 636 
						<img className="chat-image img-circle pull-left" src={image} />
597 
						<small className="unread-msg">2</small>
 637 
						<small className="unread-msg">2</small>
Línea 689... Línea 729...
689 
									{messagesRender()}
 729 
									{messagesRender()}
690 
								</ul>
 730 
								</ul>
691 
							</div>
 731 
							</div>
692 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
 732 
							<div className="wchat-footer wchat-chat-footer chatboxinput">
693 
								<div id="chatFrom" className="chatFrom">
 733 
								<div id="chatFrom" className="chatFrom">
694 
									<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
 - 
 
695 
										{
 734 
									{
696 
											responseMessage
 735 
										responseMessage
697 
											&&
 736 
										&&
698 
											<>
 737 
										<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
699 
												<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
 738 
											<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
700 
												<p>{responseMessage.m}</p>
 739 
											<p>{responseMessage.m}</p>
701 
											</>
 740 
										</div>
702 
										}
 741 
									}
703 
									</div>
 - 
 
704 
									<div className="block-wchat">
 742 
									<div className="block-wchat">
705 
										<button
 743 
										<button
706 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
 744 
											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
707 
											id="uploadFile"
 745 
											id="uploadFile"
708 
											onClick={handleShareFileModalShow}
 746 
											onClick={handleShareFileModalShow}
Línea 726... Línea 764...
726 
													name="chattxt"
 764 
													name="chattxt"
727 
													style={{ resize: 'none', height: '20px' }}
 765 
													style={{ resize: 'none', height: '20px' }}
728 
													placeholder="Escribe un mensaje"
 766 
													placeholder="Escribe un mensaje"
729 
													onKeyDown={handleChatBoxKeyDown}
 767 
													onKeyDown={handleChatBoxKeyDown}
730 
													ref={textAreaEl}
 768 
													ref={textAreaEl}
- 
 
 769 
													onBlur={() => responseMessage && setResponseMessage(null)}
731 
													onFocus={() => onRead(index)}
 770 
													onFocus={() => onRead(index)}
732 
												></textarea>
 771 
												></textarea>
733 
												<input
 772 
												<input
734 
													id="to_uname"
 773 
													id="to_uname"
735 
													name="to_uname"
 774 
													name="to_uname"
Línea 918... Línea 957...
918 
													style={{ resize: 'none', height: '20px' }}
 957 
													style={{ resize: 'none', height: '20px' }}
919 
													placeholder="Escribe un mensaje"
 958 
													placeholder="Escribe un mensaje"
920 
													onKeyDown={handleChatBoxKeyDown}
 959 
													onKeyDown={handleChatBoxKeyDown}
921 
													ref={textAreaEl}
 960 
													ref={textAreaEl}
922 
													onFocus={() => onRead(index)}
 961 
													onFocus={() => onRead(index)}
- 
 
 962 
													onBlur={() => responseMessage && setResponseMessage(null)}
923 
												></textarea>
 963 
												></textarea>
924 
												<input
 964 
												<input
925 
													id="to_uname"
 965 
													id="to_uname"
926 
													name="to_uname"
 966 
													name="to_uname"
927 
													value="'+chatboxtitle+'"
 967 
													value="'+chatboxtitle+'"
Línea 973... Línea 1013...
973 
	default:
 1013 
	default:
974 
		break
 1014 
		break
975 
	}
 1015 
	}
976 
}
 1016 
}
Línea 977... Línea 1017...
977 
 
 1017 
 
978 
export default PersonalChat
 1018 
export default PersonalChat