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>

  );

}