Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4349 Rev 4354
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from 'react'
 2 
import React, { useEffect, useState } from 'react'
3 
import { axios } from '../utils'
 3 
import { axios } from '../utils'
4 
import { Modal } from 'react-bootstrap'
 - 
 
5 
import ChatMail from "./inmail/inmail"
 4 
import ChatMail from "./inmail/inmail"
6 
import Sidebar from './inmail/sidebar'
 5 
import Sidebar from './inmail/sidebar'
Línea 7... Línea 6...
7 
 
 6 
 
Línea 8... Línea 7...
8 
let path_id = window.location.pathname.split('/inmail/')[1]
 7 
const defaultPages = { current: 1, last: 1 }
9 
 
 - 
 
10 
const Inmail = props => {
 - 
 
11 
    const defaultPages = { current: 1, last: 1 }
 - 
 
12 
    const [conversations, setConversations] = useState([])
 - 
 
13 
    const [showConversations, setShowConversations] = useState(false)
 - 
 
- 
 
 8 
 
14 
    const [selectedConversation, setSelectedConversation] = useState(null)
 9 
const Inmail = props => {
- 
 
 10 
 
- 
 
 11 
    const [messages, setMessages] = useState([])
15 
    const [page, setPage] = useState(defaultPages)
 12 
    const [page, setPage] = useState(defaultPages)
16 
    const [messages, setMessages] = useState([])
 - 
 
17 
    const [isGettingMessages, setIsGettingMessages] = useState(false)
 - 
 
18 
    const [visible, setVisible] = useState(false)
 - 
 
19 
    const [searchActive, setSearchActive] = useState(false)
 - 
 
20 
    const [inmailPersons, setInmailPersons] = useState([])
 - 
 
21 
    const [search, setSearch] = useState('')
 - 
 
22 
 
 - 
 
23 
    const load = async () => {
 - 
 
24 
        try {
 - 
 
25 
            const res = await axios.get(window.location.href)
 - 
 
26 
            if (res.data.success) {
 - 
 
27 
                setConversations(res.data.data)
 - 
 
28 
            }
 - 
 
29 
        } catch (error) {
 - 
 
30 
            console.log('>>: error > ', error)
 - 
 
Línea 31... Línea 13...
31 
        }
 13 
    const [selectedConversation, setSelectedConversation] = useState(null)
32 
    }
 14 
    const [isGettingMessages, setIsGettingMessages] = useState(false)
33 
 
 15 
 
34 
    const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {
 16 
    const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {
Línea 47... Línea 29...
47 
        catch (error) {
 29 
        catch (error) {
48 
            console.log('>>: error > ', error)
 30 
            console.log('>>: error > ', error)
49 
        }
 31 
        }
50 
    }
 32 
    }
Línea 51... Línea 33...
51 
 
 33 
 
52 
    const handleChangeConversation = conversation => {
 34 
    const changeConversation = (conversation) => {
53 
        setPage(defaultPages)
 35 
        setPage(defaultPages)
54 
        setSelectedConversation(conversation)
 36 
        setSelectedConversation(conversation)
Línea 55... Línea 37...
55 
    }
 37 
    }
Línea 76... Línea 58...
76 
        if (page.last > page.current) {
 58 
        if (page.last > page.current) {
77 
            setPage({ ...page, current: page.current += 1 })
 59 
            setPage({ ...page, current: page.current += 1 })
78 
        }
 60 
        }
79 
    }
 61 
    }
Línea 80... Línea -...
80 
 
 - 
 
81 
    const onClose = () => {
 - 
 
82 
        setVisible(false)
 - 
 
83 
    }
 - 
 
84 
 
 - 
 
85 
    const searchUsers = async value => {
 - 
 
86 
        try {
 - 
 
87 
            const res = await axios.get('/helpers/search-people?search=' + value)
 - 
 
88 
            if (res.data.success) {
 - 
 
89 
                setInmailPersons(res.data.data)
 - 
 
90 
            }
 - 
 
91 
        } catch (error) {
 - 
 
92 
            console.log('>>: error > ', error)
 - 
 
93 
        }
 - 
 
94 
    }
 - 
 
95 
 
 - 
 
