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;