Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2781 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2781 Rev 2782
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useEffect } from 'react'
2 
import { connect } from 'react-redux'
 2 
import { connect } from 'react-redux'
3 
import { useForm } from 'react-hook-form'
 3 
import { useForm } from 'react-hook-form'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { useFetch } from '@hooks'
 5 
import { useFetch } from '@hooks'
Línea 12... Línea 12...
12 
import SwitchInput from '@app/components/UI/SwitchInput'
 12 
import SwitchInput from '@app/components/UI/SwitchInput'
Línea 13... Línea 13...
13 
 
 13 
 
14 
const BasicSettings = ({
 14 
const BasicSettings = ({
15 
  addNotification = function () {} // Redux action
 15 
  addNotification = function () {} // Redux action
16 
}) => {
 16 
}) => {
17 
  const { data: timezones } = useFetch('/helpers/timezones', {})
 17 
  const { data: timezones } = useFetch('/helpers/timezones')
18 
  const [loading, setLoading] = useState(false)
 - 
 
Línea 19... Línea 18...
19 
  const [isAdult, setIsAdult] = useState(false)
 18 
  const { data, isLoading } = useFetch('/account-settings/basic')
20 
 
 19 
 
Línea 21... Línea 20...
21 
  const { register, handleSubmit, setValue, watch, errors, getValues } =
 20 
  const { register, handleSubmit, setValue, watch, errors, getValues } =
22 
    useForm()
 - 
 
23 
 
 21 
    useForm()
24 
  const onSubmit = async (data) => {
 - 
 
25 
    setLoading(true)
 - 
 
26 
    const formData = new FormData()
 22 
 
Línea 27... Línea 23...
27 
 
 23 
  const onSubmit = async (data) => {
28 
    formData.append('is_adult', isAdult ? 'y' : 'n')
 24 
    const formData = new FormData()
29 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
 25 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
Línea 47... Línea 43...
47 
        addNotification({ style: 'success', msg: data })
 43 
        addNotification({ style: 'success', msg: data })
48 
      })
 44 
      })
49 
      .catch((err) => {
 45 
      .catch((err) => {
50 
        addNotification({ style: 'danger', msg: err.message })
 46 
        addNotification({ style: 'danger', msg: err.message })
51 
      })
 47 
      })
52 
      .finally(() => setLoading(false))
 - 
 
53 
  }
 48 
  }
Línea 54... Línea -...
54 
 
 - 
 
55 
  const getBasicSettings = () => {
 - 
 
56 
    setLoading(true)
 - 
 
57 
 
 - 
 
58 
    axios
 - 
 
59 
      .get('/account-settings/basic')
 - 
 
60 
      .then(({ data: responseData }) => {
 - 
 
61 
        const { data, success } = responseData
 - 
 
62 
 
 - 
 
63 
        if (success) {
 - 
 
64 
          Object.entries(data).forEach(([key, value]) => {
 - 
 
65 
            const currentValue = getValues(key)
 - 
 
66 
 
 - 
 
67 
            if (key === 'is_adult') {
 - 
 
68 
              return setIsAdult(value === 'y')
 - 
 
69 
            }
 - 
 
70 
 
 - 
 
71 
            if (!currentValue) {
 - 
 
72 
              register(key, { required: true })
 - 
 
73 
            }
 - 
 
74 
 
 - 
 
75 
            setValue(key, value)
 - 
 
76 
          })
 - 
 
77 
        }
 - 
 
78 
      })
 49 
 
79 
      .catch((err) => {
 50 
  useEffect(() => {
80 
        addNotification({ style: 'danger', msg: err.message })
 51 
    register('timezone', { required: 'Por favor ingrese su zona horaria' })
81 
      })
 - 
 
82 
      .finally(() => setLoading(false))
 - 
 
Línea 83... Línea 52...
83 
  }
 52 
  }, [])
- 
 
 53 
 
