Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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