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, { useState, useRef, useEffect } from 'react'
-import { axios } from "../../../utils";
+import { axios } from '../../../utils'
-import styled from "styled-components";
+import styled from 'styled-components'
-import Emojione from "./emojione/Emojione";
+import Emojione from './emojione/Emojione'
-import SendFileModal from "./send-file-modal/SendFileModal";
+import SendFileModal from './send-file-modal/SendFileModal'
-import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
+import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
-import MessageTemplate from "./messageTemplate/MessageTemplate";
+import MessageTemplate from './messageTemplate/MessageTemplate'
-import { Modal } from "react-bootstrap";
+import { Modal } from 'react-bootstrap'
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form'
-import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
+import FormErrorFeedback from '../../../shared/form-error-feedback/FormErrorFeedback'
 import 'react-datetime/css/react-datetime.css'
-import Datetime from "react-datetime";
+import Datetime from 'react-datetime'
-import { addNotification } from "../../../redux/notification/notification.actions";
+import { addNotification } from '../../../redux/notification/notification.actions'
-import Spinner from "../../../shared/loading-spinner/Spinner";
+import Spinner from '../../../shared/loading-spinner/Spinner'
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux'
 import SearchIcon from '@mui/icons-material/Search'
 const StyledChatHead = styled.div`
   .notify {
+    }
 % {
       background-color: unset;
+    }
+  }
-`;
+`
 const StyledShowOptions = styled.div`
   height: 342px;
   flex-direction: column;
   gap: 0.5rem;
   overflow-y: auto;
   position: relative;
   &.show {
     display: flex;
       align-items: center;
       padding: 0.2rem 0.5rem;
       border-bottom: 1px solid #e2e2e2;
+    }
+  }
-`;
+`
-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_delete,
     url_add_user_to_group,
     url_get_contact_group_list,
     url_get_contacts_availables_for_group,
     url_zoom
-  } = entity;
+  } = entity
   // states
-  const [messages, setMessages] = useState([]);
+  const [messages, setMessages] = useState([])
-  const [responseMessage, setResponseMessage] = useState(null);
+  const [responseMessage, setResponseMessage] = useState(null)
-  const [oldMessages, setOldMessages] = useState([]);
+  const [oldMessages, setOldMessages] = useState([])
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(1)
-  const [pages, setPages] = useState(1);
+  const [pages, setPages] = useState(1)
-  const [showOptions, setShowOptions] = useState(false);
+  const [showOptions, setShowOptions] = useState(false)
-  const [optionTab, setOptionTab] = useState("default");
+  const [optionTab, setOptionTab] = useState('default')
-  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([]);
+  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([])
-  const [groupContactsList, setGroupContactsList] = useState([]);
+  const [groupContactsList, setGroupContactsList] = useState([])
-  const [confirmModalShow, setConfirmModalShow] = useState(false);
+  const [confirmModalShow, setConfirmModalShow] = useState(false)
-  const [showEmojiTab, setShowEmojiTab] = useState(false);
+  const [showEmojiTab, setShowEmojiTab] = useState(false)
-  const [shareFileModalShow, setShareFileModalShow] = useState(false);
+  const [shareFileModalShow, setShareFileModalShow] = useState(false)
-  const [showConferenceModal, setShowConferenceModal] = useState(false);
+  const [showConferenceModal, setShowConferenceModal] = useState(false)
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState('')
   const filtredGroupList = groupContactsList.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))
   // refs
