Proyectos de Subversion LeadersLinked - Backend

import {axios} from "../../../utils";
import React, { useEffect, useState } from "react";
import Spinner from "../../../shared/loading-spinner/Spinner";

import styles from "./addMember.module.scss";

const AddMember = (props) => {
  const {
    url_add_user_to_group,
    url_get_contacts_availables_for_group,
  } = props.group;

  const [loading, setLoading] = useState(false);
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    getContacts();
  }, []);

  const getContacts = async () => {
    setLoading(true);
    const response = await axios.get(url_get_contacts_availables_for_group);
    const resData = response.data;
    if (!resData.success) {
      return  (resData);
    }
    setContacts(resData.data);
    setLoading(false);
  };

  const handleAddMember = async (id) => {
    setLoading(true);
    const formData = new FormData();
    formData.append("uid", id);
    const response = await axios.post(url_add_user_to_group, formData);
    const resData = response.data;
    if (!resData.success) {
      setLoading(false);
      return  (resData);
    }
    await getContacts();
    setLoading(false);
  };

  return (
    <div className={styles.addMember}>
      {contacts.map(({ id, image, name }) => (
        <li className={styles.entity} onClick={() => handleAddMember(id)}>
          <img src={image} alt="user_image" />
          <span className={styles.entityName}>{name}</span>
          <div className={styles.entityOptions}>
            <i className={`fa fa-plus-circle`}></i>
          </div>
        </li>
      ))}
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </div>
  );
};

export default AddMember;