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;