-  const conversationListEl = useRef(null);
+  const conversationListEl = useRef(null)
-  const loader = useRef(null);
+  const loader = useRef(null)
-  const modalActionUrl = useRef("");
+  const modalActionUrl = useRef('')
-  const chatboxEl = useRef(null);
+  const chatboxEl = useRef(null)
-  const textAreaEl = useRef(null);
+  const textAreaEl = useRef(null)
   // optionTabs
   const optionTabs = {
-    add_person_to_group: "add_person_to_group",
+    add_person_to_group: 'add_person_to_group',
-    group_contacts_list: "group_contacts_list",
+    group_contacts_list: 'group_contacts_list',
     meet: 'meet',
-    default: "default",
+    default: 'default'
-  };
+  }
   const handleActive = () => {
-    onRead(entity);
+    onRead(entity)
-    onMinimize(entity);
+    onMinimize(entity)
   };
   const handleGetMessages = async () => {
     setLoading(true)
-    const response = await axios.get(url_get_all_messages);
+    const response = await axios.get(url_get_all_messages)
-    const resData = response.data;
+    const resData = response.data
     if (!resData.success) {
-      return ("ha ocurrido un error", resData);
+      return ('ha ocurrido un error', resData)
     }
-    const updatedMessages = [...resData.data.items].reverse();
+    const updatedMessages = [...resData.data.items].reverse()
     const newMessages = updatedMessages.reduce((acum, updatedMessage) => {
       if (messages.findIndex((message) => message.id === updatedMessage.id) === -1) {
-        acum = [...acum, updatedMessage];
+        acum = [...acum, updatedMessage]
       }
-      return acum;
+      return acum
-    }, []);
+    }, [])
     if (newMessages.length > 0) {
-      setMessages([...messages, ...newMessages]);
+      setMessages([...messages, ...newMessages])
       setLoading(false)
-      setPages(resData.data.pages);
+      setPages(resData.data.pages)
-      scrollToBottom();
+      scrollToBottom()
     } else {
-      setMessages([...updatedMessages]);
+      setMessages([...updatedMessages])
       setLoading(false)
+    }
-  };
+  }
   const handleLoadMore = async () => {
     await axios.get(`${url_get_all_messages}?page=${currentPage}`)
       .then((response) => {
-        const resData = response.data;
+        const resData = response.data
         if (resData.success) {
           if (resData.data.page > 1) {
-            const updatedOldMessages = [...resData.data.items].reverse();
+            const updatedOldMessages = [...resData.data.items].reverse()
-            setOldMessages([...updatedOldMessages, ...oldMessages]);
+            setOldMessages([...updatedOldMessages, ...oldMessages])
             /* scrollDownBy(100); */
           }
         }
-      });
+      })
   };
   const handleCloseChat = () => onClose(entity)
   const handleChatBoxKeyDown = async (e) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
-      e.preventDefault();
+      e.preventDefault()
-      const message = e.target.value;
+      const message = e.target.value
-      const formData = new FormData();
+      const formData = new FormData()
-      formData.append("message", emojione.toShort(message));
+      formData.append('message', emojione.toShort(message))
       await axios.post(url_send, formData).then((response) => {
-        const resData = response.data;
+        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 = "";
+      e.target.value = ''
       /* await handleGetMessages(); */
-      setShowEmojiTab(false);
+      setShowEmojiTab(false)
       setResponseMessage(null)
+    }
-  };
+  }
   const handleShowOptions = () => {
-    onMinimize(entity, false);
+    onMinimize(entity, false)
-    setShowOptions(!showOptions);
+    setShowOptions(!showOptions)
-  };
+  }
   const handleChangeTab = (tab) => {
-    setOptionTab(tab);
+    setOptionTab(tab)
   };
   const handleAddPersonToGroup = async (id) => {
-    const formData = new FormData();
+    const formData = new FormData()
-    formData.append("uid", id);
+    formData.append('uid', id)
     await axios.post(url_add_user_to_group, formData).then((response) => {
-      const resData = response.data;
+      const resData = response.data
       if (resData.success) {
-        loadPersonsAvailable();
+        loadPersonsAvailable()
       }
-    });
+    })
-  };
+  }
   const handleConfirmModalAction = async () => {
     try {
       const { data } = await axios.post(modalActionUrl.current)
       if (!data.success) console.log('Error in confirm modal action')
       handleConfirmModalShow()
-      onClose(entity);
-      return
-    } catch (error) {
-      console.log(error)
-    }
-  };
       onClose(entity)
