Proyectos de Subversion LeadersLinked - Backend

Rev

Autoría | Ultima modificación | Ver Log |

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

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

const GroupMembers = (props) => {
  const {
    url_add_user_to_group,
    url_delete,
    url_get_contact_group_list,
    url_get_contacts_availables_for_group,
    url_leave,
  } = props.group;

  const [members, setMembers] = useState([]);
  const [loading, setLoading] = useState(true);

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

  const getMembers = async () => {
    setLoading(true);
    const response = await axios.get(url_get_contact_group_list);
    const resData = response.data;
    if (!resData.success) {
      return  (resData);
    }
    setMembers(resData.data);
    setLoading(false);
  };

  const handleRemoveMember = async (remove_url) => {
    setLoading(true);
    const response = await axios.post(remove_url);
    const resData = response.data;
    if (!resData.success) {
      return  (resData);
    }
    await getMembers();
    setLoading(false);
  };

  return (
    <div className={styles.groupMembers}>
      {members.map(({ image, name, url_remove_from_group }) => (
        <li className={styles.entity}>
          <img src={image} alt="user_image" />
          <span className={styles.entityName}>{name}</span>
          <div className={styles.entityOptions}>
            {url_remove_from_group && (
              <i
                className={`fa fa-user-times ${styles.danger}`}
                onClick={() => handleRemoveMember(url_remove_from_group)}
              ></i>
            )}
          </div>
        </li>
      ))}
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </div>
  );
};

export default GroupMembers;