Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { getData } from '../../../helpers/fetchHelpers'
import { addNotification } from '../../../redux/notification/notification.actions'

const CompanySizeModal = ({
        isOpen,
        closeModal,
        companySizeUrl,
        action, 
        title
}) => {

        const { handleSubmit, register, setValue } = useForm()
        const [error, setError] = useState(null)
        const [companySizes, setCompanySizes] = useState([])
        const dispatch = useDispatch()

        const onSubmit = ({ company_size }) => {

                const data = new FormData()
                data.append('company_size_id', company_size)

                axios.post(companySizeUrl, data)
                        .then(({ data }) => {
                                if (!data.success) {
                                        typeof data.data === 'string'
                                                ?
                                                dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: data.data
                                                }))
                                                : Object.entries(data.data).map(([key, value]) =>
                                                        value.map(err =>
                                                                dispatch(addNotification({
                                                                        style: 'danger',
                                                                        msg: `${key}: ${err}`
                                                                }))
                                                        )
                                                )
                                        return
                                }
                                action(data.data)
                        })
                        .then(() => {
                                setError(null)
                                closeModal()
                        })
                        .catch((err) => console.log(err))
        }

        useEffect(() => {
                getData(companySizeUrl)
                        .then(({ company_sizes, company_size_id }) => {
                                Object.entries(company_sizes).map(([key, value]) => {
                                        setCompanySizes(prev => [...prev, { value: key, name: value }])
                                })

                                setValue('company_size', company_size_id)
                        })
        }, [isOpen])

        return (
                <Modal
                        size="md"
                        show={isOpen}
                        onHide={closeModal}
                        autoFocus={false}
                >
                        <Modal.Header closeButton>
                                <Modal.Title>Cambiar</Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Body>
                                        <div className="mb-3">
                                                <label className="form-label">{title}</label>
                                                <select
                                                        className='form-control'
                                                        name="company_size"
                                                        ref={register}
                                                >
                                                        {
                                                                companySizes.map(({ value, name }) => (
                                                                        <option key={value} value={value}>{name}</option>
                                                                ))
                                                        }
                                                </select>
                                        </div>
                                        {error && <p>{error}</p>}
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button
                                                variant="primary"
                                                type="submit"
                                        >
                                                Enviar
                                        </Button>
                                        <Button
                                                className='btn-tertiary'
                                                onClick={closeModal}
                                        >
                                                Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default CompanySizeModal