Proyectos de Subversion LeadersLinked - Backend

Rev

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

Rev Autor Línea Nro. Línea
6478 stevensc 1 
import axios from 'axios'
2 
import React, { useEffect, useState } from 'react'
3 
import { Modal, Button } from 'react-bootstrap'
8516 stevensc 4 
import { useForm } from 'react-hook-form'
14843 stevensc 5 
import { useDispatch } from 'react-redux'
6478 stevensc 6 
import { getData } from '../../../helpers/fetchHelpers'
14843 stevensc 7 
import { addNotification } from '../../../redux/notification/notification.actions'
6478 stevensc 8 
 
8520 stevensc 9 
const CompanySizeModal = ({
11152 stevensc 10 
	isOpen,
11 
	closeModal,
12 
	companySizeUrl,
15227 stevensc 13 
	action,
15063 stevensc 14 
	title
6478 stevensc 15 
}) => {
16 
 
14524 stevensc 17 
	const { handleSubmit, register, setValue } = useForm()
11152 stevensc 18 
	const [error, setError] = useState(null)
19 
	const [companySizes, setCompanySizes] = useState([])
14843 stevensc 20 
	const dispatch = useDispatch()
6478 stevensc 21 
 
11152 stevensc 22 
	const onSubmit = ({ company_size }) => {
8516 stevensc 23 
 
11152 stevensc 24 
		const data = new FormData()
25 
		data.append('company_size_id', company_size)
6478 stevensc 26 
 
11152 stevensc 27 
		axios.post(companySizeUrl, data)
28 
			.then(({ data }) => {
29 
				if (!data.success) {
14843 stevensc 30 
					typeof data.data === 'string'
31 
						?
32 
						dispatch(addNotification({
33 
							style: 'danger',
34 
							msg: data.data
35 
						}))
36 
						: Object.entries(data.data).map(([key, value]) =>
37 
							value.map(err =>
38 
								dispatch(addNotification({
39 
									style: 'danger',
40 
									msg: `${key}: ${err}`
41 
								}))
42 
							)
43 
						)
44 
					return
11152 stevensc 45 
				}
46 
				action(data.data)
47 
			})
48 
			.then(() => {
49 
				setError(null)
50 
				closeModal()
51 
			})
52 
			.catch((err) => console.log(err))
53 
	}
6478 stevensc 54 
 
11152 stevensc 55 
	useEffect(() => {
56 
		getData(companySizeUrl)
57 
			.then(({ company_sizes, company_size_id }) => {
58 
				Object.entries(company_sizes).map(([key, value]) => {
59 
					setCompanySizes(prev => [...prev, { value: key, name: value }])
60 
				})
8516 stevensc 61 
 
11152 stevensc 62 
				setValue('company_size', company_size_id)
63 
			})
64 
	}, [isOpen])
6478 stevensc 65 
 
11152 stevensc 66 
	return (
67 
		<Modal
68 
			size="md"
69 
			show={isOpen}
70 
			onHide={closeModal}
71 
			autoFocus={false}
72 
		>
73 
			<Modal.Header closeButton>
15227 stevensc 74 
				<Modal.Title>{title}</Modal.Title>
11152 stevensc 75 
			</Modal.Header>
76 
			<form onSubmit={handleSubmit(onSubmit)}>
77 
				<Modal.Body>
78 
					<div className="mb-3">
15063 stevensc 79 
						<label className="form-label">{title}</label>
11152 stevensc 80 
						<select
81 
							className='form-control'
82 
							name="company_size"
83 
							ref={register}
84 
						>
85 
							{
86 
								companySizes.map(({ value, name }) => (
14524 stevensc 87 
									<option key={value} value={value}>{name}</option>
11152 stevensc 88 
								))
89 
							}
90 
						</select>
91 
					</div>
92 
					{error && <p>{error}</p>}
93 
				</Modal.Body>
94 
				<Modal.Footer>
95 
					<Button
96 
						variant="primary"
97 
						type="submit"
98 
					>
14524 stevensc 99 
						Enviar
11152 stevensc 100 
					</Button>
101 
					<Button
102 
						className='btn-tertiary'
103 
						onClick={closeModal}
104 
					>
14524 stevensc 105 
						Cancelar
11152 stevensc 106 
					</Button>
107 
				</Modal.Footer>
108 
			</form>
109 
		</Modal >
110 
	)
6478 stevensc 111 
}
112 
 
8520 stevensc 113 
export default CompanySizeModal