Rev 6908 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { useLocation, useParams } from 'react-router-dom'
import { addNotification } from '../../redux/notification/notification.actions'
import EditIcon from '@mui/icons-material/EditOutlined'
import IconButton from '@mui/material/IconButton'
import Avatar from '../UI/AvatarImage'
import CoverModal from '../cover/CoverModal'
import ImageModal from '../modals/ImageModal'
import { styled } from 'styled-components'
const CoverButton = styled(IconButton)`
color: #8a2be2 !important;
position: absolute !important;
right: 20px;
top: 20px;
transition: all 200ms ease;
&:hover {
background-color: #8a2be2 !important;
color: #fff !important;
}
`
const GroupActions = ({
cover,
name,
image,
groupType,
accessibility,
coverSize,
imageSize,
linkInmail,
linkAccept,
linkCancel,
linkLeave,
linkRequest,
refetch,
}) => {
const [profileImg, setProfileImg] = useState('')
const [coverImg, setCoverImg] = useState('')
const [isEdit, setIsEdit] = useState(false)
const [modalToShow, setModalToShow] = useState(null)
const { pathname } = useLocation()
const { uuid } = useParams()
const dispatch = useDispatch()
const closeModal = () => {
setModalToShow(null)
}
const handleActionLink = (url) => {
axios
.post(url)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
dispatch(addNotification({ style: 'danger', msg: data }))
return
}
refetch()
dispatch(addNotification({ style: 'success', msg: data }))
})
.catch((err) => console.log('>>: err > ', err))
}
useEffect(() => {
setIsEdit(pathname.includes('edit'))
}, [pathname])
useEffect(() => {
setCoverImg(
`/storage/type/group-cover/code/${uuid}${
cover ? `/filename/${cover}` : '/'
}`
)
setProfileImg(
`/storage/type/group/code/${uuid}${image ? `/filename/${image}` : '/'}`
)
}, [cover, image])
return (
<>
<div className="group__actions">
<div
className="group__actions-cover position-relative"
style={{ height: '300px' }}
>
<img src={coverImg} alt="Profile cover" className="sidebar__cover" />
{isEdit && (
<CoverButton onClick={() => setModalToShow('cover')}>
<EditIcon />
</CoverButton>
)}
</div>
<div className="group__actions-body">
<div className="card__image-options">
{isEdit ? (
<img
alt="Profile Image"
className={`img ${isEdit && 'cursor-pointer'}`}
src={profileImg}
onClick={() => isEdit && setModalToShow('image')}
style={{ zIndex: 10 }}
/>
) : (
<Avatar imageUrl={profileImg} 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>
)}
{linkAccept && (
<button
onClick={() => handleActionLink(linkAccept)}
className="button btn btn-primary"
>
Aceptar invitacion
</button>
)}
{linkCancel && (
<button
onClick={() => handleActionLink(linkCancel)}
className="button btn btn-secondary"
>
Cancelar invitacion
</button>
)}
{linkLeave && (
<button
onClick={() => handleActionLink(linkLeave)}
className="button btn btn-secondary"
>
Abandonar grupo
</button>
)}
{linkRequest && (
<button
onClick={() => handleActionLink(linkRequest)}
className="button btn btn-primary"
>
{accessibility === 'Auto unirse'
? 'Unirse'
: 'Solicitar membresia'}
</button>
)}
</div>
</div>
</div>
<CoverModal
isOpen={modalToShow === 'cover'}
sizes={coverSize}
onClose={() => closeModal()}
onComplete={(newImage) => setCoverImg(newImage)}
/>
<ImageModal
show={modalToShow === 'image'}
id={uuid}
sizes={imageSize}
onClose={() => closeModal()}
onComplete={(newImage) => setProfileImg(newImage)}
/>
</>
)
}
export default GroupActions