Proyectos de Subversion LeadersLinked - SPA

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

              : Object.keys(data).map((key) => data[key])[0]

          throw new Error(errorMessage)

        }

        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'

        }}

      >

        <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