-  const handleObserver = (entities) => {
+      return
-    const target = entities[0];
+    } catch (error) {
-    if (target.isIntersecting) {
+      console.log(error)
       setCurrentPage((prevState) => prevState + 1);
-    }
+  }
   };
+  const handleObserver = (entities) => {
-  const scrollToBottom = () => {
+    const target = entities[0]
-    if (conversationListEl.current) {
+    if (target.isIntersecting) {
-      conversationListEl.current.scrollTop =
+      setCurrentPage((prevState) => prevState + 1)
-        conversationListEl.current.scrollHeight * 9;
+    }
-    }
+  }
-  };
+  const scrollToBottom = () => {
-  const scrollDownBy = (scrollDistance) => {
+    if (conversationListEl.current) {
-    if (conversationListEl.current) {
+      conversationListEl.current.scrollTop =
-      conversationListEl.current.scrollTop = scrollDistance;
+        conversationListEl.current.scrollHeight * 9
     }
-  };
+  }
   const handleShowEmojiTab = () => {
-    setShowEmojiTab(!showEmojiTab);
+    setShowEmojiTab(!showEmojiTab)
     // smiley_tpl(`${id}`);
   };
   const handleClickEmoji = (e) => {
-    const shortname = e.currentTarget.dataset.shortname;
+    const shortname = e.currentTarget.dataset.shortname
-    const currentText = textAreaEl.current.value;
+    const currentText = textAreaEl.current.value
-    let cursorPosition = textAreaEl.current.selectionStart;
+    const cursorPosition = textAreaEl.current.selectionStart
-    const textBehind = currentText.substring(0, cursorPosition);
+    const textBehind = currentText.substring(0, cursorPosition)
-    const textForward = currentText.substring(cursorPosition);
+    const textForward = currentText.substring(cursorPosition)
-    const unicode = emojione.shortnameToUnicode(shortname);
+    const unicode = emojione.shortnameToUnicode(shortname)
-    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`;
+    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`
-    textAreaEl.current.focus();
+    textAreaEl.current.focus()
     textAreaEl.current.setSelectionRange(
       cursorPosition + unicode.length,
       cursorPosition + unicode.length
     );
   };
   // useEffect(() => {
   //   setMessages([...oldMessages, ...newMessages]);
   // }, [newMessages, oldMessages]);
   // getMessageOnMaximize and subscribe to infinite Loader
   useEffect(async () => {
-    let options = {
+    const options = {
       root: null,
-      rootMargin: "20px",
+      rootMargin: '20px',
-      treshold: 1.0,
+      treshold: 1.0
-    };
+    }
-    const observer = new IntersectionObserver(handleObserver, options);
+    const observer = new IntersectionObserver(handleObserver, options)
     if (!minimized) {
-      await handleGetMessages();
+      await handleGetMessages()
       // loader observer
-      if (loader.current) {
-        observer.observe(loader.current);
+      if (loader.current) {
         observer.observe(loader.current)
-    }
+      }
     return () => {
-      if (loader.current) {
+    return () => {
-        observer.unobserve(loader.current);
+      if (loader.current) {
-      }
+        observer.unobserve(loader.current)
     };
   }, [minimized]);
+  }, [minimized])
-  // LoadMore on change page
-  useEffect(() => {
+  // LoadMore on change page
-    let loadMore = () => handleLoadMore();
+  useEffect(() => {
-    loadMore()
+    let loadMore = () => handleLoadMore()
-    return () => {
+    loadMore()
-      loadMore = null;
+    return () => {
-    };
+      loadMore = null
   }, [currentPage]);
   }, [currentPage])
   // getMessagesInterval
-  useEffect(() => {
+  // getMessagesInterval
-    if (window.location.pathname === '/group/my-groups') {
+  useEffect(() => {
-      const items = document.getElementsByClassName('sc-jSgupP')
+    if (window.location.pathname === '/group/my-groups') {
-      if (items && items.length > 0)
+      const items = document.getElementsByClassName('sc-jSgupP')
-        items[0].style.display = 'none';
+      if (items && items.length > 0) { items[0].style.display = 'none' }
+    }
-  }, [minimized]);
+  }, [minimized])
   useEffect(() => {
-    let timer;
+    let timer
     if (!minimized && !loading) {
-      timer = setTimeout(() => handleGetMessages(), 1000);
+      timer = setTimeout(() => handleGetMessages(), 1000)
     }
     return () => {
-      clearTimeout(timer);
+      clearTimeout(timer)
-    };
+    }
-  }, [minimized, loading]);
+  }, [minimized, loading])
   const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
   const handleConfirmModalAccept = () => handleConfirmModalAction()
             setResponseMessage={handleResponseMessage}
             responseMessage={responseMessage}
           />
         })}
       </React.Fragment>
