Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4346 | Rev 4349 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4346 stevensc 1 
/* eslint-disable react/prop-types */
888 stevensc 2 
import React, { useEffect, useState } from 'react'
3713 stevensc 3 
import { axios } from '../utils'
4 
import { Modal } from 'react-bootstrap'
1 www 5 
import ChatMail from "./inmail/inmail"
6 
import Sidebar from './inmail/sidebar'
7 
 
2712 stevensc 8 
let path_id = window.location.pathname.split('/inmail/')[1]
2704 stevensc 9 
 
3074 stevensc 10 
const Inmail = props => {
891 stevensc 11 
    const defaultPages = { current: 1, last: 1 }
888 stevensc 12 
    const [conversations, setConversations] = useState([])
13 
    const [showConversations, setShowConversations] = useState(false)
14 
    const [selectedConversation, setSelectedConversation] = useState(null)
893 stevensc 15 
    const [page, setPage] = useState(defaultPages)
888 stevensc 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('')
891 stevensc 22 
 
1 www 23 
    const load = async () => {
24 
        try {
25 
            const res = await axios.get(window.location.href)
776 stevensc 26 
            if (res.data.success) {
1 www 27 
                setConversations(res.data.data)
28 
            }
29 
        } catch (error) {
30 
            console.log('>>: error > ', error)
31 
        }
32 
    }
891 stevensc 33 
 
1734 stevensc 34 
    const getMessages = async ({ messages_link = selectedConversation.messages_link, _page = defaultPages.current }) => {
1732 stevensc 35 
        try {
1734 stevensc 36 
            setIsGettingMessages(true)
37 
            const { data } = await axios.get(messages_link + '?page=' + _page)
38 
 
39 
            if (data.success) {
40 
                setIsGettingMessages(false)
41 
                return { pages: data.pagination, msgs: data.data }
1732 stevensc 42 
            }
1774 stevensc 43 
 
3137 stevensc 44 
            setIsGettingMessages(false)
1774 stevensc 45 
            return { pages: defaultPages.current, msgs: data.data }
893 stevensc 46 
        }
1732 stevensc 47 
        catch (error) {
48 
            console.log('>>: error > ', error)
49 
        }
1 www 50 
    }
727 stevensc 51 
 
1740 stevensc 52 
    const handleChangeConversation = conversation => {
891 stevensc 53 
        setPage(defaultPages)
1 www 54 
        setSelectedConversation(conversation)
55 
    }
56 
 
3710 stevensc 57 
    const handleSend = async (message = '') => {
776 stevensc 58 
        if (selectedConversation) {
1 www 59 
            try {
60 
                const params = {
3710 stevensc 61 
                    message: message
1 www 62 
                }
63 
                const formData = new FormData();
64 
                Object.entries(params).map(([key, value]) => {
65 
                    formData.append(key, value);
66 
                });
898 stevensc 67 
                const res = await axios.post(selectedConversation.send_link, formData)
1768 stevensc 68 
                setMessages(prev => [res.data.data, ...prev])
1 www 69 
            } catch (error) {
70 
                console.log('>>: err0r > ', error)
71 
            }
72 
        }
73 
    }
74 
 
913 stevensc 75 
    const getMoreMessages = () => {
888 stevensc 76 
        if (page.last > page.current) {
894 stevensc 77 
            setPage({ ...page, current: page.current += 1 })
884 stevensc 78 
        }
1 www 79 
    }
888 stevensc 80 
 
1 www 81 
    const onClose = () => {
82 
        setVisible(false)
83 
    }
84 
 
1768 stevensc 85 
    const searchUsers = async value => {
1 www 86 
        try {
776 stevensc 87 
            const res = await axios.get('/helpers/search-people?search=' + value)
88 
            if (res.data.success) {
1 www 89 
                setInmailPersons(res.data.data)
90 
            }
91 
        } catch (error) {
92 
            console.log('>>: error > ', error)
93 
        }
94 
    }
95 
 
96 
    const handleInmailPerson = uuid => {
97 
        onClose()
1772 stevensc 98 
        axios.get(`/inmail/${uuid}`)
1734 stevensc 99 
            .then(({ data }) => {
100 
                if (data.success) {
101 
                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)
102 
                    handleChangeConversation(newConversation)
103 
                }
104 
            })
1 www 105 
    }
106 
 
844 stevensc 107 
    const handleShowConversation = (arg) => {
108 
        setShowConversations(arg)
109 
    }
1 www 110 
 
1733 stevensc 111 
    useEffect(() => {
112 
        const interval = setInterval(() => {
113 
            load()
114 
        }, 3000)
115 
 
116 
        return () => {
117 
            clearInterval(interval)
118 
        };
119 
    }, []);
120 
 
