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 ImageModal from '../../../../../shared/profile/edit/profile-info/profile-img/ImageModal'

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, imageSizeCover }) => {

    const [modalToShow, setModalToShow] = useState(null)

    const [coverImg, setCoverImg] = useState({ path: `/storage/type/group-cover/code/${groupId}/${cover ? `filename/${cover}` : ""}` })

    const [profileImg, setProfileImg] = useState({ path: `/storage/type/group/code/${groupId}/${image ? `filename/${image}` : ""}` })

    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 position-relative" style={{height: '300px'}}>

                    <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">

                    <div className='card__image-options'>

                        {PATH.includes('edit')

                            ? <img

                                alt='Profile Image'

                                className={`img ${PATH.includes('edit') && 'cursor-pointer'}`}

                                src={profileImg.path}

                                onClick={() => PATH.includes('edit') && setModalToShow('image')}

                                style={{ zIndex: 10 }}

                            />

                            : <Avatar imageUrl={profileImg.path} size='xl' name={name} />

                        }

                    </div>

                    <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={imageSizeCover}

                setCoverImg={(newImage) => setCoverImg(newImage)}

            />

            <ImageModal

                handleModalOpen={() => closeModal()}

                isModalOpen={modalToShow === 'image'}

                groupId={groupId}

                imageProfileCover={imageProfileCover}

                profileType={profileTypes.GROUP}

                setProfileImg={(newImage) => setProfileImg(newImage)}

            />

        </>

    )

}

export default GroupActions