Proyectos de Subversion LeadersLinked - Backend

import React from 'react'
import { useState } from 'react'
import SearchLocationInput from '../../../shared/SearchLocationInput'
import { addNotification } from '../../../redux/notification/notification.actions'
import axios from 'axios'
import { useDispatch } from 'react-redux'
import { Modal } from 'react-bootstrap'

const LocationModal = ({
        closeModal,
        dataLink,
        googleApiKey,
        defaultData = '',
        onComplete = function () { }
}) => {

        const [isActive, setIsActive] = useState((defaultData.is_main === 'y') ? true : false)
        const [value, setValue] = useState(defaultData.formatted_address)
        const [data, setData] = useState({})
        const dispatch = useDispatch()

        const onSubmit = () => {
                const values = Object.values(data)

                if (!values.length) {
                        return dispatch(addNotification({
                                style: 'danger',
                                msg: 'El campo no puede estar vacio.'
                        }))
                }

                const formData = new FormData()
                Object.entries({ ...data, is_main: isActive ? 'y' : 'n' }).forEach((entries) => {
                        formData.append(entries[0], entries[1])
                })

                axios.post(dataLink, formData)
                        .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
                                }

                                onComplete(data.data)
                                dispatch(addNotification({
                                        style: 'success',
                                        msg: 'Registro actualizado'
                                }))
                                closeModal()
                        })
                        .catch((err) => console.log(err))
        }

        return (
                <Modal size="md" show onHide={closeModal}>
                        <Modal.Header closeButton>
                                <Modal.Title>Ubicación</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                                <div className='form-group'>
                                        <SearchLocationInput
                                                value={value}
                                                setValue={setValue}
                                                googleApiKey={googleApiKey}
                                                updateData={setData}
                                        />
                                        <div
                                                className={`toggle btn btn-primary ${!isActive && 'off'}`}
                                                data-toggle="toggle"
                                                role="button"
                                                style={{ width: '130px' }}
                                                onClick={() => setIsActive(!isActive)}
                                        >
                                                <input
                                                        type="checkbox"
                                                        checked={isActive}
                                                />
                                                <div className="toggle-group">
                                                        <label htmlFor="status" className="btn btn-primary toggle-on">Principal</label>
                                                        <label htmlFor="status" className="btn btn-light toggle-off">Secundaria</label>
                                                        <span className="toggle-handle btn btn-light"></span>
                                                </div>
                                        </div>
                                </div>
                        </Modal.Body>
                        <Modal.Footer>
                                <button
                                        className="btn btn-primary"
                                        type="submit"
                                        onClick={onSubmit}
                                >
                                        Enviar
                                </button>
                                <button
                                        className='btn btn-tertiary'
                                        onClick={closeModal}
                                >
                                        Cancelar
                                </button>
                        </Modal.Footer>
                </Modal >
        )
}
export default LocationModal