Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";

import { axios } from "../../utils";

import { Modal } from "react-bootstrap";

import { useSelector } from "react-redux";

import CheckIcon from "@mui/icons-material/Check";

const StartConversationModal = ({ show, setConversation, onClose }) => {

  const [inmailPersons, setInmailPersons] = useState([]);

  const [search, setSearch] = useState("");

  const labels = useSelector(({ intl }) => intl.labels);

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

    axios.get(`/inmail/${uuid}`).then(({ data }) => {

      if (data.success) {

        const newConversation = data.data.find(

          (conversation) => conversation.uuid === uuid

        );

        setConversation(newConversation);

      }

    });

    onClose();

  };

  useEffect(() => {

    searchUsers(search);

  }, [search]);

  return (

    <Modal show={show} onHide={onClose}>

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

                  >

                    <CheckIcon />

                  </button>

                </div>

              </div>

            );

          })}

        </div>

      </Modal.Body>

    </Modal>

  );

};

export default StartConversationModal;