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;