Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5028 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5028 Rev 5033
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React from "react";
3 
import { useState, useEffect } from "react";
 3 
import { useState, useEffect } from "react";
4 
import { axios } from "../../utils";
 4 
import { axios } from "../../utils";
5 
import Contacts from "./contacts/Contacts";
 - 
 
6 
import NotificationAlert from "../../shared/notification/NotificationAlert";
 - 
 
7 
import Groups from "./groups/Groups";
 - 
 
8 
import PersonalChat from "./personal-chat/PersonalChat";
 - 
 
9 
import { FiMaximize2 } from 'react-icons/fi'
 5 
import { FiMaximize2 } from 'react-icons/fi'
10 
import { addNotification } from "../../redux/notification/notification.actions";
 - 
 
11 
import { useDispatch } from "react-redux";
 - 
 
12 
import { Modal } from "react-bootstrap";
 - 
 
13 
import Spinner from "../../shared/loading-spinner/Spinner";
 - 
 
14 
import SendIcon from '@mui/icons-material/Send'
 - 
 
15 
import AddIcon from '@mui/icons-material/Add'
 6 
import AddIcon from '@mui/icons-material/Add'
Línea -... Línea 7...
- 
 
 7 
 
- 
 
 8 
// Components
- 
 
 9 
import NotificationAlert from "../../shared/notification/NotificationAlert";
- 
 
 10 
import PersonalChat from "./personal-chat/PersonalChat";
- 
 
 11 
import ContactsModal from "./components/ContactsModal";
- 
 
 12 
import ContactsList from "./components/ContactsList";
16 
 
 13 
 
Línea 17... Línea 14...
17 
const notifyAudio = new Audio("/audio/chat.mp3");
 14 
const notifyAudio = new Audio("/audio/chat.mp3");
- 
 
 15 
 
- 
 
 16 
const Chat = (props) => {
18 
 
 17 
  const { defaultNetwork } = props
19 
const Chat = (props) => {
 18 
 
20 
  // states
 19 
  // states
21 
  const [contacts, setContacts] = useState([]);
 20 
  const [contacts, setContacts] = useState([]);
- 
 
 21 
  const [groups, setGroups] = useState([]);
22 
  const [groups, setGroups] = useState([]);
 22 
  const [activeChats, setActiveChats] = useState([]);
23 
  const [activeChats, setActiveChats] = useState([]);
 23 
 
24 
  const [isChatOpen, setIsChatOpen] = useState(false);
 24 
  const [isChatOpen, setIsChatOpen] = useState(false);
- 
 
 25 
  const [isMuted, setIsMuted] = useState(false);
- 
 
 26 
  const [showModal, setShowModal] = useState(false);
25 
  const [isMuted, setIsMuted] = useState(false);
 27 
  const [loading, setLoading] = useState(false);
26 
  const [showModal, setShowModal] = useState(false);
 28 
 
27 
  const [activeTab, setActiveTab] = useState("user");
 - 
 
28 
  const [search, setSearch] = useState('');
 29 
  const [activeTab, setActiveTab] = useState("user");
Línea 29... Línea -...
29 
  const [loading, setLoading] = useState(false);
 - 
 
Línea 30... Línea 30...
30 
  const [pendingConversation, setPendingConversation] = useState('')
 30 
  const [search, setSearch] = useState('');
31 
 
 31 
  const [pendingConversation, setPendingConversation] = useState('')
Línea -... Línea 32...
- 
 
 32 
 
32 
  const { defaultNetwork } = props
 33 
 
33 
 
 34 
  const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
34 
  const filtredContacts = contacts.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
 35 
  const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
35 
  const filtredGroups = groups.filter(({ name }) => name.toLowerCase().includes(search.toLowerCase()))
 36 
 
36 
 
 37 
 
Línea 201... Línea 202...
201 
    emojione.sprites = false;
 202 
    emojione.sprites = false;
202 
    emojione.ascii = true;
 203 
    emojione.ascii = true;
203 
    emojione.imagePathPNG = props.emojiOnePath;
 204 
    emojione.imagePathPNG = props.emojiOnePath;
204 
  }, []);
 205 
  }, []);
Línea 205... Línea 206...
205 
 
 206 
 
- 
 
 207 
  if (window.innerWidth < 1000 || window.location.pathname === '/chat') return null
- 
 
 208 
 
206 
  return (window.innerWidth > 1000 && window.location.pathname !== '/chat') && (
 209 
  return (
207 
    <>
 210 
    <>
208 
      <div className="subpanel">
 211 
      <div className="chat-helper">
209 
        <div className="subpanel_title" onClick={(e) => (e.currentTarget === e.target) && setIsChatOpen(!isChatOpen)}>
 212 
        <div className="subpanel_title" onClick={(e) => (e.currentTarget === e.target) && setIsChatOpen(!isChatOpen)}>
210 
          <a href="/chat" className="text-chat-title">
 213 
          <a href="/chat" className="text-chat-title">
211 
            Chat
 214 
            Chat
212 
            <FiMaximize2 className="ml-3" />
 215 
            <FiMaximize2 className="ml-3" />
Línea 253... Línea 256...
253 
            </button>
 256 
            </button>
254 
            <button className={activeTab === 'group' && 'active'} onClick={() => handleChangeTab("group")}>
 257 
            <button className={activeTab === 'group' && 'active'} onClick={() => handleChangeTab("group")}>
255 
              Grupos
 258 
              Grupos
256 
            </button>
 259 
            </button>
257 
          </div>
 260 
          </div>
- 
 
 261 
          <ContactsList
258 
          <div className="contact-list chatboxcontent">
 262 
            contacts={filtredContacts}
- 
 
 263 
            groups={filtredGroups}
259 
            {activeTab === "user" && <Contacts contacts={filtredContacts} onOpenConversation={handleOpenConversation} />}
 264 
            activeTab={activeChats}
260 
            {activeTab === "group" && <Groups groups={filtredGroups} onOpenConversation={handleOpenConversation} />}
 265 
            selectConversation={handleOpenConversation}
261 
          </div>
 266 
          />
262 
        </div>
 267 
        </div>
263 
      </div>
 268 
      </div>
264 
      <div className="active_chats-list">
 269 
      <div className="active_chats-list">
265 
        {activeChats.map((entity, index) => (
 270 
        {activeChats.map((entity, index) => (
266 
          <PersonalChat
 271 
          <PersonalChat
Línea 274... Línea 279...
274 
            onRead={handleReadConversation}
 279 
            onRead={handleReadConversation}
275 
            timezones={props.timezones}
 280 
            timezones={props.timezones}
276 
          />
 281 
          />
277 
        ))}
 282 
        ))}
278 
      </div>
 283 
      </div>
279 
      <Chat.ContactsModal
 284 
      <ContactsModal
280 
        show={showModal}
 285 
        show={showModal}
281 
        setConversation={(url) => setPendingConversation(url)}
 286 
        setConversation={(url) => setPendingConversation(url)}
282 
      />
 287 
      />
283 
      <NotificationAlert />
 288 
      <NotificationAlert />
284 
    </>
 289 
    </>
285 
  )
 290 
  )
