Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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