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 cursor-pointer" style={{ gap: '.5rem' }} onClick={() => setVisible(true)}>
                        <i className='fa fa-plus icon text-gray' />
                        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>
                <h3 className="card-title font-weight-bold">Crear sala de Intercambio Profesional</h3>
            </Modal.Header>
            <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>
        </Modal >
    )
}

Sidebar.StartConversationModal = StartConversationModal

export default Sidebar