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

  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 pb-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} />

        )}

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