Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 1731 Rev 1734
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';
Línea 2... Línea 3...
2 
 
 3 
 
Línea 3... Línea 4...
3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
 4 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages, handleShowConversation }) => {
4 
 
 5 
 
Línea 35... Línea 36...
35 
                                </h3>
 36 
                                </h3>
36 
                            </div>
 37 
                            </div>
37 
                        </div>
 38 
                        </div>
38 
                        :
 39 
                        :
39 
                        <React.Fragment>
 40 
                        <React.Fragment>
40 
                            <div
 - 
 
41 
                                className="message-bar-head"
 41 
                            <div className="message-bar-head">
42 
                            >
 - 
 
43 
                                <div className="usr-msg-details">
 42 
                                <div className="usr-msg-details">
44 
                                    <i
 43 
                                    <i
45 
                                        className="fas fa-angle-left icon msgs-hide"
 44 
                                        className="fas fa-angle-left icon msgs-hide"
46 
                                        onClick={() => handleShowConversation(false)}
 45 
                                        onClick={() => handleShowConversation(false)}
47 
                                    ></i>
 46 
                                    ></i>
Línea 72... Línea 71...
72 
                                className="messages-line"
 71 
                                className="messages-line"
73 
                                ref={messagesLine}
 72 
                                ref={messagesLine}
74 
                            >
 73 
                            >
75 
                                {
 74 
                                {
76 
                                    messages.length
 75 
                                    messages.length
77 
                                    &&
 76 
                                        ?
78 
                                    messages.map((element) => {
 77 
                                        messages.map((element) => {
79 
                                        const isLeft = element.side === 'left'
 78 
                                            const isLeft = element.side === 'left'
- 
 
 79 
 
80 
                                        return (
 80 
                                            return (
81 
                                            <div
 - 
 
82 
                                                className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
 - 
 
83 
                                                key={element.message}
 - 
 
84 
                                            >
 - 
 
85 
                                                <div className="messg-usr-img">
 - 
 
86 
                                                    <img
 - 
 
87 
                                                        src={element.sender_image}
 - 
 
88 
                                                        onClick={() => window.location.href = element.sender_profile}
 - 
 
89 
                                                        className="cursor-pointer"
 - 
 
90 
                                                        alt={element.sender_name}
 - 
 
91 
                                                    />
 - 
 
92 
                                                </div>
 - 
 
93 
                                                <div
 81 
                                                <div
- 
 
 82 
                                                    className={`main-message-box ${!isLeft ? 'ta-right' : ''}`}
94 
                                                    className="message-dt"
 83 
                                                    key={element.message}
95 
                                                >
 84 
                                                >
- 
 
 85 
                                                    <div className="messg-usr-img">
- 
 
 86 
                                                        <a href={element.sender_profile}>
- 
 
 87 
                                                            <img
- 
 
 88 
                                                                src={element.sender_image}
- 
 
 89 
                                                                className="cursor-pointer"
- 
 
 90 
                                                                alt={element.sender_name}
- 
 
 91 
                                                            />
- 
 
 92 
                                                        </a>
96 
                                                    <div
 93 
                                                    </div>
- 
 
 94 
                                                    <div className="message-dt">
97 
                                                        className="message-inner-dt"
 95 
                                                        <div className="message-inner-dt">
98 
 
 - 
 
- 
 
 96 
                                                            <p className='w-100'>{element.message}</p>
99 
                                                    >
 97 
                                                        </div>
100 
                                                        <p className='w-100'>{element.message}</p>
 98 
                                                        <span>{element.date}</span>
101 
                                                    </div>
 99 
                                                    </div>
102 
                                                    <span>{element.date}</span>
 - 
 
103 
                                                </div>
 100 
                                                </div>
104 
                                            </div>
 101 
                                            )
105 
                                        )
 102 
                                        })
106 
                                    })
 103 
                                        :
- 
 
 104 
                                        <div style={{ display: 'grid', placeItems: 'center' }}>
- 
 
 105 
                                            <h2>No hay mensajes en esta conversación</h2>
- 
 
 106 
                                        </div>
107 
                                }
 107 
                                }
108 
                                <hr ref={lastMessage} />
 108 
                                <hr ref={lastMessage} />
109 
                            </div>
 109 
                            </div>
110 
                            <div className="message-send-area">
 110 
                            <div className="message-send-area">
111 
                                <form id="form-send-message" name="form-send-message"
 111 
                                <form id="form-send-message" name="form-send-message"
Línea 120... Línea 120...
120 
                                            type="text"
 120 
                                            type="text"
121 
                                            name="message"
 121 
                                            name="message"
122 
                                            id="message"
 122 
                                            id="message"
123 
                                            value={text}
 123 
                                            value={text}
124 
                                            placeholder={backendVars.labelWriteMessage}
 124 
                                            placeholder={backendVars.labelWriteMessage}
125 
                                            onChange={e => {
 - 
 
126 
                                                setText(e.target.value || '')
 125 
                                            onChange={e => setText(e.target.value || '')}
127 
                                            }}
 - 
 
128 
                                        />
 126 
                                        />
129 
 
 - 
 
130 
                                        <button type="submit" className="btn-primary p-1">
 127 
                                        <button type="submit" className="btn-primary p-1">
131 
                                            <i class="fas fa-paper-plane"></i>
 128 
                                            <i class="fas fa-paper-plane"></i>
132 
                                            {backendVars.labelSend}
 129 
                                            {backendVars.labelSend}
133 
                                        </button>
 130 
                                        </button>
134 
                                    </div>
 131 
                                    </div>