WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/chat/chat/personal-chat/PersonalChat.js

 /* eslint-disable camelcase */
 /* eslint-disable react/prop-types */
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { axios } from '../../../utils'
-import styled from 'styled-components'
-import Emojione from './emojione/Emojione'
-import SendFileModal from './send-file-modal/SendFileModal'
-import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
-import MessageTemplate from './messageTemplate/MessageTemplate'
 import { Modal } from 'react-bootstrap'
 import { useForm } from 'react-hook-form'
-import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
-import 'react-datetime/css/react-datetime.css'
-import Datetime from 'react-datetime'
 import { addNotification } from '../../../redux/notification/notification.actions'
-import Spinner from '../../../shared/loading-spinner/Spinner'
+import { getMessages } from '../../../redux/conversation/conversation.actions'
 import { useDispatch, useSelector } from 'react-redux'
+import styled from 'styled-components'
+import Datetime from 'react-datetime'
 import SearchIcon from '@mui/icons-material/Search'
+import Emojione from './emojione/Emojione'
+import SendFileModal from './send-file-modal/SendFileModal'
+import MessageTemplate from './messageTemplate/MessageTemplate'
+import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
 import EmptySection from '../../../shared/empty-section/EmptySection'
-import { getMessages } from '../../../redux/conversation/conversation.actions'
+import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
+import 'react-datetime/css/react-datetime.css'
 const StyledShowOptions = styled.div`
   height: 342px;
   flex-direction: column;
       border-bottom: 1px solid #e2e2e2;
+    }
+  }
+`
+const OPTIONS = {
+  GROUP: 'group',
+  CONFERENCE: 'conference',
+  ADD_CONTACTS: 'addContacts',
+  LIST_CONTACTS: 'listContacts',
+  INITIAL: null
+}
 const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {
   const {
     id,
     image,
   } = entity
   const { messages, currentPage, lastPage, loading } = useSelector((state) => state.conversation)
   const dispatch = useDispatch()
-  const [optionTab, setOptionTab] = useState('default')
+  const [optionTab, setOptionTab] = useState(OPTIONS.INITIAL)
   const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
-  const [groupContactsList, setGroupContactsList] = useState([])
+  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
   const [groupContactsList, setGroupContactsList] = useState([])
   const [showOptions, setShowOptions] = useState(false)
   // refs
   const conversationListEl = useRef(null)
   const loader = useRef(null)
-  const modalActionUrl = useRef('')
-  const chatboxEl = useRef(null)
+  const modalActionUrl = useRef('')
   const textAreaEl = useRef(null)
   const handleActive = () => {
       setShowEmojiTab(false)
       // setResponseMessage(null)
+    }
+  }
-  const handleShowOptions = () => {
+  const showOptions = (tab = OPTIONS.INITIAL) => {
-    onMinimize(entity, false)
-    setShowOptions(!showOptions)
-  }
-  const handleChangeTab = (tab) => {
+    onMinimize(entity, false)
     setOptionTab(tab)
+  }
       cursorPosition + unicode.length,
       cursorPosition + unicode.length
+    )
+  }
-  // useEffect(() => {
-  //   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)
-    if (!minimized) {
-      await handleGetMessages()
-      // loader observer
-      if (loader.current) {
-        observer.observe(loader.current)
-      }
-    }
-    return () => {
-      if (loader.current) {
-        observer.unobserve(loader.current)
-      }
-    }
-  }, [minimized])
-  // LoadMore on change page
-  useEffect(() => {
-    let loadMore = () => handleLoadMore()
-    loadMore()
-    return () => {
-      loadMore = null
-    }
-  }, [currentPage])
-  // getMessagesInterval
-  useEffect(() => {
-    if (window.location.pathname === '/group/my-groups') {
-      const items = document.getElementsByClassName('sc-jSgupP')
-      if (items && items.length > 0) { items[0].style.display = 'none' }
-    }
-  }, [minimized])
-  useEffect(() => {
-    let timer
-    if (!minimized && !loading) {
-      timer = setTimeout(() => handleGetMessages(), 1000)
-    }
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [minimized, loading])
   const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
         ))}
       </>
