Proyectos de Subversion LeadersLinked - Antes de SPA

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

import Avatar from '../UI/AvatarImage'
import MembersModal from '../modals/MembersModal'
import AddMemberModal from '../modals/AddMemberModal'

const Members = ({ groupId }) => {
  const [members, setMembers] = useState([])
  const [addModalShow, setAddModalShow] = useState(false)
  const [showMembersModal, setShowMembersModal] = useState(false)
  const [linkInvite, setLinkInvite] = useState('')

  const load = () => {
    axios.get(`/helpers/group-members/${groupId}`).then(({ data }) => {
      if (data.success) {
        setMembers(data.data.items)
        setLinkInvite(data.data.link_invite)
      }
    })
  }

  useEffect(() => load(), [])

  const handleAction = (url) => {
    const params = new FormData()
    axios
      .post(url, params)
      .then(({ data }) => {
        if (!data.success) {
          return addNotification({ style: 'danger', msg: data.data })
        }
        addNotification({
          style: 'success',
          msg: 'Accion realizada exitosamente',
        })
        load()
      })
      .catch((err) => console.log('>>: err > ', err))
  }

  const closeAddModal = () => {
    setAddModalShow(false)
    load()
  }

  const openModal = (e) => {
    e.preventDefault()
    setShowMembersModal(true)
  }

  return (
    <>
      <AddMemberModal
        isShow={addModalShow}
        handleClose={closeAddModal}
        linkInvite={linkInvite}
      />
      <MembersModal
        isShow={showMembersModal}
        handleClose={() => setShowMembersModal(!showMembersModal)}
        members={members}
        handleAction={handleAction}
      />
      <div className="suggest__widget">
        <div className="linked__widget-header">
          <h3>{members.length} Miembros</h3>
        </div>
        <div className="members-image__list">
          {members.slice(0, 4).map((member) => {
            return (
              <Avatar
                key={member.name}
                imageUrl={member.image}
                size="lg"
                name={member.name}
              />
            )
          })}
        </div>
        {linkInvite && (
          <button
            onClick={() => setAddModalShow(!addModalShow)}
            className="button btn btn-primary ml-3"
          >
            Invitar miembros
          </button>
        )}
        <a className="load__suggest" onClick={(e) => openModal(e)}>
          <span>Ver más</span>
          <EastIcon />
        </a>
      </div>
    </>
  )
}

export default Members