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,
-		unsee_messages,
+		url_clear,
 		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,
-	} = entity
+	} = props.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 = () => {
+	const handleConfirmModalAction = async () => {
+		await axios.post(modalActionUrl.current).then((response) => {
+			const resData = response.data
+			if (resData.success) {
+			}
-		axios.post(modalActionUrl.current)
+		})
-			.then(({ data }) => (data.success) && onClose(id, url_close))
+		await onClose(id, url_close)
+	}
+	const handleObserver = (entities) => {
-	const handleObserver = (entities) => {
+		const target = entities[0]
+		if (target.isIntersecting) {
-		const target = entities[0]
+			setCurrentPage((prevState) => prevState + 1)
 		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,
+			}
-			// loader observer
+			const observer = new IntersectionObserver(handleObserver, options)
 			if (loader.current) {
 				observer.observe(loader.current)
+			}
+		}
 	const handleShareFileModalShow = () => {
 		setShareFileModalShow(!shareFileModalShow)
+	}
-	const handleResponseMessage = (element) => {
-		element.mtype === 'text'
+	const handleResponseMessage = (element) => {
-			? setResponseMessage(element)
-			: setResponseMessage({ ...element, m: 'Archivo adjunto' })
-		textAreaEl.current && textAreaEl.current.focus()
+		setResponseMessage(element)
+	}
 	const messagesRender = () => {
 		return (
 			<React.Fragment>
 				{currentPage < pages ? <li ref={loader}>Cargando...</li> : ''}
-				{oldMessages.map((oldMessage) => (
+				{oldMessages.map((oldMessage, index) => (
-					<MessageTemplate message={oldMessage} />
+					<MessageTemplate key={index} message={oldMessage} />
 				))}
 				{messages.map((message, i) => {
-					let currentTime = message.time
-					let prevMessage = messages[i - 1]
+					let currentTime = message.time
+					let prevMessage = messages[i - 1]
-					const dailys = ['mes', 'meses', 'semana', 'semanas', 'dia', 'dias', 'año', 'años']
+					const dailys = ['mess', 'semana', 'dias', 'anio']
-					//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-chat">{date}</h2> */}
+								<h2 className="text-center">{date}</h2>
 								<MessageTemplate
 									message={message}
 									setResponseMessage={handleResponseMessage}
 									responseMessage={responseMessage}
 								/>
+							</>
 							</>
+					}
 					return <MessageTemplate
-					return <MessageTemplate
+						key={i}
 		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>
-			<div
+		<React.Fragment>
-				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 14577 → 14578