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