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 = ({ 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 (
    <>
      <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="d-none d-md-block w-100">
          <div className="sd-title">
            <h3>Miembros</h3>
          </div>
          {
            members.map((member) =>
              <MemberTemplate
                key={member.id}
                member={member}
                handleAction={handleAction}
              />
            )
          }
        </div>
      </div>
    </>
  );
};

export default GroupMembersHelper;