Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import IconButton from '@mui/material/IconButton'
import AddRounded from '@mui/icons-material/AddRounded'

import Spinner from '../UI/Spinner'
import LoaderContainer from '../UI/LoaderContainer'

const AddMember = ({ group }) => {
  const { url_add_user_to_group, url_get_contacts_availables_for_group } = group
  const [contacts, setContacts] = useState([])
  const [loading, setLoading] = useState(false)
  const dispatch = useDispatch()

  const getContacts = async () => {
    setLoading(true)
    axios
      .get(url_get_contacts_availables_for_group)
      .then(({ data: response }) => {
        const { data, success } = response
        if (!success) {
          typeof data === 'string'
            ? dispatch(addNotification({ style: 'danger', msg: data }))
            : dispatch(
                addNotification({
                  style: 'danger',
                  msg: 'Ha ocurrioo un error',
                })
              )
          return
        }

        setContacts(data)
        setLoading(false)
      })
      .catch((err) => {
        console.log(err)
        throw new Error(err)
      })
      .finally(() => setLoading(false))
  }

  const handleAddMember = async (id) => {
    setLoading(true)
    const formData = new FormData()
    formData.append('uid', id)

    axios
      .post(url_add_user_to_group, formData)
      .then(async ({ data: response }) => {
        const { data, success } = response
        if (!success) {
          typeof data === 'string'
            ? dispatch(addNotification({ style: 'danger', msg: data }))
            : dispatch(
                addNotification({
                  style: 'danger',
                  msg: 'Ha ocurrioo un error',
                })
              )
          return
        }

        await getContacts()
        setLoading(false)
      })
      .catch((err) => {
        console.log(err)
        throw new Error(err)
      })
      .finally(() => setLoading(false))
  }

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

  return (
    <div className="add-member">
      <ul>
        {contacts.map((member) => (
          <li key={member.id}>
            <AddMember.Item
              {...member}
              onClick={() => handleAddMember(member.id)}
            />
          </li>
        ))}
      </ul>
      {loading && (
        <LoaderContainer>
          <Spinner />
        </LoaderContainer>
      )}
    </div>
  )
}

const Item = ({ image, name, onClick }) => {
  return (
    <div className="entity">
      <img src={image} alt={`user_${name}-image`} />
      <span>{name}</span>
      <IconButton onClick={onClick}>
        <AddRounded />
      </IconButton>
    </div>
  )
}

AddMember.Item = Item

export default AddMember