Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2781 | Rev 3432 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2781 stevensc 1
import React, { useEffect, useState } from 'react'
2
import { connect } from 'react-redux'
3
import { useForm } from 'react-hook-form'
4
import { styled } from '@mui/material'
5
 
6
import { axios } from 'utils'
7
import { addNotification } from '@app/redux/notification/notification.actions'
8
 
9
import Spinner from '@components/UI/Spinner'
10
import UbicationInput from '@components/UI/inputs/UbicationInput'
11
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'
12
 
13
const StyledSpinnerContainer = styled('div')`
14
  position: absolute;
15
  left: 0;
16
  top: 0;
17
  width: 100%;
18
  height: 100%;
19
  background: rgba(255, 255, 255, 0.4);
20
  display: flex;
21
  justify-content: center;
22
  align-items: center;
23
  z-index: 300;
24
`
25
 
26
const Location = ({ addNotification }) => {
27
  const [loading, setLoading] = useState(false)
28
 
29
  const {
30
    register,
31
    handleSubmit,
32
    setValue,
33
    clearErrors,
34
    watch,
2802 stevensc 35
    setError,
36
    formState: { errors }
2781 stevensc 37
  } = useForm()
38
 
39
  const getLocations = () => {
40
    axios
41
      .get('account-settings/location')
42
      .then(({ data: responseData }) => {
43
        const { data, success } = responseData
44
 
45
        if (!success) {
46
          throw new Error('Error interno. Por favor, intente mas tarde')
47
        }
48
 
49
        Object.entries(data).forEach(([key, value]) => {
50
          setValue(key, value)
51
        })
52
      })
53
      .catch((err) => {
54
        addNotification({ style: 'danger', msg: err.message })
55
      })
56
  }
57
 
58
  const getAddress = (address) => {
59
    Object.entries(address).forEach(([key, value]) => {
60
      if (value) {
61
        register(key)
62
        clearErrors(key)
63
        setValue(key, value)
64
      }
65
    })
66
  }
67
 
68
  const onSubmit = async (data) => {
69
    setLoading(true)
70
    const formData = new FormData()
71
    Object.entries(data).forEach(([key, value]) => formData.append(key, value))
72
 
73
    axios
74
      .post('/account-settings/location', formData)
75
      .then(({ data: responseData }) => {
76
        const { data, success } = responseData
77
 
78
        if (success) {
79
          addNotification({
80
            style: 'success',
81
            msg: data.message
82
          })
83
        } else {
84
          if (typeof data === 'object') {
85
            Object.entries(data).forEach(([key, value]) => {
86
              setError(key, { type: 'manual', message: value[0] })
87
            })
88
          } else {
89
            const errorMessage =
90
              typeof data === 'string'
91
                ? data
92
                : 'Ha ocurrido un error, Por favor intente mas tarde'
93
            addNotification({
94
              style: 'danger',
95
              msg: errorMessage
96
            })
97
          }
98
        }
99
      })
100
    setLoading(false)
101
  }
102
 
103
  useEffect(() => {
104
    getLocations()
105
 
106
    register('formatted_address', {
107
      required: 'por favor seleccione una ubicación correcta'
108
    })
109
  }, [])
110
 
111
  return (
112
    <div className='settings-container'>
113
      <h2>Cambiar Ubicación</h2>
114
      <div className='acc-setting_content'>
115
        <form onSubmit={handleSubmit(onSubmit)}>
116
          <div className='d-flex flex-wrap' style={{ gap: '1rem' }}>
117
            <div className='cp-field cp-field2'>
118
              <label htmlFor='first_name'>Ubicación</label>
119
              <div className='cpp-fiel'>
120
                <UbicationInput
121
                  onGetAddress={getAddress}
122
                  settedQuery={watch('formatted_address')}
123
                />
124
                <i className='fa fa-map-marker'></i>
125
              </div>
126
              {
127
                <FormErrorFeedback>
128
                  {errors?.formatted_address?.message}
129
                </FormErrorFeedback>
130
              }
131
            </div>
132
            <div className='col-2 mx-auto d-flex align-items-center justify-content-center'>
133
              <button type='submit' className='btn btn-secondary mt-3'>
134
                Guardar
135
              </button>
136
            </div>
137
          </div>
138
        </form>
139
      </div>
140
      {loading && (
141
        <StyledSpinnerContainer>
142
          <Spinner />
143
        </StyledSpinnerContainer>
144
      )}
145
    </div>
146
  )
147
}
148
 
149
const mapDispatchToProps = {
150
  addNotification: (notification) => addNotification(notification)
151
}
152
 
153
export default connect(null, mapDispatchToProps)(Location)