Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15271 | Rev 15273 | 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'
15271 stevensc 2 
import React 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 
 
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()
22 
		data.append('cover', cover[0])
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) => {
15272 stevensc 49 
		console.log(file)
15267 stevensc 50 
		setValue('cover', file)
51 
		clearErrors('cover')
52 
	}
53 
 
54 
	useEffect(() => {
55 
		if (getValues('cover')) setValue('cover', '')
56 
	}, [isOpen])
57 
 
58 
	useEffect(() => {
15271 stevensc 59 
		register('cover', { required: true })
60 
	}, [])
15267 stevensc 61 
 
11152 stevensc 62 
	return (
63 
		<Modal
64 
			size="md"
65 
			show={isOpen}
66 
			onHide={closeModal}
67 
			autoFocus={false}
68 
		>
69 
			<Modal.Header closeButton>
15267 stevensc 70 
				<Modal.Title>Portada</Modal.Title>
11152 stevensc 71 
			</Modal.Header>
72 
			<form onSubmit={handleSubmit(onSubmit)}>
73 
				<Modal.Body>
15266 stevensc 74 
					<div className="form-group">
15267 stevensc 75 
						<DropzoneComponent
76 
							modalType='IMAGE'
77 
							onUploaded={onUploadedHandler}
78 
							settedFile={getValues('cover')}
79 
							recomendationText='Imagen recomendada de (2480 x 268px)'
11152 stevensc 80 
						/>
81 
					</div>
15271 stevensc 82 
					{errors.cover && <p>Este campo es requerido</p>}
11152 stevensc 83 
				</Modal.Body>
84 
				<Modal.Footer>
85 
					<Button
86 
						variant="primary"
87 
						type="submit"
88 
					>
14843 stevensc 89 
						Enviar
11152 stevensc 90 
					</Button>
91 
					<Button
92 
						className='btn-tertiary'
93 
						onClick={closeModal}
94 
					>
14843 stevensc 95 
						Cancelar
11152 stevensc 96 
					</Button>
97 
				</Modal.Footer>
98 
			</form>
99 
		</Modal >
100 
	)
5949 stevensc 101 
}
102 
 
103 
export default CoverModal