-    );
+    )
-  };
+  }
   const optionRender = () => {
     switch (optionTab) {
       case optionTabs.add_person_to_group:
-        return addPersonToGroupTab;
+        return addPersonToGroupTab
       case optionTabs.group_contacts_list:
-        return groupContactsListTab;
+        return groupContactsListTab
       case optionTabs.meet:
-        return meetingOptionsTab;
+        return meetingOptionsTab
       default:
-        return optionsDefaultTab;
+        return optionsDefaultTab
     }
   };
   // useEffect for tabs changing
   useEffect(() => {
     switch (optionTab) {
       case optionTabs.add_person_to_group:
-        loadPersonsAvailable();
+        loadPersonsAvailable()
-        break;
+        break
       case optionTabs.group_contacts_list:
-        loadGroupContacts();
+        loadGroupContacts()
-        break;
+        break
+    }
-  }, [optionTab]);
+  }, [optionTab])
   const loadPersonsAvailable = async () => {
     await axios.get(url_get_contacts_availables_for_group).then((response) => {
-      const resData = response.data;
+      const resData = response.data
       if (resData.success) {
-        setAvailableContactsToAdd(resData.data);
+        setAvailableContactsToAdd(resData.data)
+      }
-    });
+    })
-  };
+  }
   const loadGroupContacts = async () => {
     await axios.get(url_get_contact_group_list).then((response) => {
-      const resData = response.data;
+      const resData = response.data
       if (resData.success) {
-        setGroupContactsList(resData.data);
+        setGroupContactsList(resData.data)
+      }
-    });
+    })
   };
   const handleDeletePersonFromGroup = async (urlDeletePersonFromGroup) => {
     await axios.post(urlDeletePersonFromGroup).then((response) => {
-      const resData = response.data;
+      const resData = response.data
       if (resData.success) {
-        loadGroupContacts();
+        loadGroupContacts()
+      }
-    });
+    })
             </li>
+          }
           {!!url_delete && (
             <li
               className="optionsTab__option"
-              style={{ color: "red" }}
+              style={{ color: 'red' }}
               onClick={() => {
-                handleConfirmModalShow();
+                handleConfirmModalShow()
-                modalActionUrl.current = url_delete;
+                modalActionUrl.current = url_delete
               }}
+            >
               <span className="optionsTab__option__icon">
                 <i className="fa fa-trash"></i>
               </span>
             </li>
           )}
           {!!url_leave && (
             <li
               className="optionsTab__option"
-              style={{ color: "red" }}
+              style={{ color: 'red' }}
               onClick={() => {
-                handleConfirmModalShow();
+                handleConfirmModalShow()
-                modalActionUrl.current = url_leave;
+                modalActionUrl.current = url_leave
               }}
+            >
               <span className="optionsTab__option__icon">
                 <i className="fa fa-user-times"></i>
               </span>
             </li>
           )}
         </ul>
       </div>
     </React.Fragment>
