Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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