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