+    )
+  }
-  // useEffect for tabs changing
-  useEffect(() => {
-    if (optionTab === 'addContacts') loadPersonsAvailable()
-    if (optionTab === 'listContacts') loadGroupContacts()
-  }, [optionTab])
   const loadPersonsAvailable = async () => {
     await axios.get(url_get_contacts_availables_for_group).then((response) => {
       const resData = response.data
       if (resData.success) {
   const tabsOptions = {
     group:
       <ul>
         {url_get_contact_group_list &&
-          <li className="optionsTab__option" onClick={() => handleChangeTab('listContacts')}>
+          <li className="optionsTab__option" onClick={() => showOptions(OPTIONS.LIST_CONTACTS)}>
             <span className="optionsTab__option__icon">
               <i className="fa fa-group" />
               Integrantes
             </span>
           </li>
+        }
         {url_add_user_to_group &&
-          <li className="optionsTab__option" onClick={() => handleChangeTab('addContacts')}>
+          <li className="optionsTab__option" onClick={() => showOptions(OPTIONS.ADD_CONTACTS)}>
             <span className="optionsTab__option__icon">
               <i className="fa fa-user-plus"></i>
             </span>
             {CHAT_LABELS.ADD_CONTACTS}
           : <div className="addPersonToGroupTab__person">{CHAT_LABELS.NOT_CONTACTS}</div>
+        }
       </>
+  }
+  // useEffect(() => {
+  //   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)
+    if (!minimized) {
+      await handleGetMessages()
+      // loader observer
+      if (loader.current) {
+        observer.observe(loader.current)
+      }
+    }
+    return () => {
+      if (loader.current) {
+        observer.unobserve(loader.current)
+      }
+    }
+  }, [minimized])
+  // LoadMore on change page
+  useEffect(() => {
+    let loadMore = () => handleLoadMore()
+    loadMore()
+    return () => {
+      loadMore = null
+    }
+  }, [currentPage])
+  // getMessagesInterval
+  useEffect(() => {
+    if (window.location.pathname === '/group/my-groups') {
+      const items = document.getElementsByClassName('sc-jSgupP')
+      if (items && items.length > 0) { items[0].style.display = 'none' }
+    }
+  }, [minimized])
+  useEffect(() => {
+    let timer
+    if (!minimized && !loading) {
+      timer = setTimeout(() => handleGetMessages(), 1000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [minimized, loading])
+  // useEffect for tabs changing
+  useEffect(() => {
+    if (optionTab === 'addContacts') loadPersonsAvailable()
+    if (optionTab === 'listContacts') loadGroupContacts()
+  }, [optionTab])
   return (
     <>
       <div className="personal-chat">
         <div className={`chat-header ${not_seen_messages ? 'notify' : ''}`}>
           <img src={image} alt="avatar-image" />
           <div className="info-content">
             <a href={profile} target="_blank" rel="noreferrer">{name}</a>
-            {type === 'user' && <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>}
-          </div>
+            {type === 'user' && <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>}
           </div>
-          <div className="options">
-            <i className="cursor-pointer fa fa-gear"
+          <div className="options">
-              onClick={() => {
-                if (type === 'user') handleChangeTab('conference')
-                handleShowOptions()
+            <i className="cursor-pointer fa fa-gear"
-              }} />
+              onClick={() => showOptions(type === 'user' ? OPTIONS.CONFERENCE : OPTIONS.GROUP)} />
             <i className={'cursor-pointer fa fa-minus-circle'} onClick={handleActive} />
             <i className="cursor-pointer fa fa-times-circle" onClick={handleCloseChat} />
           </div>
+        </div>
-        </div>
+        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
         <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
         {optionTab
-          <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
+          ? <StyledShowOptions>
-            <span className="optionBack" onClick={() => optionTab !== 'default' ? handleChangeTab('default') : handleShowOptions()}>
+            <span className="optionBack" onClick={() => showOptions()}>
               <i className="fa icon-arrow-left" />
             </span>
-            <div className="optionsTab">
-              {tabsOptions[optionTab]}
+            <div className="optionsTab">
-            </div>
+              {tabsOptions[optionTab]}
-          </StyledShowOptions>
+            </div>
           </StyledShowOptions>
-          <div className="chat-conversation" style={{ display: showOptions ? 'none' : 'block' }}>
+          : <div className="chat-conversation">
             <div className="reverseChatBox" ref={conversationListEl}>
               </div>
             </div>
           </div>
+        }
-          </div>
+        </div>
         </div>
       </div>
       <ConfirmModal
         show={confirmModalShow}
       <ConferenceModal
         show={showConferenceModal}
         timezones={timezones}
         zoomUrl={url_zoom}
         onCreate={() => {
-          handleShowOptions()
+          showOptions()
           displayConferenceModal()
         }}
       />
       <SendFileModal
         show={shareFileModalShow}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/chat/chat/personal-chat/PersonalChat.js – Rev 5328 → 5329