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