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;