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 AddMemberModal from '../../../../shared/helpers/group-members-helper/AddMemberModal'
import MembersModal from '../../../../shared/helpers/group-members-helper/MembersModal'
import MemberTemplate from '../../../../shared/helpers/group-members-helper/MemberTemplate'

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

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

  const handleAction = (url) => {
    const params = new FormData()
    axios
      .post(url, params)
      .then(({ data }) => {
        if (!data.success) {
          dispatch(addNotification({ style: 'danger', msg: data.data }))
          return
        }

        dispatch(
          addNotification({
            style: 'success',
            msg: 'Accion realizada exitosamente',
          })
        )
      })
      .catch((err) => console.log('>>: err > ', err))
      .finally(() => load())
  }

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

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

  return (
    <>
      <AddMemberModal
        isShow={addModalShow}
        handleClose={closeAddModal}
        linkInvite={linkInvite}
      />
      <MembersModal
        isShow={showMembersModal}
        handleClose={() => setShowMembersModal(!showMembersModal)}
        members={members}
        handleAction={handleAction}
      />
      <div className="members-container">
        {linkInvite && (
          <button
            onClick={() => setAddModalShow(!addModalShow)}
            className="btn btn-primary btn-sm w-100"
          >
            Añadir miembros
          </button>
        )}
        <button
          onClick={() => setShowMembersModal(!showMembersModal)}
          className="btn btn-primary btn-sm w-100 d-md-none"
        >
          Ver miembros
        </button>
        <div className="suggests_widget">
          <div className="suggests_widget-header">
            <h3>Miembros</h3>
          </div>
          {members.map((member) => (
            <MemberTemplate
              key={member.id}
              member={member}
              handleAction={handleAction}
            />
          ))}
        </div>
      </div>
    </>
  )
}

export default GroupMembers