Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */

/* 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'

import { addNotification } from '../../redux/notification/notification.actions'

import { useDispatch } from 'react-redux'

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 [loading, setLoading] = useState(false)

  const dispatch = useDispatch()

  const searchContainer = useRef()

  const filtredConversations = conversations.filter((conversation) =>

    conversation.name.toLowerCase().includes(search.toLowerCase())

  )

  const load = async () => {

    try {

      setLoading(true)

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

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

    } catch (error) {

      const errorMessage = new Error(error)

      dispatch(addNotification({ style: 'danger', msg: errorMessage.message }))

    } finally {

      setLoading(false)

    }

  }

  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(() => {

    let timer

    if (!loading) {

      timer = setTimeout(() => {

        load()

      }, 2000)

    }

    return () => {

      clearTimeout(timer)

    }

  }, [loading])

  return (

    <>

      <Sidebar.StartConversationModal

        show={visible}

        setConversation={setConversation}

      />

      <div className="chat_contacts">

        <h1 className="chat-title">{LABELS.PEOPLE}</h1>

        <div className="msgs_icons-container">

          <div className="contact__search show" ref={searchContainer}>

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

            <input

              type="text"

              placeholder={LABELS.SEARCH}

              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" />

            {LABELS.START_CONVERSATION}

          </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}{' '}

                          {LABELS.NEW_MESSAGES?.toLowerCase()} |{' '}

                          <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>

        <Modal.Title>{LABELS.CREATE_INMAIL}</Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <div className="form-group">

          <label htmlFor="search-people">{LABELS.WRITE_NAME}</label>

          <input

            type="email"

            className="form-control"

            aria-describedby="Buscador de personas"

            placeholder={LABELS.WRITE_PERSON_NAME}

            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.Body>

    </Modal>

  )

}

Sidebar.StartConversationModal = StartConversationModal

export default Sidebar