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;