Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 730 Rev 747
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
Línea 2... Línea 2...
2 
 
 2 
 
3 
export default ({messages, selectedConversation, onSend, backendVars, getMoreMessages}) => {
 3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages }) => {
4 
    const [text, setText] = React.useState('')
 4 
    const [text, setText] = React.useState('')
5 
    const handleScroll = (event) => {
 5 
    const handleScroll = (event) => {
6 
        const node = event.target;
 6 
        const node = event.target;
7 
        if(node.clientHeight >= (node.scrollHeight * .62)){
 7 
        if (node.clientHeight >= (node.scrollHeight * .62)) {
8 
            getMoreMessages()
 8 
            getMoreMessages()
9 
        }
 9 
        }
10 
    }
 10 
    }
11 
    const paneDidMount = (node) => {
 11 
    const paneDidMount = (node) => {
12 
        if(node) {
12 
        if (node) {
13 
            node.addEventListener("scroll", handleScroll.bind(this));
13 
            node.addEventListener("scroll", handleScroll.bind(this));
14 
        }
 14 
        }
- 
 
 15 
    }
15 
    }
 16 
    console.log(messages)
16 
    return(
 17 
    return (
17 
        <React.Fragment>
 18 
        <React.Fragment>
18 
            <div className="main-conversation-box">
 19 
            <div className="main-conversation-box">
19 
                {
 20 
                {
20 
                    !selectedConversation
 21 
                    !selectedConversation
21 
                    ?
 22 
                        ?
22 
                            <div className="message-bar-head">
 23 
                        <div className="message-bar-head">
23 
                                <div className="usr-mg-info">
 24 
                            <div className="usr-mg-info">
24 
                                    <h3>No hay mensajes</h3>
 - 
 
25 
                                </div>
 25 
                                <h3>No hay mensajes</h3>
- 
 
 26 
                            </div>
26 
                            </div>
 27 
                        </div>
27 
                    :
 28 
                        :
28 
                        <React.Fragment>
 29 
                        <React.Fragment>
29 
                            <div
 30 
                            <div
30 
                                className="message-bar-head"
 31 
                                className="message-bar-head"
31 
                                style={{
 32 
                                style={{
Línea 61... Línea 62...
61 
                            >
 62 
                            >
62 
                                {
 63 
                                {
63 
                                    (messages && !!messages.length) && (
 64 
                                    (messages && !!messages.length) && (
64 
                                        messages.map((element, i) => {
 65 
                                        messages.map((element, i) => {
65 
                                            const isLeft = element.side === 'left'
 66 
                                            const isLeft = element.side === 'left'
66 
                                            return(
 67 
                                            return (
67 
                                                <div
 68 
                                                <div
68 
                                                    className={"main-message-box "+(isLeft ? 'st3' : 'ta-right') }
 69 
                                                    className={"main-message-box " + (isLeft ? 'st3' : 'ta-right')}
69 
                                                    key={element.message}
 70 
                                                    key={element.message}
70 
                                                >
 71 
                                                >
71 
                                                    {
 72 
                                                    {
72 
                                                        isLeft && (
 73 
                                                        isLeft && (
73 
                                                            <div className="messg-usr-img">
 74 
                                                            <div className="messg-usr-img">
Línea 79... Línea 80...
79 
                                                                />
 80 
                                                                />
80 
                                                            </div>
 81 
                                                            </div>
81 
                                                        )
 82 
                                                        )
82 
                                                    }
 83 
                                                    }
83 
                                                    <div
 84 
                                                    <div
84 
                                                        className="message-dt"
85 
                                                        className="message-dt"
85 
                                                        style={
 86 
                                                        style={
86 
                                                            {
 87 
                                                            {
87 
                                                                 padding: 0,
 88 
                                                                padding: 0,
88 
                                                                //  display: 'flex',
 89 
                                                                //  display: 'flex',
89 
                                                                 justifyContent: isLeft ? 'flex-start' : 'flex-end',
 90 
                                                                justifyContent: isLeft ? 'flex-start' : 'flex-end',
90 
                                                                 width: '85%',
 91 
                                                                width: '85%',
91 
                                                                 paddingLeft: isLeft ? '13%' : '40%',
 92 
                                                                paddingLeft: isLeft ? '13%' : '40%',
92 
                                                                 paddingRight: isLeft ? '40%': 0
 93 
                                                                paddingRight: isLeft ? '40%' : 0
93 
                                                             }
 94 
                                                            }
94 
                                                         }
 95 
                                                        }
95 
                                                    >
 96 
                                                    >
96 
                                                        <div
 97 
                                                        <div
97 
                                                            className="message-inner-dt"
 98 
                                                            className="message-inner-dt"
98
99 
 
99 
                                                        >
 100 
                                                        >
100 
                                                            <p className='w-100'>{element.message}</p>
 101 
                                                            <p className='w-100'>{element.message}</p>
101 
                                                        </div>
 102 
                                                        </div>
102 
                                                        <span>{element.date}</span>
 103 
                                                        <span>{element.date}</span>
103 
                                                    </div>
 104 
                                                    </div>
104 
                                                    {
 105 
                                                    {
105 
                                                        !isLeft  && (
 106 
                                                        !isLeft && (
106 
                                                            <div className="messg-usr-img">
 107 
                                                            <div className="messg-usr-img">
107 
                                                                <img
 108 
                                                                <img
108 
                                                                    src={element.sender_image}
 109 
                                                                    src={element.sender_image}
109 
                                                                    onClick={() => window.location.href = element.sender_profile}
 110 
                                                                    onClick={() => window.location.href = element.sender_profile}
110 
                                                                    className="cursor-pointer"
 111 
                                                                    className="cursor-pointer"