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;