Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4350 | Rev 4355 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4350 Rev 4354
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
 2 
import React, { useEffect, useState } from 'react'
3 
import EmptySection from '../../shared/empty-section/EmptySection';
 3 
import EmptySection from '../../shared/empty-section/EmptySection';
- 
 
 4 
import SearchIcon from '@mui/icons-material/Search'
- 
 
 5 
import { axios } from '../../utils';
- 
 
 6 
import { Modal } from 'react-bootstrap';
- 
 
 7 
 
- 
 
 8 
let path_id = window.location.pathname.split('/inmail/')[1]
Línea 4... Línea 9...
4 
 
 9 
 
5 
const Sidebar = ({
 - 
 
6 
    conversations = [],
 10 
const Sidebar = ({
7 
    selectedConversation = null,
 - 
 
8 
    click = function () { },
 11 
    selectedConversation = null,
9 
    handleShowConversation = function () { }
 12 
    setConversation = function () { },
- 
 
 13 
}) => {
- 
 
 14 
    const [conversations, setConversations] = useState([])
- 
 
 15 
    const [searchActive, setSearchActive] = useState(false)
- 
 
 16 
    const [search, setSearch] = useState('')
- 
 
 17 
    const [visible, setVisible] = useState(false)
- 
 
 18 
 
- 
 
 19 
    const searchConversation = (value) => setSearch(value)
Línea 10... Línea 20...
10 
}) => {
 20 
    const filterConversations = conversations.filter(conversation => conversation.name === search)
- 
 
 21 
 
- 
 
 22 
    const load = async () => {
11 
 
 23 
        try {
12 
    const handleConversation = (element) => {
 24 
            const { data } = await axios.get(window.location.href)
- 
 
 25 
            if (data.success) setConversations(data.data)
- 
 
 26 
        } catch (error) {
13 
        handleShowConversation(true);
 27 
            console.log('>>: error > ', error)
Línea -... Línea 28...
- 
 
 28 
        }
14 
        click(element)
 29 
    }
- 
 
 30 
 
- 
 
 31 
    useEffect(() => {
- 
 
 32 
        if (path_id && conversations.length) {
- 
 
 33 
            setConversation(conversations.find(conversation => conversation.uuid === path_id))
- 
 
 34 
            path_id = null
- 
 
 35 
        }
- 
 
 36 
    }, [conversations]);
- 
 
 37 
 
- 
 
 38 
    useEffect(() => {
- 
 
 39 
        const interval = setInterval(() => {
- 
 
 40 
            load()
- 
 
 41 
        }, 3000)
- 
 
 42 
 
- 
 
 43 
        return () => {
- 
 
 44 
            clearInterval(interval)
- 
 
 45 
        };
- 
 
 46 
    }, []);
- 
 
 47 
 
- 
 
 48 
    return (
- 
 
 49 
        <>
- 
 
 50 
            <Sidebar.StartConversationModal
- 
 
 51 
                show={visible}
- 
 
 52 
                setConversation={setConversation}
- 
 
 53 
            />
- 
 
 54 
            <div className="chat_contacts">
- 
 
 55 
                <h1 className='chat-title'>Personas</h1>
- 
 
 56 
                <div className="msgs_icons-container">
- 
 
 57 
                    <div
- 
 
 58 
                        className={`contact__search ${searchActive && 'show'}`}
- 
 
 59 
                        onClick={() => setSearchActive(!searchActive)}
- 
 
 60 
                    >
- 
 
 61 
                        <SearchIcon />
- 
 
 62 
                        <input
- 
 
 63 
                            type='text'
- 
 
 64 
                            placeholder='Buscar'
- 
 
 65 
                            onChange={(e) => searchConversation(e.target.value)}
- 
 
 66 
                        />
- 
 
 67 
                    </div>
- 
 
 68 
                    <i
- 
 
 69 
                        className='fa fa-plus icon text-gray'
- 
 
 70 
                        onClick={() => setVisible(true)}
15 
    }
 71 
                    />
- 
 
 72 
                </div>
- 
 
 73 
                {!conversations.length
- 
 
 74 
                    ? <EmptySection message='Sin conversaciones' />
- 
 
 75 
                    : <ul className='messages-list'>
- 
 
 76 
                        {filterConversations.map((element, i) => {
- 
 
 77 
                            return (
- 
 
 78 
                                <li key={i} onClick={() => setConversation(element)}>
- 
 
 79 
                                    <div className={`usr-msg-details ${selectedConversation?.name === element.name && 'is_selected'}`}>
- 
 
 80 
                                        <div className="usr-ms-img">
- 
 
 81 
                                            <img src={element.image} alt={element.name} />
- 
 
 82 
                                        </div>
- 
 
 83 
                                        <div className="usr-mg-info">
- 
 
 84 
                                            <h3>{element.name}</h3>
- 
 
 85 
                                            {Number(element.count_unread) > 0 &&
- 
 
 86 
                                                <p className="text-gray">
- 
 
 87 
                                                    {element.count_unread} mensajes nuevos | <span> {element.last_message} </span>
- 
 
 88 
                                                </p>
- 
 
 89 
                                            }
- 
 
 90 
                                        </div>
- 
 
 91 
                                    </div>
- 
 
 92 
                                </li>
- 
 
 93 
                            )
- 
 
 94 
                        })}
- 
 
 95 
                    </ul>
- 
 
 96 
                }
- 
 
 97 
            </div>
- 
 
 98 
        </>
- 
 
 99 
    )
- 
 
 100 
}
- 
 
 101 
 
- 
 
 102 
const StartConversationModal = ({ show, setConversation }) => {
- 
 
 103 
    const [search, setSearch] = useState('')
- 
 
 104 
    const [isShow, setIsShow] = useState(show)
- 
 
 105 
    const [inmailPersons, setInmailPersons] = useState([])
- 
 
 106 
 
- 
 
 107 
    const closeModal = () => setIsShow(false)
- 
 
 108 
    const handleSearch = ({ target }) => setSearch(target.value)
- 
 
 109 
 
- 
 
 110 
    const searchUsers = async value => {
- 
 
 111 
        try {
- 
 
 112 
            const { data } = await axios.get('/helpers/search-people?search=' + value)
- 
 
 113 
            if (data.success) setInmailPersons(data.data)
16 
 
 114 
        } catch (error) {
Línea -... Línea 115...
- 
 
 115 
            console.log('>>: error > ', error)
- 
 
 116 
        }
- 
 
 117 
    }
- 
 
 118 
 
- 
 
 119 
    const handleInmailPerson = uuid => {
- 
 
 120 
        closeModal()
- 
 
 121 
        axios.get(`/inmail/${uuid}`)
- 
 
 122 
            .then(({ data }) => {
- 
 
 123 
                if (data.success) {
- 
 
 124 
                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)
- 
 
 125 
                    setConversation(newConversation)
- 
 
 126 
                }
- 
 
 127 
            })
- 
 
 128 
    }
- 
 
 129 
 
17 
    if (!conversations.length) {
 130 
    useEffect(() => {
- 
 
 131 
        searchUsers(search)
- 
 
 132 
    }, [search]);
- 
 
 133 
 
- 
 
 134 
    return (
18 
        return <EmptySection message='Sin conversaciones' />
 135 
        <Modal
19 
    }
 136 
            show={isShow}
- 
 
 137 
            onHide={closeModal}
- 
 
 138 
        >
- 
 
 139 
            <div className="card">
- 
 
 140 
                <div className="card-body">
- 
 
 141 
                    <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>
- 
 
 142 
                    <div className="form-group">
- 
 
 143 
                        <label htmlFor="search-people">Escribe el nombre</label>
- 
 
 144 
                        <input
- 
 
 145 
                            type="email"
- 
 
 146 
                            className="form-control"
20 
 
 147 
                            id="search-people"
- 
 
 148 
                            aria-describedby="Buscador de personas"
- 
 
 149 
                            placeholder="Escribe el nombre de la persona"
21 
    return (
 150 
                            onChange={handleSearch}
- 
 
 151 
                        />
22 
        <ul className='messages-list'>
 152 
                    </div>
23 
            {conversations.map((element, i) => {
 153 
                    <div className='container'>
24 
                return (
 154 
                        {inmailPersons.map((person) => {
25 
                    <li key={i} onClick={() => handleConversation(element)}>
 155 
                            return (
26 
                        <div className={`usr-msg-details ${selectedConversation?.name === element.name && 'is_selected'}`}>
 156 
                                <div className='row' key={person.value}>
27 
                            <div className="usr-ms-img">
 157 
                                    <div className='col-8'>
28 
                                <img src={element.image} alt={element.name} />
 158 
                                        <p>{person.text}</p>
- 
 
 159 
                                    </div>
29 
                            </div>
 160 
                                    <div className='col-4'>
30 
                            <div className="usr-mg-info">
 161 
                                        <button
- 
 
 162 
                                            className='btn btn-primary'
31 
                                <h3>{element.name}</h3>
 163 
                                            onClick={() => handleInmailPerson(person.value)}
32 
                                {Number(element.count_unread) > 0 &&
 164 
                                        >
33 
                                    <p className="text-gray">
 165 
                                            <i className='fa fa-check' />
- 
 
 166 
                                        </button>
34 
                                        {element.count_unread} mensajes nuevos | <span> {element.last_message} </span>
 167 
                                    </div>
- 
 
 168 
                                </div>
- 
 
 169 
                            )
35 
                                    </p>
 170 
                        })}
36 
                                }
 171 
                    </div>
37 
                            </div>
 172 
                    <a href="#" onClick={closeModal} className="btn btn-secondary">
38 
                        </div>
 173 
                        Cerrar
39 
                    </li>
 174 
                    </a>
40 
                )
 175 
                </div>
Línea -... Línea 176...
- 
 
 176 
            </div>
- 
 
 177 
        </Modal>
41 
            })}
 178 
    )
42 
        </ul>
 179 
}