Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../utils'

import IconButton from '@mui/material/IconButton'

import GroupRemoveIcon from '@mui/icons-material/GroupRemove'

import Spinner from '../UI/Spinner'

import LoaderContainer from '../UI/LoaderContainer'

const GroupMembers = ({ group }) => {

  const { url_get_contact_group_list } = group

  const [members, setMembers] = useState([])

  const [loading, setLoading] = useState(true)

  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)

  }

  useEffect(() => {

    getMembers()

  }, [])

  return (

    <div className="group-members">

      <ul>

        {members.map((member, i) => (

          <li key={i}>

            <GroupMembers.Item

              {...member}

              onClick={() => handleRemoveMember(member.url_remove_from_group)}

            />

          </li>

        ))}

      </ul>

      {loading && (

        <LoaderContainer>

          <Spinner />

        </LoaderContainer>

      )}

    </div>

  )

}

const Item = ({ image, name, onClick }) => {

  return (

    <div className="entity">

      <img src={image} alt="user_image" />

      <span>{name}</span>

      <IconButton onClick={onClick}>

        <GroupRemoveIcon />

      </IconButton>

    </div>

  )

}

GroupMembers.Item = Item

export default GroupMembers