Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { East } from '@mui/icons-material';

import { useAlert, useApi, useModal } from '@shared/hooks';
import {
  approveMember,
  cancelInvitation,
  getGroupMembers,
  inviteMember,
  rejectMember
} from '@groups/services';

import {
  Card,
  CardHeader,
  CardContent,
  CardActions,
  Button,
  AvatarGroup,
  Avatar,
  SearchUserModal,
  Spinner
} from '@shared/components';
import { MembersModal } from '@groups/components';

export function Members({ uuid = '' }) {
  const { showSuccess, showError } = useAlert();
  const { showModal, closeModal } = useModal();

  const {
    data,
    loading,
    execute: getMembers
  } = useApi(getGroupMembers, {
    autoFetch: true,
    autoFetchArgs: [uuid],
    onError: (error) => showError(error.message)
  });

  const { execute: invite } = useApi(inviteMember, {
    onSuccess: (message) => {
      showSuccess(message);
      getMembers();
    },
    onError: (error) => {
      showError(error.message);
    }
  });

  const { execute: approve } = useApi(approveMember, {
    onSuccess: (message) => {
      closeModal();
      showSuccess(message);
      getMembers();
    },
    onError: (error) => {
      showError(error.message);
    }
  });

  const { execute: reject } = useApi(rejectMember, {
    onSuccess: (message) => {
      closeModal();
      showSuccess(message);
      getMembers();
    },
    onError: (error) => {
      showError(error.message);
    }
  });

  const { execute: cancel } = useApi(cancelInvitation, {
    onSuccess: (message) => {
      closeModal();
      showSuccess(message);
      getMembers();
    },
    onError: (error) => {
      showError(error.message);
    }
  });

  const handleInvite = () => {
    showModal(
      'Invitar miembros',
      <SearchUserModal
        renderAction={(user) => (
          <Button color='primary' onClick={() => invite(data.link_invite, user.uuid)}>
            Invitar
          </Button>
        )}
      />
    );
  };

  const showMembers = () => {
    showModal(
      'Miembros',
      <MembersModal members={data.items} onApprove={approve} onReject={reject} onCancel={cancel} />
    );
  };

  if (loading || !data) return <Spinner />;

  return (
    <Card>
      <CardHeader title={`${data.items.length} Miembros`} />
      <CardContent>
        <AvatarGroup max={5}>
          {data.items.map(({ name, image, uuid }) => (
            <Avatar key={uuid} src={image} alt={name} size={50} />
          ))}
        </AvatarGroup>
        {data.link_invite && (
          <Button color='primary' onClick={handleInvite} sx={{ marginTop: 1 }}>
            Invitar miembros
          </Button>
        )}
      </CardContent>
      <CardActions sx={{ padding: 0 }}>
        <Button onClick={showMembers} fullWidth sx={{ borderRadius: 0 }}>
          Ver más
          <East />
        </Button>
      </CardActions>
    </Card>
  );
}