121 
    useEffect(() => {
2712 stevensc 122 
        if (path_id && conversations.length) {
2713 stevensc 123 
            setSelectedConversation(conversations.find(conversation => conversation.uuid === path_id))
2711 stevensc 124 
            setShowConversations(true)
2712 stevensc 125 
            path_id = null
2705 stevensc 126 
        }
2708 stevensc 127 
    }, [conversations]);
2704 stevensc 128 
 
129 
    useEffect(() => {
1768 stevensc 130 
        searchUsers(search)
1733 stevensc 131 
    }, [search]);
132 
 
1734 stevensc 133 
    useEffect(() => {
1737 stevensc 134 
        if (selectedConversation) {
135 
            getMessages(selectedConversation.messages_link)
1734 stevensc 136 
                .then(({ pages, msgs }) => {
137 
                    setPage({ ...page, last: pages.last })
138 
                    setMessages(msgs)
139 
                })
140 
        }
141 
    }, [selectedConversation]);
142 
 
143 
    useEffect(() => {
3137 stevensc 144 
        let timer;
3144 stevensc 145 
        if (!isGettingMessages && selectedConversation) {
3137 stevensc 146 
            timer = setTimeout(() => {
147 
                getMessages(selectedConversation.messages_link)
148 
                    .then(({ pages, msgs }) => {
149 
                        setPage({ ...page, last: pages.last })
150 
                        setMessages(msgs)
151 
                    })
152 
            }, 2000);
153 
        }
154 
        return () => {
155 
            clearTimeout(timer);
156 
        };
3144 stevensc 157 
    }, [isGettingMessages, selectedConversation]);
3137 stevensc 158 
 
159 
    useEffect(() => {
1737 stevensc 160 
        if (page.current > 1) {
1740 stevensc 161 
            setIsGettingMessages(true)
1741 stevensc 162 
 
1734 stevensc 163 
            getMessages({ _page: page.current })
164 
                .then(({ pages, msgs }) => {
165 
 
166 
                    setPage({ ...page, last: pages.last })
1740 stevensc 167 
                    setMessages(prev => [...prev, ...msgs])
1734 stevensc 168 
                })
169 
        }
170 
    }, [page.current]);
171 
 
776 stevensc 172 
    return (
1 www 173 
        <>
174 
            <Modal
175 
                show={visible}
176 
                onHide={onClose}
177 
            >
178 
                <div className="card">
179 
                    <div className="card-body">
1890 steven 180 
                        <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>
3074 stevensc 181 
                        <div className="form-group">
182 
                            <label htmlFor="search-people">Escribe el nombre</label>
1 www 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"
1733 stevensc 189 
                                onChange={(e) => setSearch(e.target.value)}
1 www 190 
                            />
191 
                        </div>
1733 stevensc 192 
                        <div className='container'>
1 www 193 
                            {
194 
                                inmailPersons.map(element => {
776 stevensc 195 
                                    return (
1 www 196 
                                        <div
197 
                                            className='row'
198 
                                            key={element.value}
199 
                                        >
1733 stevensc 200 
                                            <div className='col-8'>
1 www 201 
                                                <p> {element.text} </p>
202 
                                            </div>
1733 stevensc 203 
                                            <div className='col-4'>
1 www 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>
1890 steven 216 
                        <a href="#" onClick={onClose} className="btn btn-secondary">
1 www 217 
                            Cerrar
218 
                        </a>
219 
                    </div>
220 
                </div>
221 
            </Modal>
4346 stevensc 222 
            <div className="messages-sec container">
223 
                <div className="row">
4348 stevensc 224 
                    <div className={`col-12 col-md-8 ${showConversations && 'msgs-hide'}`}>
4346 stevensc 225 
                        <div className="chat_contacts">
226 
                            <h1 className='chat-title'>Personas</h1>
227 
                            <div className="msgs_icons-container">
228 
                                {!showConversations &&
229 
                                    <i
230 
                                        className='fa fa-search icon text-gray'
231 
                                        onClick={() => setSearchActive(!searchActive)}
1868 steven 232 
                                    />
4346 stevensc 233 
                                }
234 
                                <i
235 
                                    className='fa fa-plus icon text-gray'
236 
                                    onClick={() => setVisible(true)}
237 
                                />
1864 steven 238 
                            </div>
4346 stevensc 239 
                            <Sidebar
240 
                                click={handleChangeConversation}
241 
                                conversations={conversations}
242 
                                selectedConversation={selectedConversation}
243 
                                searchActive={searchActive}
244 
                                handleShowConversation={handleShowConversation}
245 
                            />
246 
                        </div>
247 
                    </div>
4348 stevensc 248 
                    <div className={`col-12 col-md-8 ${!showConversations && 'msgs-hide'}`}>
4346 stevensc 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>
1 www 268 
                                </div>
269 
                            </div>
4346 stevensc 270 
                        }
1 www 271 
                    </div>
272 
                </div>
4346 stevensc 273 
            </div>
1 www 274 
        </>
275 
    )
3074 stevensc 276 
}
277 
 
278 
export default Inmail