Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React from "react";

import { useEffect, useState } from "react";

import { addNotification } from "../../../redux/notification/notification.actions";

import { axios } from "../../../utils";

import AddMemberModal from "./AddMemberModal";

import MembersModal from "./MembersModal";

import MemberTemplate from "./MemberTemplate";

const GroupMembersHelper = ({ show = false, groupId, handleFirstLinkInvite }) => {

  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)

          handleFirstLinkInvite(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()

  }

  return (

    <React.Fragment>

      <AddMemberModal

        isShow={addModalShow}

        handleClose={closeAddModal}

        linkInvite={linkInvite}

      />

      <MembersModal

        isShow={showMembersModal}

        handleClose={() => setShowMembersModal(!showMembersModal)}

        members={members}

        handleAction={handleAction}

      />

      <div className={`members-container ${show ? 'd-block' : 'd-none d-md-inline-block'} w-100 overflow-hidden`}>

        <div className="sd-title">

          {!!linkInvite &&

            <button

              onClick={() => setAddModalShow(!addModalShow)}

              className="btn btn-primary btn-sm"

            >

              Añadir miembros

            </button>

          }

          <button

            onClick={() => setShowMembersModal(!showMembersModal)}

            className="btn btn-primary btn-sm d-block d-md-none"

          >

            Ver miembros

          </button>

          <h3 className="pt-2 pb-2">Miembros</h3>

        </div>

        {

          members.map((member) =>

            <MemberTemplate

              key={member.id}

              member={member}

              handleAction={handleAction}

            />

          )

        }

      </div>

    </React.Fragment>

  );

};

export default GroupMembersHelper;