Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from "react";
import { axios } from "../../../utils";

import Sidebar from "./Sidebar";
import Chat from "../chat/Chat";
import Modal from "react-bootstrap/Modal";
import EmptySection from "../../../shared/empty-section/EmptySection";

const DesktopChat = ({ chatUsers, chatGroups, timezones }) => {
  const [selectedConversation, setSelectedConversation] = useState(null);
  const [visible, setVisible] = useState(false);

  const handleChangeConversation = (conversation) => {
    setSelectedConversation(conversation);
  };

  const onClose = () => {
    setVisible(false);
  };

  const handleCloseChat = () => {
    console.log(">>: close chat");
  };

  return (
    <>
      <main className="conversation-page px-0 pt-3">
        <Sidebar
          onClick={(conversation) => handleChangeConversation(conversation)}
          conversations={[...chatUsers, ...chatGroups]}
          selectedConversation={selectedConversation}
        />
        {!selectedConversation ? (
          <EmptySection message="Selecciona una conversación" align="center" />
        ) : (
          <Chat
            entity={selectedConversation}
            onCloseChat={handleCloseChat}
            timezones={timezones}
          />
        )}
      </main>
      <DesktopChat.ChatModal show={visible} onClose={onClose} />
    </>
  );
};

const ChatModal = ({ show, onClose }) => {
  const [inmailPersons, setInmailPersons] = useState([]);
  const [search, setSearch] = useState("");

  const handleChange = (searchValue) => {
    setSearch(searchValue);
  };

  const searchUsers = async () => {
    try {
      const { data: response } = await axios.get(
        `/helpers/search-people?search=${search}`
      );
      const { success, data } = response;

      if (!success) {
        console.log("Ha ocurrido un error");
      }

      setInmailPersons(data);
    } catch (error) {
      console.log(">>: error > ", error);
    }
  };

  const handleInmailPerson = (uuid) => {
    onClose();
    window.location.href = "/inmail/" + uuid;
    setTimeout(() => {
      window.location.reload();
    }, 1000);
  };

  useEffect(() => {
    searchUsers();
  }, [search]);

  return (
    <Modal show={show} onHide={onClose}>
      <Modal.Header closeButton>
        <Modal.Title>Crear sala de Chat</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div class="form-group">
          <label for="search-people">Direccion de email</label>
          <input
            type="email"
            className="form-control"
            aria-describedby="Buscador de personas"
            placeholder="Escribe el nombre de la persona"
            onChange={handleChange}
          />
        </div>
        <div className="container">
          {inmailPersons.map((element) => {
            return (
              <div className="row" key={element.value}>
                <div className="col-8">
                  <p> {element.text} </p>
                </div>
                <div className="col-4">
                  <button
                    className="btn btn-primary"
                    onClick={() => handleInmailPerson(element.value)}
                  >
                    <i className="fa fa-check" />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </Modal.Body>
      <Modal.Footer>
        <button onClick={onClose} className="btn btn-secondary">
          Cerrar
        </button>
      </Modal.Footer>
    </Modal>
  );
};

DesktopChat.ChatModal = ChatModal;

export default DesktopChat;