Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Button, Typography } from '@mui/material';

import { axios } from '@utils';
import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';
import Cover from '@components/UI/cover/Cover';
import Avatar from '@components/common/avatar';
import Row from '@components/common/Row';

const GroupActions = ({
  cover,
  name,
  image,
  group_type,
  accessibility,
  image_size_cover,
  image_size_profile,
  link_inmail,
  link_accept,
  link_cancel,
  link_leave,
  link_request,
  refetch,
  edit = false
}) => {
  const { uuid } = useParams();
  const dispatch = useDispatch();

  const handleActionLink = async (url) => {
    try {
      const response = await axios.post(url);
      const { data, success } = response.data;

      if (!success) {
        const errMsg =
          typeof data === 'string' ? data : 'Lo sentimos, ocurrio un error. Intentalo mas tarde.';
        throw new Error(errMsg);
      }

      refetch();
      dispatch(addNotification({ style: 'success', msg: data }));
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  return (
    <>
      <Widget>
        <Cover
          cover={cover}
          sizes={image_size_cover}
          uploadUrl={`group/my-groups/cover/${uuid}/operation/upload`}
          edit={edit}
        />
        <Widget.Body>
          <Avatar
            src={image}
            alt={name}
            badgeStyles={{ mt: '-75px' }}
            styles={{ width: 150, height: 150 }}
            edit={edit}
            size={image_size_profile}
            uploadUrl={`group/my-groups/image/${uuid}/operation/upload`}
          />
          <Typography variant='h2'>{name}</Typography>
          <Typography variant='overline'>{group_type}</Typography>

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

export default GroupActions;