84 
 
 54 
  useEffect(() => {
- 
 
 55 
    Object.entries(data).forEach(([key, value]) => {
85 
  useEffect(() => {
 56 
      const currentValue = getValues(key)
- 
 
 57 
 
86 
    register('timezone', {
 58 
      if (!currentValue) register(key, { required: true })
- 
 
 59 
      setValue(key, key === 'is_adult' ? value === 'y' : value)
Línea -... Línea 60...
- 
 
 60 
    })
87 
      required: 'Por favor ingrese su zona horaria'
 61 
  }, [data])
88 
    })
 62 
 
Línea 89... Línea 63...
89 
 
 63 
  if (isLoading) {
90 
    getBasicSettings()
 64 
    return <Spinner />
91 
  }, [])
 65 
  }
Línea 92... Línea 66...
92 
 
 66 
 
93 
  return (
 - 
 
94 
    <Widget>
 - 
 
95 
      <Widget.Header title='Información básica' />
 - 
 
96 
 
 67 
  return (
97 
      <Widget.Body>
 68 
    <Widget>
98 
        {loading ? (
 69 
      <Widget.Header title='Información básica' />
99 
          <Spinner />
 70 
 
100 
        ) : (
 71 
      <Widget.Body>
101 
          <form onSubmit={handleSubmit(onSubmit)}>
 72 
        <form onSubmit={handleSubmit(onSubmit)}>
102 
            <div className='inputs__container'>
 73 
          <div className='inputs__container'>
103 
              <div className='cp-field'>
 74 
            <div className='cp-field'>
104 
                <label htmlFor='first_name'>Nombre</label>
 75 
              <label htmlFor='first_name'>Nombre</label>
105 
                <input
 76 
              <input
106 
                  type='text'
 77 
                type='text'
107 
                  name='first_name'
 78 
                name='first_name'
108 
                  ref={register}
 79 
                ref={register}
109 
                  defaultValue={watch('first_name')}
 80 
                defaultValue={watch('first_name')}
110 
                />
 81 
              />
111 
                {errors.first_name && (
 - 
 
112 
                  <FormErrorFeedback>
 - 
 
113 
                    Por favor ingrese su nombre
 - 
 
114 
                  </FormErrorFeedback>
 - 
 
115 
                )}
 - 
 
116 
              </div>
 - 
 
117 
              <div className='cp-field'>
 - 
 
118 
                <label htmlFor='last_name'>Apellido</label>
 - 
 
119 
                <input
 - 
 
120 
                  type='text'
 - 
 
121 
                  name='last_name'
 - 
 
122 
                  ref={register}
 - 
 
123 
                  defaultValue={watch('last_name')}
 - 
 
124 
                />
 - 
 
125 
                {errors.last_name && (
 - 
 
126 
                  <FormErrorFeedback>
 - 
 
127 
                    Por favor ingrese su apellido
 - 
 
128 
                  </FormErrorFeedback>
 - 
 
129 
                )}
 - 
 
130 
              </div>
 - 
 
131 
            </div>
 - 
 
132 
 
 - 
 
133 
            <div className='inputs__container'>
 - 
 
134 
              <div className='cp-field'>
 - 
 
135 
                <label htmlFor='email'>Email</label>
 - 
 
136 
                <input
 - 
 
137 
                  type='text'
 - 
 
138 
                  name='email'
 - 
 
139 
                  ref={register}
 - 
 
140 
                  defaultValue={watch('email')}
 - 
 
141 
                />
 - 
 
142 
                {errors.email && (
 - 
 
143 
                  <FormErrorFeedback>
 - 
 
144 
                    Por favor ingrese un correo electrónico valido
 - 
 
145 
                  </FormErrorFeedback>
 - 
 
146 
                )}
 - 
 
147 
              </div>
 - 
 
148 
              <div className='cp-field'>
 - 
 
149 
                <label htmlFor='phone'>Teléfono</label>
 - 
 
150 
                <input
 - 
 
151 
                  name='phone'
 - 
 
152 
                  ref={register({
 - 
 
153 
                    required: 'Por favor ingrese su número de teléfono',
 - 
 
154 
                    pattern: {
 - 
 
155 
                      message: 'Por favor ingrese un número de teléfono válido',
 - 
 
156 
                      value:
 - 
 
157 
                        /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
 - 
 
158 
                    }
 - 
 
159 
                  })}
 - 
 
160 
                  defaultValue={watch('phone')}
 - 
 
161 
                />
 - 
 
162 
                {errors.phone && (
 - 
 
163 
                  <FormErrorFeedback>{errors.phone.message}</FormErrorFeedback>
 - 
 
164 
                )}
 - 
 
165 
              </div>
 - 
 
166 
            </div>
 - 
 
167 
 
 - 
 
168 
            <div className='inputs__container'>
 - 
 
169 
              <div className='cp-field'>
 - 
 
170 
                <label htmlFor='gender'>Género</label>
 - 
 
171 
                <select
 - 
 
172 
                  defaultValue={watch('gender')}
 - 
 
173 
                  name='gender'
 - 
 
174 
                  ref={register}
 - 
 
175 
                >
 - 
 
176 
                  <option value='' hidden>
 - 
 
177 
                    Seleccione un género
 - 
 
178 
                  </option>
 - 
 
179 
                  <option value='m'>Masculino</option>
 - 
 
180 
                  <option value='f'>Femenino</option>
 - 
 
181 
                </select>
 - 
 
182 
                {errors.gender && (
 - 
 
183 
                  <FormErrorFeedback>
 - 
 
184 
                    Por favor selecciona un genero
 - 
 
185 
                  </FormErrorFeedback>
 - 
 
186 
                )}
 - 
 
187 
              </div>
 - 
 
188 
 
 - 
 
189 
              <div className='cp-field'>
 - 
 
190 
                <label htmlFor='timezone'>Zona horaria</label>
 - 
 
191 
                <select
 - 
 
192 
                  name='timezone'
 - 
 
193 
                  ref={register}
 - 
 
194 
                  defaultValue={watch('timezone')}
 - 
 
195 
                >
 - 
 
196 
                  <option value='' hidden>
 - 
 
197 
                    Zona horaria
 - 
 
198 
                  </option>
 - 
 
199 
                  {Object.entries(timezones).map(([key, value]) => (
 - 
 
200 
                    <option value={key} key={key}>
 - 
 
201 
                      {value}
 - 
 
202 
                    </option>
 - 
 
203 
                  ))}
 - 
 
204 
                </select>
 - 
 
205 
                {errors.timezone && (
 - 
 
206 
                  <FormErrorFeedback>
 82 
              {errors.first_name && (
- 
 
 83 
                <FormErrorFeedback>
- 
 
 84 
                  Por favor ingrese su nombre
- 
 
 85 
                </FormErrorFeedback>
- 
 
 86 
              )}
- 
 
 87 
            </div>
- 
 
 88 
            <div className='cp-field'>
- 
 
 89 
              <label htmlFor='last_name'>Apellido</label>
- 
 
 90 
              <input
- 
 
 91 
                type='text'
- 
 
 92 
                name='last_name'
- 
 
 93 
                ref={register}
- 
 
 94 
                defaultValue={watch('last_name')}
- 
 
 95 
              />
- 
 
 96 
              {errors.last_name && (
- 
 
 97 
                <FormErrorFeedback>
Línea -... Línea 98...
- 
 
 98 
                  Por favor ingrese su apellido
207 
                    Por favor selecciona una zona horaria
 99 
                </FormErrorFeedback>
208 
                  </FormErrorFeedback>
 100 
              )}
209 
                )}
 101 
            </div>
- 
 
 102 
          </div>
- 
 
 103 
 
210 
              </div>
 104 
          <div className='inputs__container'>
211 
            </div>
 105 
            <div className='cp-field'>
212 
 
 106 
              <label htmlFor='email'>Email</label>
- 
 
 107 
              <input
- 
 
 108 
                type='text'
- 
 
 109 
                name='email'
- 
 
 110 
                ref={register}
- 
 
 111 
                defaultValue={watch('email')}
- 
 
 112 
              />
- 
 
 113 
              {errors.email && (
- 
 
 114 
                <FormErrorFeedback>
- 
 
 115 
                  Por favor ingrese un correo electrónico valido
- 
 
 116 
                </FormErrorFeedback>
- 
 
 117 
              )}
- 
 
 118 
            </div>
- 
 
 119 
            <div className='cp-field'>
- 
 
 120 
              <label htmlFor='phone'>Teléfono</label>
- 
 
 121 
              <input
- 
 
 122 
                name='phone'
- 
 
 123 
                ref={register({
- 
 
 124 
                  required: 'Por favor ingrese su número de teléfono',
- 
 
 125 
                  pattern: {
- 
 
 126 
                    message: 'Por favor ingrese un número de teléfono válido',
- 
 
 127 
                    value:
- 
 
 128 
                      /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
- 
 
 129 
                  }
- 
 
 130 
                })}
- 
 
 131 
                defaultValue={watch('phone')}
- 
 
 132 
              />
- 
 
 133 
              {errors.phone && (
- 
 
 134 
                <FormErrorFeedback>{errors.phone.message}</FormErrorFeedback>
- 
 
 135 
              )}
- 
 
 136 
            </div>
- 
 
 137 
          </div>
- 
 
 138 
 
- 
 
 139 
          <div className='inputs__container'>
- 
 
 140 
            <div className='cp-field'>
- 
 
 141 
              <label htmlFor='gender'>Género</label>
- 
 
 142 
              <select
- 
 
 143 
                defaultValue={watch('gender')}
- 
 
 144 
                name='gender'
- 
 
 145 
                ref={register}
- 
 
 146 
              >
- 
 
 147 
                <option value='' hidden>
- 
 
 148 
                  Seleccione un género
- 
 
 149 
                </option>
- 
 
 150 
                <option value='m'>Masculino</option>
- 
 
 151 
                <option value='f'>Femenino</option>
- 
 
 152 
              </select>
- 
 
 153 
              {errors.gender && (
- 
 
 154 
                <FormErrorFeedback>
- 
 
 155 
                  Por favor selecciona un genero
- 
 
 156 
                </FormErrorFeedback>
- 
 
 157 
              )}
- 
 
 158 
            </div>
- 
 
 159 
 
- 
 
 160 
            <div className='cp-field'>
- 
 
 161 
              <label htmlFor='timezone'>Zona horaria</label>
- 
 
 162 
              <select
- 
 
 163 
                name='timezone'
- 
 
 164 
                ref={register}
- 
 
 165 
                defaultValue={watch('timezone')}
- 
 
 166 
              >
- 
 
 167 
                <option value='' hidden>
- 
 
 168 
                  Zona horaria
- 
 
 169 
                </option>
- 
 
 170 
                {Object.entries(timezones).map(([key, value]) => (
- 
 
 171 
                  <option value={key} key={key}>
- 
 
 172 
                    {value}
- 
 
 173 
                  </option>
- 
 
 174 
                ))}
213 
            <div className='cp-field'>
 175 
              </select>
- 
 
 176 
              {errors.timezone && (
Línea -... Línea 177...
- 
 
 177 
                <FormErrorFeedback>
- 
 
 178 
                  Por favor selecciona una zona horaria
- 
 
 179 
                </FormErrorFeedback>
- 
 
 180 
              )}
- 
 
 181 
            </div>
- 
 
 182 
          </div>
- 
 
 183 
 
- 
 
 184 
          <div className='cp-field'>
214 
              <label htmlFor='timezone'>Eres mayor de 18</label>
 185 
            <label htmlFor='timezone'>Eres mayor de 18</label>
215 
              <SwitchInput
 186 
            <SwitchInput
216 
                isChecked={isAdult}
 187 
              isChecked={watch('is_adult')}
217 
                setValue={(value) => setIsAdult(value)}
 188 
              setValue={(value) => setValue('is_adult', value)}
218 
              />
 - 
 
219 
            </div>
 189 
            />
220 
 
 190 
          </div>
221 
            <button type='submit' className='btn btn-primary mt-3'>
 191 
 
222 
              Guardar
 192 
          <button type='submit' className='btn btn-primary mt-3'>