-  );
+  )
   const meetingOptionsTab = (
     <>
       <span className="optionBack" onClick={() => handleShowOptions()}>
             Crear conferencia
           </li>
         </ul>
       </div>
     </>
-  );
+  )
   const addPersonToGroupTab = (
     <React.Fragment>
       <span
         className="optionBack"
         onClick={() => handleChangeTab(optionTabs.default)}
+      >
         <i className="fa icon-arrow-left"></i>
       </span>
       <div className="addPersonToGroupTab">
+        {availableContactsToAdd.length
-        {availableContactsToAdd.length ? (
+          ? (
-          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"
                 />
                 <div className="name">{name}</div>
               </div>
               <span
                 style={{
-                  cursor: "pointer",
+                  cursor: 'pointer'
                 }}
                 onClick={() => {
-                  handleAddPersonToGroup(id);
+                  handleAddPersonToGroup(id)
                 }}
+              >
                 <i className="fa fa-plus-circle"></i>
               </span>
             </div>
+              ))
-          ))
+            )
-        ) : (
+          : (
           <div className="addPersonToGroupTab__person">No hay Contactos</div>
-        )}
+            )}
       </div>
     </React.Fragment>
-  );
+  )
   const groupContactsListTab = (
     <>
       <span className="optionBack" onClick={() => handleChangeTab(optionTabs.default)}>
       <div className="addPersonToGroupTab">
         {filtredGroupList.length
           ? filtredGroupList.map(({ image, name, url_remove_from_group, id }) => {
             return (
               <div className="addPersonToGroupTab__person" key={id}>
-                <div style={{ display: "flex", alignItems: "center" }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
                   <img
                     className="chat-image img-circle pull-left"
                     height="36"
                     width="36"
                     src={image}
           })
           : <div className="addPersonToGroupTab__person">No hay Contactos</div>
+        }
       </div>
     </>
-  );
+  )
   const userChat = (
     <>
       <div className="chatbox active-chat" style={{ display: 'block' }}>
             <small className="unread-msg">2</small>
           </div>
         </div>
         <div className="panel personal-chat">
           <StyledChatHead>
-            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
+            <div className={`panel-heading chatboxhead ${not_seen_messages ? 'notify' : ''}`}>
               <div className="panel-title">
                 <img
                   className="chat-image img-circle pull-left"
                   height="36"
                   width="36"
                 <div className="header-elements">
                   <a href={profile} target="_blank" rel="noreferrer">
                     {name}
                   </a>
                   <br />
-                  <small className={`status ${online ? "Online" : "Offline"}`}>
+                  <small className={`status ${online ? 'Online' : 'Offline'}`}>
-                    <b>{online ? "En línea" : "Desconectado"}</b>
+                    <b>{online ? 'En línea' : 'Desconectado'}</b>
                   </small>
                   <div className="pull-right options">
                     <div className="btn-group uploadFile">
                       {/* <span>
                       <i className="fa fa-trash"></i>
                         />
                       </span>
                     </div>
                     <div className="btn-group">
                       <span>
-                        <i className={`fa fa-minus-circle`} onClick={handleActive} />
+                        <i className={'fa fa-minus-circle'} onClick={handleActive} />
                       </span>
                     </div>
                     <div className="btn-group">
                       <span>
                         <i className="fa fa-times-circle" onClick={handleCloseChat} />
               </div>
             </div>
           </StyledChatHead>
           <div
             className="panel-body"
-            style={{ display: !minimized ? "block" : "none" }}
+            style={{ display: !minimized ? 'block' : 'none' }}
+          >
-            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
+            <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
               {optionRender()}
             </StyledShowOptions>
             <div
               id="uploader_'+chatboxtitle+'"
-              style={{ display: "none", height: "342px" }}
+              style={{ display: 'none', height: '342px' }}
+            >
               <p>
                 Your browser does not have Flash, Silverlight or HTML5 support.
               </p>
             </div>
             <div
               className="chat-conversation"
-              style={{ position: "relative", display: showOptions ? 'none' : 'block' }}
+              style={{ position: 'relative', display: showOptions ? 'none' : 'block' }}
+            >
               <div className="reverseChatBox" ref={conversationListEl}>
                 <ul
                   className="conversation-list chatboxcontent"
                   id="resultchat_'+chatboxtitle+'"
                 </ul>
               </div>
               <div className="wchat-footer wchat-chat-footer">
                 <div id="chatFrom" className="chatFrom">
+                  {
-                    responseMessage
+                    responseMessage &&
-                    &&
-                    <div className={responseMessage ? "resp_messages-container active" : "resp_messages-container"}>
+                    <div className={responseMessage ? 'resp_messages-container active' : 'resp_messages-container'}>
                       <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
                       <p>{responseMessage.m}</p>
                     </div>
+                  }
                   <div className="block-wchat">
                     ></button>
                     <div className="input-container">
                       <div className="input-emoji">
                         <div
                           className="input-placeholder"
-                          style={{ visibility: "hidden", display: "none" }}
+                          style={{ visibility: 'hidden', display: 'none' }}
+                        >
                           Escribe un mensaje
                         </div>
                         <textarea
                           className="input chatboxtextarea"
                           id="chatboxtextarea"
                           name="chattxt"
-                          style={{ resize: "none", height: "20px" }}
+                          style={{ resize: 'none', height: '20px' }}
                           placeholder="Escribe un mensaje"
                           onKeyDown={handleChatBoxKeyDown}
                           ref={textAreaEl}
                           onBlur={() => responseMessage && setResponseMessage(null)}
                           onFocus={() => not_seen_messages && onRead(entity)}
                     </div>
                   </div>
                 </div>
                 <div className="wchat-box-items-overlay-container">
-                  <div className="target-emoji" style={{ display: showEmojiTab ? "block" : "none" }} id={`smileyPanel_${id}`}>
+                  <div className="target-emoji" style={{ display: showEmojiTab ? 'block' : 'none' }} id={`smileyPanel_${id}`}>
                     <Emojione onClickEmoji={handleClickEmoji} />
                   </div>
                 </div>
           handleShowOptions()
           displayConferenceModal()
         }}
       />
     </>
-  );
+  )
   const groupChat = (
     <React.Fragment>
       <div
             <small className="unread-msg">2</small>
           </div>
         </div>
         <div className="panel personal-chat">
           <StyledChatHead>
-            <div className={`panel-heading chatboxhead ${not_seen_messages ? "notify" : ""}`}>
+            <div className={`panel-heading chatboxhead ${not_seen_messages ? 'notify' : ''}`}>
               <div className="panel-title-group">
                 <img
                   className="chat-image img-circle pull-left"
                   height="36"
                   width="36"
                       </span>
                     </div>
                     <div className="btn-group">
                       <span>
                         <i
-                          className={`fa fa-minus-circle`}
+                          className={'fa fa-minus-circle'}
                           onClick={handleActive}
                         ></i>
                       </span>
                     </div>
                     <div className="btn-group">
               </div>
             </div>
           </StyledChatHead>
           <div
             className="panel-body"
-            style={{ display: !minimized ? "block" : "none" }}
+            style={{ display: !minimized ? 'block' : 'none' }}
+          >
-            <StyledShowOptions className={` ${showOptions ? "show" : "hide"}`}>
+            <StyledShowOptions className={` ${showOptions ? 'show' : 'hide'}`}>
               {optionRender()}
             </StyledShowOptions>
             <div
               className="chat-conversation"
               style={{
-                display: showOptions ? "none" : "block",
+                display: showOptions ? 'none' : 'block',
-                position: "relative",
+                position: 'relative'
               }}
+            >
               <div className="reverseChatBox" ref={conversationListEl}>
                 <ul
                     ></button>
                     <div className="input-container">
                       <div className="input-emoji">
                         <div
                           className="input-placeholder"
-                          style={{ visibility: "hidden", display: "none" }}
+                          style={{ visibility: 'hidden', display: 'none' }}
+                        >
                           Escribe un mensaje
                         </div>
                         <textarea
                           className="input chatboxtextarea"
                           id="chatboxtextarea"
                           name="chattxt"
-                          style={{ resize: "none", height: "20px" }}
+                          style={{ resize: 'none', height: '20px' }}
                           placeholder="Escribe un mensaje"
                           onKeyDown={handleChatBoxKeyDown}
                           ref={textAreaEl}
                           onFocus={() => not_seen_messages && onRead(entity)}
                           onBlur={() => responseMessage && setResponseMessage(null)}
                 </div>
                 <div className="wchat-box-items-positioning-container">
                   <div className="wchat-box-items-overlay-container">
                     <div
                       className="target-emoji"
-                      style={{ display: showEmojiTab ? "block" : "none" }}
+                      style={{ display: showEmojiTab ? 'block' : 'none' }}
+                    >
                       <div id={`smileyPanel_${id}`}>
                         <div>
                           <Emojione onClickEmoji={handleClickEmoji} />
                         </div>
         show={shareFileModalShow}
         onHide={() => setShareFileModalShow(false)}
         urlUpload={url_upload}
       />
     </React.Fragment>
-  );
+  )
   switch (type) {
-    case "user":
+    case 'user':
-      return userChat;
+      return userChat
-    case "group":
+    case 'group':
-      return groupChat;
+      return groupChat
     default:
-      break;
+      break
   }
 };
 const StyleModal = ({
   title = 'Crea una conferencia',
   size = 'md',
   show = false,
-  children
-}) => {
+  children
 }) => {
   const [isShow, setIsShow] = useState(show)
   return (
     <Modal
       show={isShow}
       onHide={closeModal}
-      style={{ overflowY: "scroll" }}
+      style={{ overflowY: 'scroll' }}
+    >
       <Modal.Header closeButton>
         <Modal.Title>{title}</Modal.Title>
       </Modal.Header>
   show = false,
   timezones = {},
   zoomUrl = '',
   onCreate = () => null
 }) => {
   const dt = new Date()
   const { handleSubmit, register, errors, reset } = useForm({ mode: 'all' })
   const [date, setDate] = useState({
-    year: dt.toLocaleString("default", { year: "numeric" }),
+    year: dt.toLocaleString('default', { year: 'numeric' }),
-    month: dt.toLocaleString("default", { month: "2-digit" }),
+    month: dt.toLocaleString('default', { month: '2-digit' }),
-    day: dt.toLocaleString("default", { day: "2-digit" })
+    day: dt.toLocaleString('default', { day: '2-digit' })
   })
-  const [time, setTime] = useState(dt.toLocaleString("es", { hour: 'numeric', minute: '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) => {
     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),
+      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value)
     })
     setTime(new Intl.DateTimeFormat('es', { hour: 'numeric', minute: '2-digit', second: 'numeric' }).format(value))
           <input
             type="text"
             name="title"
             className="form-control"
             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>}
         </div>
         <div className="form-group">
           <label htmlFor="first_name">Descripción</label>
           <input
             type="text"
             name="description"
             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>}
         </div>
         <div className="form-group">
           <label htmlFor="timezone">Tipo de conferencia</label>
         <div className="form-group">
           <label htmlFor="timezone">Zona horaria</label>
           <select
             className="form-control"
             name="timezone"
-            ref={register({ required: "Por favor elige una Zona horaria" })}
+            ref={register({ required: 'Por favor elige una Zona horaria' })}
+          >
             <option value="" hidden>
               Zona horaria
             </option>
             {Object.entries(timezones).map(([key, value]) => (
           <input
             type="password"
             name="password"
             className="form-control"
             ref={register({
-              required: "Por favor ingrese una contraseña",
+              required: 'Por favor ingrese una contraseña',
-              maxLength: { value: 6, message: "La contraseña debe tener al menos 6 digitos" }
+              maxLength: { value: 6, message: 'La contraseña debe tener al menos 6 digitos' }
             })}
           />
           {errors.password && <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>}
         </div>
         <button className="btn btn-primary" type="submit">
       </form>
     </StyleModal >
+  )
+}
 export default React.memo(PersonalChat);
+export default React.memo(PersonalChat)

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/chat/chat/personal-chat/PersonalChat.js – Rev 5058 → 5195