Proyectos de Subversion LeadersLinked - Backend

Rev

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

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