96 
    const handleInmailPerson = uuid => {
 - 
 
97 
        onClose()
 - 
 
98 
        axios.get(`/inmail/${uuid}`)
 - 
 
99 
            .then(({ data }) => {
 - 
 
100 
                if (data.success) {
 - 
 
101 
                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)
 - 
 
102 
                    handleChangeConversation(newConversation)
 - 
 
103 
                }
 - 
 
104 
            })
 - 
 
105 
    }
 - 
 
106 
 
 - 
 
107 
    const handleShowConversation = (arg) => {
 - 
 
108 
        setShowConversations(arg)
 - 
 
109 
    }
 - 
 
110 
 
 - 
 
111 
    useEffect(() => {
 - 
 
112 
        const interval = setInterval(() => {
 - 
 
113 
            load()
 - 
 
114 
        }, 3000)
 - 
 
115 
 
 - 
 
116 
        return () => {
 - 
 
117 
            clearInterval(interval)
 - 
 
118 
        };
 - 
 
119 
    }, []);
 - 
 
120 
 
 - 
 
121 
    useEffect(() => {
 - 
 
122 
        if (path_id && conversations.length) {
 - 
 
123 
            setSelectedConversation(conversations.find(conversation => conversation.uuid === path_id))
 - 
 
124 
            setShowConversations(true)
 - 
 
125 
            path_id = null
 - 
 
126 
        }
 - 
 
127 
    }, [conversations]);
 - 
 
128 
 
 - 
 
129 
    useEffect(() => {
 - 
 
130 
        searchUsers(search)
 - 
 
131 
    }, [search]);
 - 
 
132 
 
 62 
 
133 
    useEffect(() => {
 63 
    useEffect(() => {
134 
        if (selectedConversation) {
 64 
        if (selectedConversation) {
135 
            getMessages(selectedConversation.messages_link)
 65 
            getMessages(selectedConversation.messages_link)
136 
                .then(({ pages, msgs }) => {
 66 
                .then(({ pages, msgs }) => {
Línea 168... Línea 98...
168 
                })
 98 
                })
169 
        }
 99 
        }
170 
    }, [page.current]);
 100 
    }, [page.current]);
Línea 171... Línea 101...
171 
 
 101 
 
