Rev 1906 | Rev 1921 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState, useEffect } from 'react'
import { Box, IconButton } from '@mui/material'
import { Edit } from '@mui/icons-material'
import { axios } from '@app/utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '@app/redux/notification/notification.actions'
import CoverModal from './CoverModal'
const Cover = ({
cover: defaultCover = '/images/no_cover.jpg',
sizes = '',
edit = false,
editUrl = ''
}) => {
const [cover, setCover] = useState('')
const [showModal, setShowModal] = useState(false)
const dispatch = useDispatch()
const toggleModal = () => setShowModal(!showModal)
const onCoverChange = (cover) => {
const formData = new FormData()
formData.append('cover', cover)
axios
.post(editUrl, formData)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage =
typeof data === 'string' ? data : 'Intente mas tarde'
throw new Error(errorMessage)
}
setCover(data)
toggleModal()
})
.catch((error) => {
console.log(error)
dispatch(addNotification({ style: 'danger', msg: error.message }))
})
}
useEffect(() => {
setCover(defaultCover)
}, [defaultCover])
return (
<>
<Box
sx={{
width: '100%',
maxHeight: '300px',
position: 'relative',
overflow: 'hidden',
'& img': {
width: '100%',
maxHeight: '300px',
objectFit: 'cover'
}
}}
>
<img src={cover} alt='Profile cover' />
{edit && (
<IconButton
sx={{
position: 'absolute',
top: '20px',
right: '20px',
backgroundColor: '#fff',
color: 'blueviolet'
}}
onClick={toggleModal}
>
<Edit />
</IconButton>
)}
</Box>
<CoverModal
show={showModal}
sizes={sizes}
onClose={toggleModal}
onConfirm={onCoverChange}
/>
</>
)
}
export default Cover