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

 const OPTIONS = {
   GROUP: 'group',
   CONFERENCE: 'conference',
   ADD_CONTACTS: 'addContacts',
   LIST_CONTACTS: 'listContacts',
-  INITIAL: null
+  INITIAL: null,
+}
+const PersonalChat = ({
+  entity,
+  onClose,
+  onMinimize,
+  onRead,
+  not_seen_messages,
+  minimized,
+  timezones,
-const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized, timezones }) => {
+}) => {
   const {
     // id,
     image,
     name,
     url_leave,
     url_delete,
     url_add_user_to_group,
     url_get_contact_group_list,
     url_get_contacts_availables_for_group,
-    url_zoom
+    url_zoom,
   } = entity
   const [optionTab, setOptionTab] = useState(OPTIONS.INITIAL)
   const [currentPage, setCurrentPage] = useState(1)
   const [lastPage, setLastPage] = useState(1)
   const [loading, setLoading] = useState(false)
+  const filtredGroupList = groupContactsList.filter((conversation) =>
     conversation.name.toLowerCase().includes(search.toLowerCase())
   const filtredGroupList = groupContactsList.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
   // refs
   const handleGetMessages = async () => {
     setLoading(true)
     const response = await axios.get(url_get_all_messages)
     const resData = response.data
     if (!resData.success) {
-      return ('ha ocurrido un error', resData)
+      return 'ha ocurrido un error'
+    }
     const updatedMessages = [...resData.data.items].reverse()
     const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
+      if (
-      if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
+        messages.findIndex((message) => message.id === updatedMessage.id) === -1
+      ) {
         acum = [...acum, updatedMessage]
+      }
       return acum
     }, [])
       setMessages([...messages, ...newMessages])
       setLoading(false)
       setLastPage(resData.data.pages)
       scrollToBottom()
     } else {
-      setMessages([...updatedMessages])
       setLoading(false)
+    }
+  }
+  const handleLoadMore = async () => {
-  const handleLoadMore = async () => {
+    await axios
-    await axios.get(`${url_get_all_messages}?page=${currentPage}`)
+      .get(`${url_get_all_messages}?page=${currentPage}`)
       .then((response) => {
         const resData = response.data
         if (resData.success) {
           if (resData.data.page > 1) {
       const resData = response.data
       if (resData.success) {
         let newMessage = resData.data
         online
-          ? newMessage = { ...newMessage, not_received: false }
+          ? (newMessage = { ...newMessage, not_received: false })
-          : newMessage = { ...newMessage, not_received: true }
+          : (newMessage = { ...newMessage, not_received: true })
         setMessages([...messages, newMessage])
+      }
       : setResponseMessage({ ...element, m: 'Archivo adjunto' })
     textAreaEl.current && textAreaEl.current.focus()
+  } */
-  } */
   const displayConferenceModal = () =>
-  const displayConferenceModal = () => setShowConferenceModal(!showConferenceModal)
+    setShowConferenceModal(!showConferenceModal)
   const loadPersonsAvailable = async () => {
+      }
     })
+  }
   const tabsOptions = {
-    group:
+    group: (
       <ul>
+        {url_get_contact_group_list && (
+          <li
-        {url_get_contact_group_list &&
+            className="optionsTab__option"
+            onClick={() => showOptions(OPTIONS.LIST_CONTACTS)}
           <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
-        {url_add_user_to_group &&
+            className="optionsTab__option"
+            onClick={() => showOptions(OPTIONS.ADD_CONTACTS)}
           <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}
           </li>
-        }
+        )}
-        {url_zoom &&
-          <li
-            className="optionsTab__option"
+        {url_zoom && (
-            onClick={displayConferenceModal}
           <li className="optionsTab__option" onClick={displayConferenceModal}>
             <span className="optionsTab__option__icon">
               <i className="fa fa-user-plus" />
             </span>
             {CHAT_LABELS.CREATE_CONFERENCE}
           </li>
-        }
+        )}
-        {url_delete &&
+        {url_delete && (
           <li
             className="optionsTab__option"
             style={{ color: 'red' }}
             onClick={() => {
             <span className="optionsTab__option__icon">
               <i className="fa fa-trash"></i>
             </span>
             Eliminar grupo
           </li>
-        }
+        )}
-        {!!url_leave &&
+        {!!url_leave && (
           <li
             className="optionsTab__option"
             style={{ color: 'red' }}
             onClick={() => {
               handleConfirmModalShow()
             <span className="optionsTab__option__icon">
               <i className="fa fa-user-times"></i>
             </span>
             Dejar grupo
           </li>
-        }
+        )}
-      </ul>,
+      </ul>
+    ),
-    conference:
+    conference: (
       <ul>
         <li className="optionsTab__option" onClick={displayConferenceModal}>
           <span className="optionsTab__option__icon">
             <i className="fa fa-user-plus" />
           </span>
           {CHAT_LABELS.CREATE_CONFERENCE}
         </li>
-      </ul>,
+      </ul>
+    ),
-    addContacts:
+    addContacts: (
       <>
-        {availableContactsToAdd.length
+        {availableContactsToAdd.length ? (
-          ? <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align='left' />
+          <EmptySection message={CHAT_LABELS.NOT_CONTACTS} align="left" />
+        ) : (
-          : availableContactsToAdd.map(({ image, name, id }) =>
+          availableContactsToAdd.map(({ image, name, id }) => (
             <div className="addPersonToGroupTab__person" key={id}>
               <div className="d-inline-flex" style={{ gap: '5px' }}>
                 <img
                   className="chat-image img-circle pull-left"
                   height="36"
                   src={image}
                   alt="image-image"
                 />
                 <div className="name">{name}</div>
               </div>
+              <span
+                className="cursor-pointer"
-              <span className='cursor-pointer' onClick={() => handleAddPersonToGroup(id)}>
+                onClick={() => handleAddPersonToGroup(id)}
+              >
                 <i className="fa fa-plus-circle" />
               </span>
             </div>
-          )}
+          ))
+        )}
-      </>,
+      </>
+    ),
-    listContacts:
+    listContacts: (
       <>
-        <div className='group__search'>
+        <div className="group__search">
           <SearchIcon />
           <input
-            type='text'
+            type="text"
             placeholder={CHAT_LABELS.SEARCH}
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        {filtredGroupList.length
+        {filtredGroupList.length ? (
-          ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
+          filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
             return (
               <div className="addPersonToGroupTab__person" key={id}>
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                   <img
                     className="chat-image img-circle pull-left"
                     src={image}
                     alt="image-image"
                   />
                   <div className="name">{name}</div>
                 </div>
-                {url_remove_from_group &&
+                {url_remove_from_group && (
+                  <span
+                    className="cursor-pointer"
+                    onClick={() =>
-                  <span className="cursor-pointer" onClick={() => handleDeletePersonFromGroup(url_remove_from_group)}>
+                      handleDeletePersonFromGroup(url_remove_from_group)
+                    }
+                  >
                     <i className="fa fa-user-times" />
                   </span>
-                }
+                )}
               </div>
+            )
           })
+        ) : (
-          : <div className="addPersonToGroupTab__person">{CHAT_LABELS.NOT_CONTACTS}</div>
+          <div className="addPersonToGroupTab__person">
+            {CHAT_LABELS.NOT_CONTACTS}
+          </div>
-        }
+        )}
       </>
+    ),
+  }
   // getMessageOnMaximize and subscribe to infinite Loader
   useEffect(async () => {
     const options = {
       root: null,
       rootMargin: '20px',
-      treshold: 1.0
+      treshold: 1.0,
+    }
     const observer = new IntersectionObserver(handleObserver, options)
     if (!minimized) {
       await handleGetMessages()
   // getMessagesInterval
   useEffect(() => {
     if (window.location.pathname === '/group/my-groups') {
+      const items = document.getElementsByClassName('sc-jSgupP')
-      const items = document.getElementsByClassName('sc-jSgupP')
+      if (items && items.length > 0) {
+        items[0].style.display = 'none'
       if (items && items.length > 0) { items[0].style.display = 'none' }
+    }
   }, [minimized])
   }, [optionTab])
   return (
     <>
-      <div className="personal-chat">
       <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>
-            <a href={profile} target="_blank" rel="noreferrer">{name}</a>
+            {type === 'user' && (
+              <small className={online ? 'online' : 'offline'}>
+                {online ? 'En línea' : 'Desconectado'}
+              </small>
-            {type === 'user' && <small className={online ? 'online' : 'offline'} >{online ? 'En línea' : 'Desconectado'}</small>}
+            )}
           </div>
+          <div className="options ml-auto">
-          <div className="options ml-auto">
+            <i
+              className="cursor-pointer fa fa-gear"
+              onClick={() =>
-            <i className="cursor-pointer fa fa-gear"
+                showOptions(
+                  type === 'user' ? OPTIONS.CONFERENCE : OPTIONS.GROUP
+                )
+              }
+            />
-              onClick={() => showOptions(type === 'user' ? OPTIONS.CONFERENCE : OPTIONS.GROUP)} />
+            <i
+              className={'cursor-pointer fa fa-minus-circle'}
+              onClick={handleActive}
+            />
-            <i className={'cursor-pointer fa fa-minus-circle'} onClick={handleActive} />
+            <i
+              className="cursor-pointer fa fa-times-circle"
+              onClick={handleCloseChat}
-            <i className="cursor-pointer fa fa-times-circle" onClick={handleCloseChat} />
+            />
           </div>
+        </div>
-        </div>
+        <div
+          className="panel-body"
-        <div className="panel-body" style={{ display: !minimized ? 'block' : 'none' }}>
+          style={{ display: !minimized ? 'block' : 'none' }}
+        >
-          {optionTab
+          {optionTab ? (
-            ? <StyledShowOptions>
+            <StyledShowOptions>
               <span className="optionBack" onClick={() => showOptions()}>
                 <i className="fa icon-arrow-left" />
-              </span>
-              <div className="optionsTab">
-                {tabsOptions[optionTab]}
+              </span>
+              <div className="optionsTab">{tabsOptions[optionTab]}</div>
-              </div>
+            </StyledShowOptions>
-            </StyledShowOptions>
+          ) : (
-            : <>
+            <>
               <ChatList
                 messages={[...oldMessages, ...messages]}
                 currentPage={currentPage}
                 isNotSeen={not_seen_messages}
                 markRead={() => onRead(entity)}
                 onSend={sendMessage}
               />
             </>
-          }
+          )}
         </div>
       </div>
       <ConfirmModal
         show={confirmModalShow}
         onClose={handleConfirmModalShow}
         onAccept={handleConfirmModalAccept}
 const StyleModal = ({
   title = 'Crea una conferencia',
   size = 'md',
   show = false,
-  children
+  children,
 }) => {
   const [isShow, setIsShow] = useState(show)
   useEffect(() => {
     setIsShow(show)
   }, [show])
-  const closeModal = () => setIsShow(false)
-  return (
-    <Modal
-      show={isShow}
+  const closeModal = () => setIsShow(false)
       onHide={closeModal}
-      style={{ overflowY: 'scroll' }}
+  return (
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{title}</Modal.Title>
+    <Modal show={isShow} onHide={closeModal} style={{ overflowY: 'scroll' }}>
-      </Modal.Header>
+      <Modal.Header closeButton>
-      <Modal.Body>
+        <Modal.Title>{title}</Modal.Title>
-        {children}
+      </Modal.Header>
-      </Modal.Body>
+      <Modal.Body>{children}</Modal.Body>
     </Modal>
+  )
+}
 export const ConferenceModal = ({
   show = false,
   timezones = {},
   zoomUrl = '',
-  onCreate = () => null
+  onCreate = () => null,
 }) => {
   const dt = new Date()
   const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
   const [date, setDate] = useState({
+    year: dt.toLocaleString('default', { year: 'numeric' }),
+    month: dt.toLocaleString('default', { month: '2-digit' }),
+    day: dt.toLocaleString('default', { day: '2-digit' }),
+  })
+  const [time, setTime] = useState(
+    dt.toLocaleString('es', {
-    year: dt.toLocaleString('default', { year: 'numeric' }),
+      hour: 'numeric',
-    month: dt.toLocaleString('default', { month: '2-digit' }),
+      minute: '2-digit',
-    day: dt.toLocaleString('default', { day: '2-digit' })
+      second: '2-digit',
-  })
+    })
   const [time, setTime] = useState(dt.toLocaleString('es', { hour: 'numeric', minute: '2-digit', second: '2-digit' }))
   const [coferenceType, setConferenceType] = useState(1)
   const dispatch = useDispatch()
   const handleChange = (value) => setConferenceType(value)
+  const handleDateTime = (value) => {
-  const handleDateTime = (value) => {
+    setDate({
+      ...date,
+      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
+      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
+      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value),
+    })
-    setDate({
+    setTime(
-      ...date,
+      new Intl.DateTimeFormat('es', {
-      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
+        hour: 'numeric',
-      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
+        minute: '2-digit',
-      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
+        second: 'numeric',
+      }).format(value)
+    )
     })
     setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
   const onSubmit = async (data) => {
         dispatch(addNotification({ msg: response.data, style: 'danger' }))
         return
+      }
       if (!response.success && typeof response.data === 'object') {
-        Object.entries(response.data)
+        Object.entries(response.data).forEach(([key, value]) => {
-          .forEach(([key, value]) => {
+          dispatch(
-            dispatch(addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' }))
+            addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' })
+          )
-          })
+        })
         return
+      }
       dispatch(addNotification({ msg: response.data, style: 'success' }))
       onCreate()
       reset()
+    } catch (error) {
-    } catch (error) {
+      console.log(`Error: ${error.message}`)
+      return dispatch(
-      console.log(`Error: ${error.message}`)
+        addNotification({ msg: 'Ha ocurrido un error', style: 'danger' })
       return dispatch(addNotification({ msg: 'Ha ocurrido un error', style: 'danger' }))
+    }
   }
   return (
-    <StyleModal title='Crea una conferencia' show={show}>
+    <StyleModal title="Crea una conferencia" show={show}>
       <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">
         <div className="form-group">
           <label htmlFor="first_name">Título</label>
           <input
             type="text"
             name="title"
             className="form-control"
+            maxLength={128}
-            maxLength={128}
+            ref={register({ required: 'Por favor ingrese un título' })}
+          />
-            ref={register({ required: 'Por favor ingrese un título' })}
+          {errors.title && (
-          />
+            <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
-          {errors.title && <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>}
+          )}
         </div>
         <div className="form-group">
           <label htmlFor="first_name">Descripción</label>
           <input
             type="text"
             name="description"
+            className="form-control"
-            className="form-control"
+            ref={register({ required: 'Por favor ingrese una descripción' })}
+          />
-            ref={register({ required: 'Por favor ingrese una descripción' })}
+          {errors.description && (
-          />
+            <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
-          {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
+          )}
         </div>
         <div className="form-group">
           <label htmlFor="timezone">Tipo de conferencia</label>
           <select
             name="type"
             className="form-control"
             onChange={({ target }) => handleChange(target.value)}
-            ref={register}
-          >
-            <option value='i'>
+            ref={register}
-              Inmediata
-            </option>
             <option value='s'>
-              Programada
+            <option value="i">Inmediata</option>
-            </option>
-          </select>
+            <option value="s">Programada</option>
-        </div>
+          </select>
         </div>
-          coferenceType === 's' &&
+        {coferenceType === 's' && (
           <div className="form-group">
             <label htmlFor="timezone">Horario</label>
               inputProps={{ className: 'form-control' }}
               initialValue={Date.parse(new Date())}
               closeOnSelect
             />
           </div>
-        }
+        )}
         <div className="form-group">
           <label htmlFor="timezone">Zona horaria</label>
           <select
             className="form-control"
             name="timezone"
               <option value={key} key={key}>
                 {value}
               </option>
             ))}
           </select>
+          {errors.timezone && (
-          {errors.timezone && <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>}
+            <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>
+          )}
         </div>
         <div className="form-group">
           <label htmlFor="timezone">Duración</label>
-          <select
-            className="form-control"
+          <select className="form-control" name="duration" ref={register}>
-            name="duration"
-            ref={register}
-          >
             <option value={5}>5-min</option>
             <option value={10}>10-min</option>
             <option value={15}>15-min</option>
             <option value={20}>20-min</option>
             <option value={25}>25-min</option>
             type="password"
             name="password"
             className="form-control"
             ref={register({
               required: 'Por favor ingrese una contraseña',
+              maxLength: {
+                value: 6,
-              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }
+                message: 'La contraseña debe tener al menos 6 digitos',
+              },
             })}
           />
+          {errors.password && (
-          {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
+            <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
+          )}
         </div>
         <button className="btn btn-primary" type="submit">
           Crear
         </button>
       </form>

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/chat/chat/personal-chat/PersonalChat.js – Rev 5344 → 5807