Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { Avatar, AvatarGroup, Button } from '@mui/material';
import { East } from '@mui/icons-material';

import { axios } from '@utils';
import { useFetch } from '@hooks';
import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';
import MembersModal from '@components/modals/MembersModal';
import AddMemberModal from '@components/modals/AddMemberModal';

const Members = ({ id = '' }) => {
  const {
    data: { items: members, link_invite: linkInvite },
    refetch
  } = useFetch(`/helpers/group-members/${id}`);

  const [addModalShow, setAddModalShow] = useState(false);
  const [showMembersModal, setShowMembersModal] = useState(false);

  const dispatch = useDispatch();

  const handleAction = (url) => {
    const params = new FormData();
    axios
      .post(url, params)
      .then((response) => {
        const { data, success } = response.data;

        if (!success) {
          throw new Error(data);
        }

        dispatch(addNotification({ style: 'success', msg: data }));
      })
      .then(() => refetch())
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  };

  const toggleAddMemberModal = () => setAddModalShow(!addModalShow);

  const toggleMembersModal = () => setShowMembersModal(!showMembersModal);

  return (
    <>
      <Widget>
        <Widget.Header title={`${members?.length ?? 0} Miembros`} />

        <Widget.Body>
          <AvatarGroup max={5}>
            {members?.map(({ name, image }) => (
              <Avatar key={name} src={image} alt={name} />
            ))}
          </AvatarGroup>
          {linkInvite && (
            <Button color='primary' onClick={toggleAddMemberModal} sx={{ marginTop: 1 }}>
              Invitar miembros
            </Button>
          )}
        </Widget.Body>
        <Widget.Actions styles={{ padding: 0 }}>
          <Button onClick={toggleMembersModal} fullWidth sx={{ borderRadius: 0 }}>
            Ver más
            <East />
          </Button>
        </Widget.Actions>
      </Widget>
      <AddMemberModal
        isShow={addModalShow}
        handleClose={toggleAddMemberModal}
        linkInvite={linkInvite}
      />
      <MembersModal
        isShow={showMembersModal}
        handleClose={toggleMembersModal}
        members={members}
        handleAction={handleAction}
      />
    </>
  );
};

export default Members;