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;