Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { axios } from '../../../../../utils'
import { addNotification } from '../../../../../redux/notification/notification.actions'
import Avatar from '../../../../../shared/Avatar/Avatar'
import { useDispatch } from 'react-redux'
import CoverModal from '../../../../../shared/profile/edit/cover-section/CoverModal'
import { profileTypes } from '../../../../../shared/profile/Profile.types'
import EditIcon from '@mui/icons-material/EditOutlined'

const GroupActions = ({ cover, groupId, name, image, groupType, linkInmail, actionLinks, accessibility, imageProfileCover }) => {
    const [modalToShow, setModalToShow] = useState(null)
    const [coverImg, setCoverImg] = useState({ path: `/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}` })
    const dispatch = useDispatch();
    const PATH = window.location.pathname

    const closeModal = () => setModalToShow(null)

    const handleActionLink = (url) => {
        axios.post(url)
            .then(({ data }) => {
                if (!data.success) {
                    return dispatch(addNotification({ style: 'error', msg: data.data }))
                }
                addNotification({ style: 'success', msg: data.data })
                window.location.reload()
            })
            .catch(err => console.log('>>: err > ', err))
    }

    return (
        <>
            <div className="group__actions">
                <div className="group__actions-cover">
                    <img src={coverImg.path} alt='Profile cover' className='sidebar__cover' />
                    {PATH.includes('edit') &&
                        <button className='button-icon cover__edit-btn' onClick={() => setModalToShow('cover')}>
                            <EditIcon />
                        </button>
                    }
                </div>
                <div className="group__actions-body">
                    <Avatar imageUrl={`/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}`} size='xl' name={name} />
                    <h1>{name}</h1>
                    <span>{groupType}</span>
                    <div className="row" style={{ gap: '.5rem' }}>
                        {linkInmail &&
                            <a href={linkInmail} className="button btn btn-primary">
                                Contactar con el Administrador
                            </a>
                        }
                        {actionLinks?.link_accept &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_accept)}
                                className="button btn btn-primary"
                            >
                                Aceptar invitacion
                            </button>
                        }
                        {actionLinks?.link_cancel &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_cancel)}
                                className="button btn btn-secondary"
                            >
                                Cancelar invitacion
                            </button>
                        }
                        {actionLinks?.link_leave &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_leave)}
                                className="button btn btn-secondary"
                            >
                                Abandonar grupo
                            </button>
                        }
                        {actionLinks?.link_request &&
                            <button
                                onClick={() => handleActionLink(actionLinks?.link_request)}
                                className="button btn btn-primary"
                            >
                                {accessibility === 'Auto unirse' ? 'Unirse' : 'Solicitar membresia'}
                            </button>
                        }
                    </div>
                </div>
            </div>
            <CoverModal
                isModalOpen={modalToShow === 'cover'}
                coverType={profileTypes.GROUP}
                groupId={groupId}
                handleCoverSectionModalOpen={() => closeModal()}
                imageSizeCover={imageProfileCover}
                setCoverImg={(newImage) => setCoverImg(newImage)}
            />
        </>
    )
}

export default GroupActions