Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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