Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useState } from 'react'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'

const CoverModal = ({
        isOpen,
        closeModal,
        coverUploadUrl,
        action
}) => {

        const { handleSubmit, register } = useForm()
        const [error, setError] = useState(null)

        const onSubmit = ({ cover }) => {
                const data = new FormData()
                data.append('cover', cover[0])
                axios.post(coverUploadUrl, data)
                        .then(({ data }) => {
                                if (!data.success) {
                                        return setError(data.data)
                                }
                                action(data.data)
                                setError(null)
                                closeModal()
                        })
                        .catch((err) => console.log(err))
        }

        return (
                <Modal
                        size="md"
                        show={isOpen}
                        onHide={closeModal}
                        autoFocus={false}
                >
                        <Modal.Header closeButton>
                                <Modal.Title>Cambiar</Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Body>
                                        <div className="mb-3">
                                                <label htmlFor="formFileSm" className="form-label">Imagen recomendada de (2480 x 268px)</label>
                                                <input
                                                        className="form-control form-control-sm"
                                                        id="formFileSm"
                                                        type="file"
                                                        name="cover"
                                                        accept='.jpg, .jpeg, .png, .gif'
                                                        ref={register}
                                                        style={{ padding: '1px' }}
                                                />
                                        </div>
                                        {error && <p>{error}</p>}
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button
                                                variant="primary"
                                                type="submit"
                                        >
                        Enviar
                                        </Button>
                                        <Button
                                                className='btn-tertiary'
                                                onClick={closeModal}
                                        >
                        Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default CoverModal