Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4376 | Rev 5187 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4376 Rev 5185
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef } from 'react';
 2 
import React, { useEffect, useRef } from 'react'
3 
import EmptySection from '../../shared/empty-section/EmptySection';
 3 
import EmptySection from '../../shared/empty-section/EmptySection'
4 
import MessageBox from './MessageBox';
 4 
import MessageBox from './MessageBox'
5 
import MessageTemplate from './MessageTemplate';
 5 
import MessageTemplate from './MessageTemplate'
- 
 
 6 
import SpeakerNotesOffRoundedIcon from '@mui/icons-material/SpeakerNotesOffRounded'
- 
 
 7 
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded'
Línea 6... Línea 8...
6 
 
 8 
 
7 
const Chatmail = ({
 9 
const Chatmail = ({
8 
    selectedConversation = null,
 10 
  selectedConversation = null,
9 
    messages = [],
 - 
 
10 
    backendVars = {},
 11 
  messages = [],
11 
    setConversation = () => { },
 12 
  setConversation = () => { },
12 
    getMoreMessages = () => { },
 13 
  getMoreMessages = () => { },
13 
    onSend = () => { },
 14 
  onSend = () => { },
14 
    setMsgs = () => { },
 15 
  setMsgs = () => { }
- 
 
 16 
}) => {
Línea -... Línea 17...
- 
 
 17 
  const lastMessage = useRef(null)
- 
 
 18 
 
- 
 
 19 
  useEffect(() => {
15 
}) => {
 20 
    const observer = new IntersectionObserver(([entry]) => {
- 
 
 21 
      if (entry.isIntersecting) {
- 
 
 22 
        getMoreMessages()
Línea 16... Línea -...
16 
 
 - 
 
17 
    const lastMessage = useRef(null);
 - 
 
18 
 
 - 
 
19 
    useEffect(() => {
 - 
 
20 
        const observer = new IntersectionObserver(([entry]) => {
 - 
 
21 
            if (entry.isIntersecting) {
 - 
 
22 
                getMoreMessages()
 - 
 
23 
            }
 23 
      }
24 
        })
 24 
    })
25 
 
 - 
 
26 
        if (lastMessage.current) {
 - 
 
27 
            observer.observe(lastMessage.current)
 - 
 
28 
        }
 - 
 
29 
    }, [messages]);
 - 
 
30 
 
 - 
 
31 
    if (!selectedConversation) {
 - 
 
32 
        return (
 - 
 
33 
            <EmptySection
 - 
 
34 
                Icon={<i className='fas fa-comments icon' />}
 - 
 
35 
                message='No hay mensajes'
 25 
 
- 
 
 26 
    if (lastMessage.current) {
Línea -... Línea 27...
- 
 
 27 
      observer.observe(lastMessage.current)
- 
 
 28 
    }
- 
 
 29 
  }, [messages])
- 
 
 30 
 
36 
            />
 31 
  if (!selectedConversation) {
37 
        )
 32 
    return <EmptySection message={LABELS.SELECT_CONVERSATION} Icon={QuestionAnswerRoundedIcon} />
38 
    }
 33 
  }
39 
 
 34 
 
40 
    return (
 - 
 
41 
        <div className='chat'>
 - 
 
42 
            <div className='icon-hide' onClick={() => setConversation(null)}>
 35 
  return (
43 
                <i className="fas fa-angle-left" />
 36 
    <div className='chat'>
44 
                <span>
 37 
      <div className='icon-hide' onClick={() => setConversation(null)}>
45 
                    Volver
 - 
 
46 
                </span>
 38 
        <i className="fas fa-angle-left" />
47 
            </div>
 - 
 
48 
            <a href={selectedConversation.profile}>
 39 
        <span>{LABELS.RETURN}</span>
49 
                <h2 className='chat-header'>
 40 
      </div>
50 
                    {selectedConversation.name}
 41 
      <a href={selectedConversation.profile}>
51 
                </h2>
 42 
        <h2 className='chat-header'>{selectedConversation.name}</h2>
52 
            </a>
 - 
 
53 
            <div className="messages-line">
 43 
      </a>
54 
                {messages.length
 44 
      <div className="messages-line">
55 
                    ? messages.map((element, index) => {
 45 
        {messages.length
56 
                        return (
 46 
          ? messages.map((element, index) =>
57 
                            <MessageTemplate
 - 
 
58 
                                key={index}
 - 
 
59 
                                message={element}
 47 
            <MessageTemplate
60 
                                date={element.date}
 - 
 
61 
                            />
 - 
 
62 
                        )
 - 
 
63 
                    })
 - 
 
64 
                    :
 48 
              key={index}
65 
                    <div className='message-select-conversation'>
 - 
 
66 
                        <div className='msgs-select-container'>
 - 
 
67 
                            <i className='fas fa-inbox icon' />
 49 
              message={element}
68 
                            <h3>No hay mensajes en esta conversación</h3>
 50 
              date={element.date}
69 
                        </div>
 51 
            />)
70 
                    </div>
 52 
          : <EmptySection message={LABELS.NO_MESSAGE_CONVERSATION} Icon={SpeakerNotesOffRoundedIcon} />
71 
                }
 53 
        }
72 
                <hr ref={lastMessage} style={{ visibility: 'hidden' }} />
 54 
        <hr ref={lastMessage} style={{ visibility: 'hidden' }} />
73 
            </div>
 - 
 
74 
            <MessageBox
 55 
      </div>
75 
                setMsgs={setMsgs}
 56 
      <MessageBox
76 
                onSend={onSend}
 57 
        setMsgs={setMsgs}
77 
                backendVars={backendVars}
 58 
        onSend={onSend}
78 
                sendLink={selectedConversation.send_link}
 59 
        sendLink={selectedConversation.send_link}
Línea 79... Línea -...
79 
            />
 - 
 
80 
        </div >
 60 
      />
- 
 
 61 
    </div>