Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';
import { Typography } from '@mui/material';

import { useAlert, useApi, useModal } from '@shared/hooks';
import { handleActionLink } from '@groups/services';

import Cover from '@components/UI/cover/Cover';
import { Card, CardContent, CardActions, Button, Avatar } from '@shared/components';
import { GroupImageForm } from '../group-image-form';

export function GroupCard({ uuid, group, updateGroup = () => {}, edit = false }) {
  const { showSuccess, showError } = useAlert();
  const { showModal, closeModal } = useModal();

  const {
    cover,
    name,
    image,
    group_type,
    accessibility,
    image_size_cover,
    image_size_profile,
    link_inmail,
    link_accept,
    link_cancel,
    link_leave,
    link_request
  } = group;

  const editImage = () => {
    showModal(
      'Cambiar imagen de grupo',
      <GroupImageForm
        sizes={image_size_profile}
        uuid={uuid}
        onSubmit={(image) => {
          updateGroup({ ...group, image });
          closeModal();
        }}
      />
    );
  };

  const { execute } = useApi(handleActionLink, {
    onSuccess: (message) => {
      showSuccess(message);
      updateGroup();
    },
    onError: (error) => {
      showError(error.message);
    }
  });

  return (
    <Card>
      <Cover
        cover={cover}
        sizes={image_size_cover}
        uploadUrl={`group/my-groups/cover/${uuid}/operation/upload`}
        edit={edit}
      />

      <CardContent>
        <Avatar
          src={image}
          alt={name}
          size={150}
          sizes={image_size_profile}
          edit={edit}
          badgeStyle={{ mt: '-75px' }}
          onEdit={editImage}
        />
        <Typography variant='h2'>{name}</Typography>
        <Typography variant='overline'>{group_type}</Typography>
      </CardContent>

      {link_inmail ||
        link_accept ||
        link_cancel ||
        link_leave ||
        (link_request && (
          <CardActions>
            {link_inmail && (
              <Button color='primary' LinkComponent={Link} to={link_inmail}>
                Contactar con el Administrador
              </Button>
            )}
            {link_accept && (
              <Button color='primary' onClick={() => execute(link_accept)}>
                Aceptar invitacion
              </Button>
            )}
            {link_cancel && (
              <Button color='secondary' onClick={() => execute(link_cancel)}>
                Cancelar invitacion
              </Button>
            )}
            {link_leave && (
              <Button color='secondary' onClick={() => execute(link_leave)}>
                Abandonar grupo
              </Button>
            )}
            {link_request && (
              <Button color='primary' onClick={() => execute(link_request)}>
                {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
              </Button>
            )}
          </CardActions>
        ))}
    </Card>
  );
}