Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15274 | | Comparar con el anterior | Ultima modificación | Ver Log |

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