Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import EmptySection from '../../shared/empty-section/EmptySection';

import SearchIcon from '@mui/icons-material/Search'

import { axios } from '../../utils';

import { Modal } from 'react-bootstrap';

let path_id = window.location.pathname.split('/inmail/')[1]

const Sidebar = ({

    selectedConversation = null,

    setConversation = function () { },

}) => {

    const [conversations, setConversations] = useState([])

    const [searchActive, setSearchActive] = useState(false)

    const [search, setSearch] = useState('')

    const [visible, setVisible] = useState(false)

    const searchContainer = useRef()

    const filtredConversations = conversations.filter((conversation) => conversation.name.toLowerCase().includes(search.toLowerCase()))

    const load = async () => {

        try {

            const { data } = await axios.get(window.location.href)

            if (data.success) setConversations(data.data)

        } catch (error) {

            console.log('>>: error > ', error)

        }

    }

    useEffect(() => {

        const handleClickOutside = (event) => {

            if (searchContainer.current && !searchContainer.current.contains(event.target)) {

                setSearchActive(false)

            }

        }

        document.addEventListener("mousedown", handleClickOutside);

        return () => {

            document.removeEventListener("mousedown", handleClickOutside);

        };

    }, [searchContainer]);

    useEffect(() => {

        if (path_id && conversations.length) {

            setConversation(conversations.find(conversation => conversation.uuid === path_id))

            path_id = null

        }

    }, [conversations]);

    useEffect(() => {

        const interval = setInterval(() => {

            load()

        }, 3000)

        return () => {

            clearInterval(interval)

        };

    }, []);

    return (

        <>

            <Sidebar.StartConversationModal

                show={visible}

                setConversation={setConversation}

            />

            <div className="chat_contacts">

                <h1 className='chat-title'>Personas</h1>

                <div className="msgs_icons-container">

                    <div

                        className={`contact__search show`}

                        ref={searchContainer}

                    >

                        <SearchIcon onClick={() => setSearchActive(!searchActive)} />

                        <input

                            type='text'

                            placeholder='Buscar'

                            onChange={(e) => setSearch(e.target.value)}

                        />

                    </div>

                    <div className="d-inline-flex align-items-center" style={{ gap: '.5rem' }}>

                        <i

                            className='fa fa-plus icon text-gray'

                            onClick={() => setVisible(true)}

                        />

                        Iniciar conversación

                    </div>

                </div>

                {!filtredConversations.length

                    ? <EmptySection message='Sin conversaciones' />

                    : <ul className='messages-list'>

                        {filtredConversations.map((conversation) => {

                            return (

                                <li key={conversation.uuid} onClick={() => setConversation(conversation)}>

                                    <div className={`usr-msg-details ${selectedConversation?.uuid === conversation.uuid && 'is_selected'}`}>

                                        <div className="usr-ms-img">

                                            <img src={conversation.image} alt={conversation.name} />

                                        </div>

                                        <div className="usr-mg-info">

                                            <h3>{conversation.name}</h3>

                                            {Number(conversation.count_unread) > 0 &&

                                                <p className="text-gray">

                                                    {conversation.count_unread} mensajes nuevos | <span> {conversation.last_message} </span>

                                                </p>

                                            }

                                        </div>

                                    </div>

                                </li>

                            )

                        })}

                    </ul>

                }

            </div>

        </>

    )

}

const StartConversationModal = ({ show, setConversation }) => {

    const [search, setSearch] = useState('')

    const [isShow, setIsShow] = useState(show)

    const [inmailPersons, setInmailPersons] = useState([])

    const closeModal = () => setIsShow(false)

    const handleSearch = ({ target }) => setSearch(target.value)

    const searchUsers = async value => {

        try {

            const { data } = await axios.get('/helpers/search-people?search=' + value)

            if (data.success) setInmailPersons(data.data)

        } catch (error) {

            console.log('>>: error > ', error)

        }

    }

    const handleInmailPerson = uuid => {

        closeModal()

        axios.get(`/inmail/${uuid}`)

            .then(({ data }) => {

                if (data.success) {

                    const newConversation = data.data.find(conversation => conversation.uuid === uuid)

                    setConversation(newConversation)

                }

            })

    }

    useEffect(() => {

        searchUsers(search)

    }, [search]);

    useEffect(() => {

        setIsShow(show)

    }, [show])

    return (

        <Modal

            show={isShow}

            onHide={closeModal}

        >

            <Modal.Header closeButton />

            <div className="card">

                <div className="card-body">

                    <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>

                    <div className="form-group">

                        <label htmlFor="search-people">Escribe el nombre</label>

                        <input

                            type="email"

                            className="form-control"

                            id="search-people"

                            aria-describedby="Buscador de personas"

                            placeholder="Escribe el nombre de la persona"

                            onChange={handleSearch}

                        />

                    </div>

                    <div className='container'>

                        {inmailPersons.map((person) => {

                            return (

                                <div className='row' key={person.value}>

                                    <div className='col-8'>

                                        <p>{person.text}</p>

                                    </div>

                                    <div className='col-4'>

                                        <button

                                            className='btn btn-primary'

                                            onClick={() => handleInmailPerson(person.value)}

                                        >

                                            <i className='fa fa-check' />

                                        </button>

                                    </div>

                                </div>

                            )

                        })}

                    </div>

                </div>

            </div>

        </Modal>

    )

}

Sidebar.StartConversationModal = StartConversationModal

export default Sidebar