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