Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6753 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6753 stevensc 1 
import React, { useEffect, useState, useRef } from 'react'
2 
import { axios } from '../../../utils'
3 
import { useForm } from 'react-hook-form'
4 
import { Button, Modal } from 'react-bootstrap'
5 
import { useDispatch, useSelector } from 'react-redux'
6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
 
8 
import Spinner from '../UI/Spinner'
9 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
10 
import FormErrorFeedback from '../UI/FormErrorFeedback'
11 
 
6781 stevensc 12 
const LocationModal = ({ onClose, show, id, onComplete }) => {
6753 stevensc 13 
  const [modalLoading, setModalLoading] = useState(false)
14 
  const labels = useSelector(({ intl }) => intl.labels)
15 
  const dispatch = useDispatch()
16 
 
17 
  const {
18 
    register,
19 
    errors,
20 
    handleSubmit,
21 
    setValue,
22 
    clearErrors,
23 
    getValues,
24 
    watch,
25 
    setError,
26 
  } = useForm()
27 
 
28 
  const isAddressEmpty = useRef(true)
29 
  const addressKeys = useRef([
30 
    'address1',
31 
    'address2',
32 
    'country',
33 
    'state',
34 
    'city1',
35 
    'city2',
36 
    'postal_code',
37 
    'latitude',
38 
    'longitude',
39 
  ])
40 
 
41 
  const handleModalOpen = (event) => {
42 
    event && event.preventDefault()
43 
    Object.keys(getValues()).map(([key]) => setValue(key, ''))
6781 stevensc 44 
    onClose()
6753 stevensc 45 
  }
46 
 
47 
  const getAddressHandler = (addresObject) => {
48 
    addressKeys.current.map((addressKey) => {
49 
      setValue(addressKey, '')
50 
    })
51 
    const { address_components } = addresObject
52 
    if (address_components) {
53 
      address_components.map((address_component) => {
54 
        const address_component_name = address_component.long_name
55 
        const address_component_type = address_component.types[0]
56 
        switch (address_component_type) {
57 
          case 'route':
58 
            setValue('address1', address_component_name)
59 
            break
60 
          case 'sublocality':
61 
            setValue('address2', address_component_name)
62 
            break
63 
          case 'locality':
64 
            setValue('city1', address_component_name)
65 
            break
66 
          case 'administrative_area_level_2':
67 
            setValue('city2', address_component_name)
68 
            break
69 
          case 'administrative_area_level_1':
70 
            setValue('state', address_component_name)
71 
            break
72 
          case 'country':
73 
            setValue('country', address_component_name)
74 
            break
75 
          case 'postal_code':
76 
            setValue('postal_code', address_component_name)
77 
            break
78 
          case 'geometry':
79 
            setValue('latitude', address_component.latitude)
80 
            setValue('longitude', address_component.longitude)
81 
            break
82 
          default:
83 
            break
84 
        }
85 
      })
86 
      isAddressEmpty.current = false
87 
      clearErrors('formatted_address')
88 
    } else {
89 
      isAddressEmpty.current = true
90 
    }
91 
    setValue('formatted_address', addresObject.formatted_address)
92 
  }
93 
 
94 
  const onSubmitHandler = async (data) => {
95 
    setModalLoading(true)
96 
    const formData = new FormData()
97 
    Object.entries(data).map(([key, value]) => {
98 
      formData.append(key, value)
99 
    })
100 
    await axios
6781 stevensc 101 
      .post(`/profile/my-profiles/location/${id}`, formData)
6753 stevensc 102 
      .then((response) => {
103 
        const resData = response.data
104 
        if (resData.success) {
6781 stevensc 105 
          onComplete(resData.data.formatted_address)
6753 stevensc 106 
          handleModalOpen()
107 
        } else {
108 
          const resError = resData.data
109 
          if (resError.constructor.name === 'Object') {
110 
            Object.entries(resError).map(([key, value]) => {
111 
              if (key in getValues()) {
112 
                setError(key, {
113 
                  type: 'manual',
114 
                  message: Array.isArray(value) ? value[0] : value,
115 
                })
116 
              }
117 
            })
118 
          } else {
119 
            dispatch(addNotification({ style: 'danger', msg: resError }))
120 
          }
121 
        }
122 
      })
123 
    setModalLoading(false)
124 
  }
125 
 
126 
  useEffect(() => {
127 
    addressKeys.current.map((addressKey) => {
128 
      register(addressKey)
129 
    })
130 
    register('formatted_address', {
131 
      required: 'por favor seleccione una ubicación correcta',
132 
    })
133 
  }, [])
134 
 
135 
  return (
6781 stevensc 136 
    <Modal show={show} onHide={handleModalOpen}>
6753 stevensc 137 
      <Modal.Header closeButton>
138 
        <Modal.Title>{labels.location}</Modal.Title>
139 
      </Modal.Header>
140 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
141 
        <Modal.Body>
142 
          <div className="form-group datefm">
143 
            <UbicationInput
144 
              onGetAddress={getAddressHandler}
145 
              settedQuery={watch('formatted_address')}
146 
            />
147 
            <i className="fa fa-map-marker"></i>
148 
            {errors.formatted_address && (
149 
              <FormErrorFeedback>
150 
                {errors.formatted_address.message}
151 
              </FormErrorFeedback>
152 
            )}
153 
          </div>
154 
        </Modal.Body>
155 
        <Modal.Footer>
156 
          <Button size="sm" type="submit">
157 
            {labels.accept}
158 
          </Button>
159 
          <Button size="sm" variant="danger" onClick={handleModalOpen}>
160 
            {labels.cancel}
161 
          </Button>
162 
        </Modal.Footer>
163 
      </form>
164 
      {modalLoading && <Spinner />}
165 
    </Modal>
166 
  )
167 
}
168 
 
169 
export default LocationModal