WebSVN – LeadersLinked - Backend – Diff – /react-webpack/chat/chat/personal-chat/PersonalChat.js

 import React from 'react'
 import { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 import { axios } from '../../../utils'
-import Spinner from '../../../shared/loading-spinner/Spinner'
 import Emojione from './emojione/Emojione'
 import SendFileModal from './send-file-modal/SendFileModal'
 import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
 import MessageTemplate from './messageTemplate/MessageTemplate'
       border-bottom: 1px solid #e2e2e2;
+    }
+  }
+`
-const PersonalChat = (props) => {
-	// props destructuring
+const PersonalChat = ({ entity, index, onClose, onMinimize, onRead }) => {
 	const { index, onClose, onMinimize, onRead } = props
 	// entity destructuring
 	const {
 		id,
 		image,
 		name,
 		online,
 		type,
-		unsee_messages,
-		url_clear,
+		unsee_messages,
 		url_close,
 		url_get_all_messages,
 		url_send,
 		url_upload,
 		url_leave,
 		url_delete,
 		url_add_user_to_group,
 		url_get_contact_group_list,
 		url_get_contacts_availables_for_group,
-	} = props.entity
+	} = entity
 	// states
 	const [messages, setMessages] = useState([])
 	const [responseMessage, setResponseMessage] = useState(null)
 			const formData = new FormData()
 			formData.append('message', emojione.toShort(message))
 			await axios.post(url_send, formData).then((response) => {
 				const resData = response.data
 				if (resData.success) {
+					let newMessage = resData.data
+					online
+						? newMessage = { ...newMessage, not_received: false }
+						: newMessage = { ...newMessage, not_received: true }
+					setMessages([...messages, newMessage])
+				}
 			})
 			e.target.value = ''
-			await handleGetMessages()
+			/* await handleGetMessages(); */
 			setShowEmojiTab(false)
 			setResponseMessage(null)
+		}
+	}
 				loadPersonsAvailable()
+			}
 		})
+	}
-	const handleConfirmModalAction = async () => {
+	const handleConfirmModalAction = () => {
-		await axios.post(modalActionUrl.current).then((response) => {
-			const resData = response.data
-			if (resData.success) {
-			}
-		})
+		axios.post(modalActionUrl.current)
-		await onClose(id, url_close)
+			.then(({ data }) => (data.success) && onClose(id, url_close))
+	}
-	const handleObserver = (entities) => {
-		const target = entities[0]
+	const handleObserver = (entities) => {
-		if (target.isIntersecting) {
-			setCurrentPage((prevState) => prevState + 1)
+		const target = entities[0]
 		target.isIntersecting && setCurrentPage((prevState) => prevState + 1)
+	}
 	const scrollToBottom = () => {
 		if (conversationListEl.current) {
 			conversationListEl.current.scrollTop =
-        conversationListEl.current.scrollHeight * 9
+				conversationListEl.current.scrollHeight * 9
+		}
 	//   setMessages([...oldMessages, ...newMessages]);
 	// }, [newMessages, oldMessages]);
 	// getMessageOnMaximize and subscribe to infinite Loader
+	useEffect(async () => {
+		const options = {
+			root: null,
+			rootMargin: '20px',
+			treshold: 1.0,
+		}
+		const observer = new IntersectionObserver(handleObserver, options)
 	useEffect(async () => {
 		if (!minimized) {
+			await handleGetMessages()
 			await handleGetMessages()
-			// loader observer
-			let options = {
-				root: null,
-				rootMargin: '20px',
-				treshold: 1.0,
-			}
-			const observer = new IntersectionObserver(handleObserver, options)
+			// loader observer
 			if (loader.current) {
 				observer.observe(loader.current)
+			}
+		}
 	const handleShareFileModalShow = () => {
 		setShareFileModalShow(!shareFileModalShow)
+	}
+	const handleResponseMessage = (element) => {
-	const handleResponseMessage = (element) => {
+		element.mtype === 'text'
+			? setResponseMessage(element)
+			: setResponseMessage({ ...element, m: 'Archivo adjunto' })
-		setResponseMessage(element)
+		textAreaEl.current && textAreaEl.current.focus()
+	}
 	const messagesRender = () => {
 		return (
 			<React.Fragment>
 				{currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
-				{oldMessages.map((oldMessage, index) => (
+				{oldMessages.map((oldMessage) => (
-					<MessageTemplate key={index} message={oldMessage} />
+					<MessageTemplate message={oldMessage} />
 				))}
 				{messages.map((message, i) => {
+					let currentTime = message.time
-					let currentTime = message.time
+					let prevMessage = messages[i - 1]
-					let prevMessage = messages[i - 1]
-					const dailys = ['mess', 'semana', 'dias', 'anio']
+					const dailys = ['mes', 'meses', 'semana', 'semanas', 'dia', 'dias', 'año', 'años']
-					const date = new Date(Date.now()).toLocaleDateString()
+					//const date = new Date(Date.now()).toLocaleDateString()
 					if (prevMessage !== undefined) {
 						let prevTime = messages[i - 1].time
 						if (prevTime !== currentTime && dailys.includes(prevTime.split(' ')[1])) {
 							return <>
-								<h2 className="text-center">{date}</h2>
+								{/* <h2 className="text-center date-chat">{date}</h2> */}
 								<MessageTemplate
 									message={message}
 									setResponseMessage={handleResponseMessage}
 									responseMessage={responseMessage}
 								/>
-							</>
 							</>
+						}
+					}
 					return <MessageTemplate
-						key={i}
+					return <MessageTemplate
 		case optionTabs.add_person_to_group:
 			loadPersonsAvailable()
 			break
 		case optionTabs.group_contacts_list:
 			loadGroupContacts()
-		default:
 			break
+		}
 	}, [optionTab])
 							onClick={() => handleChangeTab(optionTabs.group_contacts_list)}
+						>
 							<span className="optionsTab__option__icon">
 								<i className="fa fa-group"></i>
 							</span>
-              Integrantes
+							Integrantes
 						</li>
 					)}
 					{!!url_add_user_to_group && (
 						<li
 							className="optionsTab__option"
 							onClick={() => handleChangeTab(optionTabs.add_person_to_group)}
+						>
 							<span className="optionsTab__option__icon">
 								<i className="fa fa-user-plus"></i>
 							</span>
-              Agregar contactos
+							Agregar contactos
 						</li>
 					)}
 					{!!url_delete && (
 						<li
 							className="optionsTab__option"
 							}}
+						>
 							<span className="optionsTab__option__icon">
 								<i className="fa fa-trash"></i>
 							</span>
-              Eliminar grupo
+							Eliminar grupo
 						</li>
 					)}
 					{!!url_leave && (
 						<li
 							className="optionsTab__option"
 							}}
+						>
 							<span className="optionsTab__option__icon">
 								<i className="fa fa-user-times"></i>
 							</span>
-              Dejar grupo
+							Dejar grupo
 						</li>
 					)}
 				</ul>
 			</div>
 		</React.Fragment>
 			</span>
 			<div className="addPersonToGroupTab">
 				{availableContactsToAdd.length ? (
 					availableContactsToAdd.map(({ image, name, id }) => (
 						<div className="addPersonToGroupTab__person" key={id}>
+							<div className="d-inline-flex" style={{ gap: '5px' }}>
-							<img
+								<img
-								className="chat-image img-circle pull-left"
+									className="chat-image img-circle pull-left"
-								height="36"
+									height="36"
-								width="36"
+									width="36"
-								src={image}
+									src={image}
-								alt="image-image"
+									alt="image-image"
-							/>
+								/>
-							<div className="name">{name}</div>
+								<div className="name">{name}</div>
+							</div>
 							<span
 								style={{
 									cursor: 'pointer',
 								}}
 								onClick={() => {
 		/>
+	)
 	const userChat = (
+		<React.Fragment>
-		<React.Fragment>
+			<div
+				className="chatbox active-chat"
+				style={{
+					bottom: '0px',
+					right: `${(index + 1) * 295}px`,
+					zIndex: '1',
+					display: 'block',
+				}}
 			<div className="chatbox active-chat">
 				<div className="chatbox-icon">
 					<div className="contact-floating red">
 						<img className="chat-image img-circle pull-left" src={image} />
 						<small className="unread-msg">2</small>
                       <i className="fa fa-trash"></i>
                     </span> */}
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
+										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											{/* <span>
                       <i className="fa fa-trash"></i>
                     </span> */}
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
+										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											<span>
 												<i
 													className={'fa fa-minus-circle'}
 													onClick={handleActive}
 												></i>
 											</span>
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
+										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											<span>
 												<i
 													className="fa fa-times-circle"
 													onClick={handleCloseChat}
 						<div
 							id="uploader_'+chatboxtitle+'"
 							style={{ display: 'none', height: '342px' }}
+						>
 							<p>
-                Your browser does not have Flash, Silverlight or HTML5 support.
+								Your browser does not have Flash, Silverlight or HTML5 support.
 							</p>
 						</div>
 						<div className="chat-conversation" style={{ position: 'relative' }}>
 							<div className="reverseChatBox" ref={conversationListEl}>
 								<ul
 									{messagesRender()}
 								</ul>
 							</div>
 							<div className="wchat-footer wchat-chat-footer chatboxinput">
 								<div id="chatFrom" className="chatFrom">
-									<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
-										{
+									{
-											responseMessage
+										responseMessage
-                      &&
+										&&
-                      <>
+										<div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
-                      	<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
+											<span>{`Respondiendo a ${responseMessage.user_name}`}</span>
-                      	<p>{responseMessage.m}</p>
+											<p>{responseMessage.m}</p>
-                      </>
-										}
+										</div>
-									</div>
+									}
 									<div className="block-wchat">
 										<button
 											className="icon ti-clip attachment font-24 btn-attach btn-attach uploadFile"
 											id="uploadFile"
 											onClick={handleShareFileModalShow}
 											<div className="input-emoji">
 												<div
 													className="input-placeholder"
 													style={{ visibility: 'hidden', display: 'none' }}
+												>
-                          Escribe un mensaje
+													Escribe un mensaje
 												</div>
 												<textarea
 													className="input chatboxtextarea"
 													id="chatboxtextarea"
 													name="chattxt"
 													style={{ resize: 'none', height: '20px' }}
 													placeholder="Escribe un mensaje"
 													onKeyDown={handleChatBoxKeyDown}
 													ref={textAreaEl}
+													onBlur={() => responseMessage && setResponseMessage(null)}
 													onFocus={() => onRead(index)}
 												></textarea>
 												<input
 													id="to_uname"
 													name="to_uname"
                       <i className="fa fa-trash"></i>
                     </span> */}
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
+										// onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											{/* <span>
                       <i className="fa fa-trash"></i>
                     </span> */}
 										</div>
 												></i>
 											</span>
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
+										// onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											<span>
 												<i
 													className={'fa fa-minus-circle'}
 													onClick={handleActive}
 												></i>
 											</span>
 										</div>
 										<div
 											className="btn-group"
-											// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
+										// onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
-											// href="javascript:void(0)"
+										// href="javascript:void(0)"
+										>
 											<span>
 												<i
 													className="fa fa-times-circle"
 													onClick={handleCloseChat}
 											<div className="input-emoji">
 												<div
 													className="input-placeholder"
 													style={{ visibility: 'hidden', display: 'none' }}
+												>
-                          Escribe un mensaje
+													Escribe un mensaje
 												</div>
 												<textarea
 													className="input chatboxtextarea"
 													id="chatboxtextarea"
 													name="chattxt"
 													style={{ resize: 'none', height: '20px' }}
 													placeholder="Escribe un mensaje"
 													onKeyDown={handleChatBoxKeyDown}
 													ref={textAreaEl}
 													onFocus={() => onRead(index)}
+													onBlur={() => responseMessage && setResponseMessage(null)}
 												></textarea>
 												<input
 													id="to_uname"
 													name="to_uname"
 													value="'+chatboxtitle+'"

Proyectos de Subversion LeadersLinked - Backend

(root)/react-webpack/chat/chat/personal-chat/PersonalChat.js – Rev 14176 → 14577