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;