Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
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 AddMemberModal from '../../../../../shared/helpers/group-members-helper/AddMemberModal'
import MembersModal from '../../../../../shared/helpers/group-members-helper/MembersModal'
import Avatar from "../../../../../shared/Avatar/Avatar";

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;