Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from 'react'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../../redux/notification/notification.actions'
import { axios } from '../../../../utils'

const GroupInfo = ({
    group_uuid = '',
    image = '',
    name = '',
    accessibility = '',
    total_members = '',
    link_inmail = '',
    link_accept = '',
    link_cancel = '',
    link_request = '',
    link_leave = '',
    onComplete = function () { }
}) => {

    const dispatch = useDispatch()

    const handleGroupActions = (url) => {
        axios.post(url)
            .then(({ data }) => {
                if (!data.success) {
                    dispatch(addNotification({ style: 'danger', msg: data.data }))
                    return
                }
                dispatch(addNotification({ style: 'success', msg: data.data }))
                onComplete()
            })
            .catch(err => console.log('>>: err > ', err))
    }

    return (
        <div className="user_profile border-gray overflow-hidden m-0 p-1 mb-2">
            <div className="user-pro-img">
                <img
                    src={`/storage/type/group/code/${group_uuid}/${image ? `filename/${image}` : ""}`}
                    alt="profile-image"
                />
            </div>
            <div className="user_pro_status">
                <h1 className="font-weight-bold" style={{ fontSize: '1.5rem' }} >{name}</h1>
                <ul className="flw-status">
                    <div className="container horizontal-list">
                        <div className="row ">
                            {link_inmail &&
                                <a
                                    href={link_inmail}
                                    className="btn btn-primary"
                                >
                                    Contactar con el Administrador
                                </a>
                            }
                            <div className="members_count">
                                <b style={{ fontSize: '1rem' }} >{total_members}</b>
                                <p>Miembros</p>
                            </div>
                            {link_accept &&
                                <button
                                    onClick={() => handleGroupActions(link_accept)}
                                    className="btn btn-primary"
                                >
                                    Aceptar invitacion
                                </button>
                            }
                            {link_cancel &&
                                <button
                                    onClick={() => handleGroupActions(link_cancel)}
                                    className="btn btn-primary"
                                >
                                    Cancelar invitacion
                                </button>
                            }
                            {(!link_request && link_leave) &&
                                <button
                                    onClick={() => handleGroupActions(link_leave)}
                                    className="btn btn-primary"
                                >
                                    Abandonar grupo
                                </button>
                            }
                            {link_request &&
                                <button
                                    onClick={() => handleGroupActions(link_request)}
                                    className="btn btn-primary"
                                >
                                    {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
                                </button>
                            }
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    )
}

export default GroupInfo