Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 1740 Rev 1741
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react';
 1 
import React, { useEffect, useRef, useState } from 'react';
2 
import { Spinner } from 'react-bootstrap';
 2 
import { Spinner } from 'react-bootstrap';
Línea -... Línea 3...
- 
 
 3 
 
- 
 
 4 
export default ({
- 
 
 5 
    messages,
- 
 
 6 
    selectedConversation,
- 
 
 7 
    onSend,
- 
 
 8 
    backendVars,
3 
 
 9 
    getMoreMessages,
- 
 
 10 
    handleShowConversation,
- 
 
 11 
    loading
Línea 4... Línea 12...
4 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
 12 
}) => {
5 
 
 13 
 
6 
    const [text, setText] = useState('')
 14 
    const [text, setText] = useState('')
7 
    const [showOptions, setShowOptions] = useState(false)
 15 
    const [showOptions, setShowOptions] = useState(false)
Línea 70... Línea 78...
70 
                            <div
 78 
                            <div
71 
                                className="messages-line"
 79 
                                className="messages-line"
72 
                                ref={messagesLine}
 80 
                                ref={messagesLine}
73 
                            >
 81 
                            >
74 
                                {
 82 
                                {
75 
                                    messages.length
 83 
                                    loading
76 
                                        ?
 84 
                                        ?
- 
 
 85 
                                        <Spinner />
- 
 
 86 
                                        :
- 
 
 87 
                                        (messages.length
- 
 
 88 
                                            ?
77 
                                        messages.map((element) => {
 89 
                                            [...messages].map((element) => {
78 
                                            const isLeft = element.side === 'left'
 90 
                                                const isLeft = element.side === 'left'
79 
 
 91 
 
80 
                                            return (
 92 
                                                return (
81 
                                                <div
 93 
                                                    <div
82 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 94 
                                                        className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
83 
                                                    key={element.message}
 95 
                                                        key={element.message}
84 
                                                >
 96 
                                                    >
85 
                                                    <div className="messg-usr-img">
 97 
                                                        <div className="messg-usr-img">
86 
                                                        <a href={element.sender_profile}>
 98 
                                                            <a href={element.sender_profile}>
87 
                                                            <img
 99 
                                                                <img
88 
                                                                src={element.sender_image}
 100 
                                                                    src={element.sender_image}
89 
                                                                className="cursor-pointer"
 101 
                                                                    className="cursor-pointer"
90 
                                                                alt={element.sender_name}
 102 
                                                                    alt={element.sender_name}
91 
                                                            />
 103 
                                                                />
92 
                                                        </a>
 104 
                                                            </a>
93 
                                                    </div>
 105 
                                                        </div>
94 
                                                    <div className="message-dt">
 106 
                                                        <div className="message-dt">
95 
                                                        <div className="message-inner-dt">
 107 
                                                            <div className="message-inner-dt">
96 
                                                            <p className='w-100'>{element.message}</p>
 108 
                                                                <p className='w-100'>{element.message}</p>
- 
 
 109 
                                                            </div>
- 
 
 110 
                                                            <span>{element.date}</span>
97 
                                                        </div>
 111 
                                                        </div>
98 
                                                        <span>{element.date}</span>
 - 
 
99 
                                                    </div>
 112 
                                                    </div>
100 
                                                </div>
 113 
                                                )
101 
                                            )
 114 
                                            })
102 
                                        })
 - 
 
103 
                                        :
 115 
                                            :
104 
                                        <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
 116 
                                            <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
105 
                                            <h2>No hay mensajes en esta conversación</h2>
 117 
                                                <h2>No hay mensajes en esta conversación</h2>
106 
                                        </div>
 118 
                                            </div>)
107 
                                }
 119 
                                }
108 
                                <hr ref={lastMessage} />
 120 
                                <hr ref={lastMessage} />
109 
                            </div>
 121 
                            </div>
110 
                            <div className="message-send-area">
 122 
                            <div className="message-send-area">
111 
                                <form id="form-send-message" name="form-send-message"
 123 
                                <form id="form-send-message" name="form-send-message"