Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect } 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(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))
  }

  useEffect(() => {
    if (!defaultData) return
    setIsActive(defaultData.is_main === 'y' ? true : false)
    setData((prevData) => ({
      ...prevData,
      formatted_address: defaultData.formatted_address
    }))
  }, [defaultData])

  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