Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15266 | Rev 15271 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5949 stevensc 1 
import axios from 'axios'
6199 stevensc 2 
import React, { useState } from 'react'
15267 stevensc 3 
import { useEffect } from 'react'
6287 stevensc 4 
import { Modal, Button } from 'react-bootstrap'
5949 stevensc 5 
import { useForm } from 'react-hook-form'
14843 stevensc 6 
import { useDispatch } from 'react-redux'
7 
import { addNotification } from '../../../redux/notification/notification.actions'
15267 stevensc 8 
import DropzoneComponent from '../../../shared/Dropzone/DropzoneComponent'
5949 stevensc 9 
 
10 
const CoverModal = ({
11152 stevensc 11 
	isOpen,
12 
	closeModal,
13 
	coverUploadUrl,
14 
	action
5949 stevensc 15 
}) => {
16 
 
15267 stevensc 17 
	const { handleSubmit, register, getValues, setValue, clearErrors } = useForm()
11152 stevensc 18 
	const [error, setError] = useState(null)
14843 stevensc 19 
	const dispatch = useDispatch()
5949 stevensc 20 
 
11152 stevensc 21 
	const onSubmit = ({ cover }) => {
22 
		const data = new FormData()
23 
		data.append('cover', cover[0])
24 
		axios.post(coverUploadUrl, data)
25 
			.then(({ data }) => {
26 
				if (!data.success) {
14843 stevensc 27 
					typeof data.data === 'string'
28 
						?
29 
						dispatch(addNotification({
30 
							style: 'danger',
31 
							msg: data.data
32 
						}))
33 
						: Object.entries(data.data).map(([key, value]) =>
34 
							value.map(err =>
35 
								dispatch(addNotification({
36 
									style: 'danger',
37 
									msg: `${key}: ${err}`
38 
								}))
39 
							)
40 
						)
41 
					return
11152 stevensc 42 
				}
43 
				action(data.data)
44 
				setError(null)
45 
				closeModal()
46 
			})
47 
			.catch((err) => console.log(err))
48 
	}
5949 stevensc 49 
 
15267 stevensc 50 
	const onUploadedHandler = (file) => {
51 
		setValue('cover', file)
52 
		clearErrors('cover')
53 
	}
54 
 
55 
	useEffect(() => {
56 
		if (getValues('cover')) setValue('cover', '')
57 
	}, [isOpen])
58 
 
59 
	useEffect(() => {
60 
		register('cover', {
61 
			required: { value: 'true', message: 'El campo es requerido' },
62 
		})
63 
	}, [isOpen])
64 
 
11152 stevensc 65 
	return (
66 
		<Modal
67 
			size="md"
68 
			show={isOpen}
69 
			onHide={closeModal}
70 
			autoFocus={false}
71 
		>
72 
			<Modal.Header closeButton>
15267 stevensc 73 
				<Modal.Title>Portada</Modal.Title>
11152 stevensc 74 
			</Modal.Header>
75 
			<form onSubmit={handleSubmit(onSubmit)}>
76 
				<Modal.Body>
15266 stevensc 77 
					<div className="form-group">
15267 stevensc 78 
						<DropzoneComponent
79 
							modalType='IMAGE'
80 
							onUploaded={onUploadedHandler}
81 
							settedFile={getValues('cover')}
82 
							recomendationText='Imagen recomendada de (2480 x 268px)'
11152 stevensc 83 
						/>
84 
					</div>
85 
					{error && <p>{error}</p>}
86 
				</Modal.Body>
87 
				<Modal.Footer>
88 
					<Button
89 
						variant="primary"
90 
						type="submit"
91 
					>
14843 stevensc 92 
						Enviar
11152 stevensc 93 
					</Button>
94 
					<Button
95 
						className='btn-tertiary'
96 
						onClick={closeModal}
97 
					>
14843 stevensc 98 
						Cancelar
11152 stevensc 99 
					</Button>
100 
				</Modal.Footer>
101 
			</form>
102 
		</Modal >
103 
	)
5949 stevensc 104 
}
105 
 
106 
export default CoverModal