286 
}
 291 
}
Línea 287... Línea -...
287 
 
 - 
 
288 
const ContactsModal = ({ show, setConversation }) => {
 - 
 
289 
  let axiosThrottle = null
 - 
 
290 
  const [isShow, setIsShow] = useState(show)
 - 
 
291 
  const [searchResult, setSearchResult] = useState({})
 - 
 
292 
  const [loading, setLoading] = useState(false)
 - 
 
293 
  const dispatch = useDispatch()
 - 
 
294 
 
 - 
 
295 
  const closeModal = () => {
 - 
 
296 
    setIsShow(false)
 - 
 
297 
    setSearchResult({})
 - 
 
298 
  }
 - 
 
299 
 
 - 
 
300 
  const handleSearch = (contact) => {
 - 
 
301 
    clearTimeout(axiosThrottle)
 - 
 
302 
    axiosThrottle = setTimeout(() => {
 - 
 
303 
      fetchContacts(contact)
 - 
 
304 
    }, 500);
 - 
 
305 
  };
 - 
 
306 
 
 - 
 
307 
  const fetchContacts = async (searchParam = '') => {
 - 
 
308 
    setLoading(true)
 - 
 
309 
    await axios
 - 
 
310 
      .get(`/chat/users?search=${searchParam.toLowerCase()}`)
 - 
 
311 
      .then(({ data: response }) => {
 - 
 
312 
        if (!response.success) return dispatch(addNotification({ style: 'danger', msg: 'Ha ocurrido un error' }))
 - 
 
313 
        setSearchResult(response.data)
 - 
 
314 
      })
 - 
 
315 
      .finally(() => setLoading(false))
 - 
 
316 
  }
 - 
 
317 
 
 - 
 
318 
  const startConversation = async (send_url = '', name = '') => {
 - 
 
319 
    const formData = new FormData()
 - 
 
320 
    const fullName = name.split(' ')
 - 
 
321 
    formData.append("message", `Hola, ${fullName[0]}`)
 - 
 
322 
 
 - 
 
323 
    setLoading(true)
 - 
 
324 
    await axios
 - 
 
325 
      .post(send_url, formData)
 - 
 
326 
      .then(({ data: response }) => {
 - 
 
327 
        if (response.success) {
 - 
 
328 
          setConversation(send_url)
 - 
 
329 
          closeModal()
 - 
 
330 
        }
 - 
 
331 
      })
 - 
 
332 
      .finally(() => setLoading(false))
 - 
 
333 
  }
 - 
 
334 
 
 - 
 
335 
  useEffect(() => {
 - 
 
336 
    setIsShow(show)
 - 
 
337 
  }, [show])
 - 
 
338 
 
 - 
 
339 
  return (
 - 
 
340 
    <Modal show={isShow} onHide={closeModal}>
 - 
 
341 
      <Modal.Header closeButton>
 - 
 
342 
        <h3 className="card-title font-weight-bold">Iniciar conversación</h3>
 - 
 
343 
      </Modal.Header>
 - 
 
344 
      <div className="form-group">
 - 
 
345 
        <label htmlFor="search-people">Escribe el nombre</label>
 - 
 
346 
        <input type="text" className="form-control" placeholder="Escribe el nombre de la persona" onChange={(e) => handleSearch(e.target.value)} />
 - 
 
347 
      </div>
 - 
 
348 
      <div className='container'>
 - 
 
349 
        {loading
 - 
 
350 
          ? <Spinner />
 - 
 
351 
          : Object.entries(searchResult).map(([key, value]) => {
 - 
 
352 
            return (
 - 
 
353 
              <div className='row' key={key}>
 - 
 
354 
                <div className='col-8'>
 - 
 
355 
                  <p>{value}</p>
 - 
 
356 
                </div>
 - 
 
357 
                <div className='col-4'>
 - 
 
358 
                  <button className='btn btn-primary' onClick={() => startConversation(key, value)}>
 - 
 
359 
                    <SendIcon />
 - 
 
360 
                  </button>
 - 
 
361 
                </div>
 - 
 
362 
              </div>
 - 
 
363 
            )
 - 
 
364 
          })}
 - 
 
365 
      </div>
 - 
 
366 
    </Modal >
 - 
 
367 
  )
 - 
 
368 
}
 - 
 
369 
 
 - 
 
370 
Chat.ContactsModal = ContactsModal
 - 
 
371 
 
 292