172 
    return (
 - 
 
173 
        <>
 - 
 
174 
            <Modal
 - 
 
175 
                show={visible}
 - 
 
176 
                onHide={onClose}
 - 
 
177 
            >
 102 
    return (
178 
                <div className="card">
 103 
        <div className="messages-sec container">
179 
                    <div className="card-body">
 104 
            <div className="row">
180 
                        <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>
 - 
 
181 
                        <div className="form-group">
 - 
 
182 
                            <label htmlFor="search-people">Escribe el nombre</label>
 - 
 
183 
                            <input
 - 
 
184 
                                type="email"
 - 
 
185 
                                className="form-control"
 - 
 
186 
                                id="search-people"
 - 
 
187 
                                aria-describedby="Buscador de personas"
 - 
 
188 
                                placeholder="Escribe el nombre de la persona"
 - 
 
189 
                                onChange={(e) => setSearch(e.target.value)}
 - 
 
190 
                            />
 105 
                <div className={`col-12 col-md-4 ${selectedConversation && 'msgs-hide'}`}>
191 
                        </div>
 106 
                    <Sidebar
192 
                        <div className='container'>
 - 
 
193 
                            {
 - 
 
194 
                                inmailPersons.map(element => {
 - 
 
195 
                                    return (
 - 
 
196 
                                        <div
 - 
 
197 
                                            className='row'
 107 
                        setConversation={changeConversation}
198 
                                            key={element.value}
 - 
 
199 
                                        >
 - 
 
200 
                                            <div className='col-8'>
 - 
 
201 
                                                <p> {element.text} </p>
 - 
 
202 
                                            </div>
 - 
 
203 
                                            <div className='col-4'>
 - 
 
204 
                                                <button
 - 
 
205 
                                                    className='btn btn-primary'
 - 
 
206 
                                                    onClick={() => handleInmailPerson(element.value)}
 - 
 
207 
                                                >
 - 
 
208 
                                                    <i className='fa fa-check' />
 - 
 
209 
                                                </button>
 - 
 
210 
                                            </div>
 - 
 
211 
                                        </div>
 - 
 
212 
                                    )
 - 
 
213 
                                })
 - 
 
214 
                            }
 - 
 
215 
                        </div>
 - 
 
216 
                        <a href="#" onClick={onClose} className="btn btn-secondary">
 - 
 
217 
                            Cerrar
 - 
 
218 
                        </a>
 108 
                        selectedConversation={selectedConversation}
219 
                    </div>
 109 
                    />
220 
                </div>
 110 
                </div>
221 
            </Modal>
 111 
                <div className={`col-12 col-md-8 ${!selectedConversation && 'msgs-hide'}`}>
222 
            <div className="messages-sec container">
 112 
                    {selectedConversation
223 
                <div className="row">
 113 
                        ?
224 
                    <div className={`col-12 col-md-4 ${showConversations && 'msgs-hide'}`}>
 114 
                        <ChatMail
225 
                        <div className="chat_contacts">
 115 
                            getMoreMessages={() => getMoreMessages()}
226 
                            <h1 className='chat-title'>Personas</h1>
 116 
                            backendVars={props.backendVars}
227 
                            <div className="msgs_icons-container">
 117 
                            onSend={handleSend}
228 
                                {!showConversations &&
 118 
                            messages={messages}
229 
                                    <i
 119 
                            setMsgs={setMessages}
230 
                                        className='fa fa-search icon text-gray'
 120 
                            selectedConversation={selectedConversation}
231 
                                        onClick={() => setSearchActive(!searchActive)}
 121 
                            loading={isGettingMessages}
232 
                                    />
 122 
                        />
- 
 
 123 
                        :
233 
                                }
 124 
                        <div className='message-select-conversation'>
234 
                                <i
 125 
                            <div className='msgs-select-container'>
- 
 
 126 
                                <i className='fas fa-comments icon' />
235 
                                    className='fa fa-plus icon text-gray'
 127 
                                <h3>
236 
                                    onClick={() => setVisible(true)}
 128 
                                    No hay mensajes
237 
                                />
 129 
                                </h3>
238 
                            </div>
 - 
 
239 
                            <Sidebar
 - 
 
240 
                                click={handleChangeConversation}
 - 
 
241 
                                conversations={conversations}
 - 
 
242 
                                selectedConversation={selectedConversation}
 - 
 
243 
                                searchActive={searchActive}
 - 
 
244 
                                handleShowConversation={handleShowConversation}
 - 
 
245 
                            />
 130 
                            </div>
246 
                        </div>
 - 
 
247 
                    </div>
 - 
 
248 
                    <div className={`col-12 col-md-8 ${!showConversations && 'msgs-hide'}`}>
 - 
 
249 
                        {selectedConversation
 - 
 
250 
                            ?
 - 
 
251 
                            <ChatMail
 - 
 
252 
                                getMoreMessages={() => getMoreMessages()}
 - 
 
253 
                                backendVars={props.backendVars}
 - 
 
254 
                                onSend={text => handleSend(text)}
 - 
 
255 
                                messages={messages}
 - 
 
256 
                                setMsgs={setMessages}
 - 
 
257 
                                selectedConversation={selectedConversation}
 - 
 
258 
                                handleShowConversation={handleShowConversation}
 - 
 
259 
                                loading={isGettingMessages}
 - 
 
260 
                            />
 - 
 
261 
                            :
 - 
 
262 
                            <div className='message-select-conversation'>
 - 
 
263 
                                <div className='msgs-select-container'>
 - 
 
264 
                                    <i className='fas fa-comments icon' />
 - 
 
265 
                                    <h3>
 - 
 
266 
                                        No hay mensajes
 - 
 
267 
                                    </h3>
 - 
 
268 
                                </div>
 - 
 
269 
                            </div>
 131 
                        </div>
270 
                        }
 - 
 
271 
                    </div>
 132 
                    }
272 
                </div>
 133 
                </div>
273 
            </div>
 134 
            </div>
274 
        </>
 135 
        </div>
275 
    )
 136 
    )
Línea 276... Línea 137...
276 
}
 137 
}
277 
 
 138