Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4115 | Rev 4407 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4115 Rev 4405
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
/* eslint-disable no-mixed-spaces-and-tabs */
 2 
/* eslint-disable no-mixed-spaces-and-tabs */
3 
import React, { useEffect, useState } from "react";
 3 
import React, { useEffect, useState } from "react";
4 
import PhoneInput from "react-phone-input-2";
 - 
 
5 
import "react-phone-input-2/lib/style.css";
 - 
 
6 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
7 
import { axios } from '../../../utils';
 5 
import { axios } from '../../../utils';
8 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 - 
 
9 
import { connect } from "react-redux";
 6 
import { connect } from "react-redux";
10 
import { addNotification } from "../../../redux/notification/notification.actions";
 7 
import { addNotification } from "../../../redux/notification/notification.actions";
11 
import styled from "styled-components";
 - 
 
12 
import Spinner from "../../../shared/loading-spinner/Spinner";
 - 
 
Línea 13... Línea 8...
13 
 
 8 
 
14 
const StyledSpinnerContainer = styled.div`
 9 
import Spinner from "../../../shared/loading-spinner/Spinner";
15 
  position: absolute;
 - 
 
16 
  left: 0;
 - 
 
17 
  top: 0;
 - 
 
18 
  width: 100%;
 - 
 
19 
  height: 100%;
 10 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
20 
  background: rgba(255, 255, 255, 0.4);
 - 
 
21 
  display: flex;
 11 
import PhoneInput from "react-phone-input-2";
22 
  justify-content: center;
 12 
import SwitchInput from "../shared/switch-input/SwitchInput";
23 
  align-items: center;
 - 
 
24 
  z-index: 300;
 - 
 
Línea 25... Línea 13...
25 
`;
 13 
import "react-phone-input-2/lib/style.css";
26 
 
 14 
 
27 
const BasicSettings = ({
 15 
const BasicSettings = ({
28 
  addNotification = function () { }, // Redux action
 16 
  addNotification = function () { }, // Redux action
Línea 29... Línea 17...
29 
  timezones = {}
 17 
  timezones = {}
- 
 
 18 
}) => {
Línea 30... Línea 19...
30 
}) => {
 19 
 
31 
 
 20 
  const [loading, setLoading] = useState(false);
32 
  const [loading, setLoading] = useState(false);
 21 
  const [isAdult, setIsAdult] = useState(false);
33 
 
 22 
 
Línea 48... Línea 37...
48 
  }, []);
 37 
  }, []);
Línea 49... Línea 38...
49 
 
 38 
 
50 
  const handleOnSubmit = async (data) => {
 39 
  const handleOnSubmit = async (data) => {
51 
    setLoading(true);
 40 
    setLoading(true);
52 
    const formData = new FormData();
 41 
    const formData = new FormData();
53 
    Object.entries(data).map(([key, value]) => {
 42 
    Object.entries(data)
- 
 
 43 
      .map(([key, value]) => formData.append(key, value))
54 
      formData.append(key, value);
 44 
    formData.append("is_adult", isAdult ? 'y' : 'n')
55 
    });
 45 
 
56 
    await axios.post("/account-settings/basic", formData).then((response) => {
 46 
    await axios.post("/account-settings/basic", formData).then((response) => {
57 
      const resData = response.data;
 47 
      const resData = response.data;
58 
      if (resData.success) {
 48 
      if (resData.success) {
59 
        addNotification({
 49 
        addNotification({
Línea 81... Línea 71...
81 
    setLoading(false);
 71 
    setLoading(false);
82 
  };
 72 
  };
Línea 83... Línea 73...
83 
 
 73 
 
84 
  useEffect(async () => {
 74 
  useEffect(async () => {
- 
 
 75 
    setLoading(true);
85 
    setLoading(true);
 76 
    axios
- 
 
 77 
      .get("/account-settings/basic")
86 
    await axios.get("/account-settings/basic").then((response) => {
 78 
      .then((response) => {
87 
      const resData = response.data;
 79 
        const resData = response.data;
88 
      if (resData.success) {
 80 
        if (resData.success) {
- 
 
 81 
          Object.entries(resData.data).map(([key, value]) => {
- 
 
 82 
            if (key === 'is_adult') {
- 
 
 83 
              return setIsAdult(value === 'y' ? true : false)
89 
        Object.entries(resData.data).map(([key, value]) => {
 84 
            }
90 
          setValue(key, value);
 85 
            setValue(key, value);
91 
        });
 86 
          });
92 
      }
 87 
        }
93 
    });
 88 
      })
94 
    setLoading(false);
 89 
      .finally(() => setLoading(false))
Línea 95... Línea 90...
95 
  }, []);
 90 
  }, []);
96 
 
 91 
 
97 
  return (
 92 
  return (
- 
 
 93 
    <div className="acc-setting">
98 
    <div className="settings-container">
 94 
      <h2>Básica</h2>
- 
 
 95 
      {loading
99 
      <h2>Básica</h2>
 96 
        ? <Spinner />
100 
      <div className="acc-setting_content">
 97 
        :
101 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
 98 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
102 
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
 99 
          <div className="inputs__container">
103 
            <div className="cp-field">
 100 
            <div className="cp-field">
104 
              <label htmlFor="first_name">Nombre</label>
 101 
              <label htmlFor="first_name">Nombre</label>
105 
              <input
 102 
              <input
106 
                type="text"
 103 
                type="text"
107 
                name="first_name"
 - 
 
108 
                id="first_name"
 104 
                name="first_name"
109 
                ref={register({
 - 
 
110 
                  required: "Por favor ingrese su nombre",
 105 
                id="first_name"
111 
                })}
 106 
                ref={register({ required: "Por favor ingrese su nombre" })}
112 
              />
 107 
              />
113 
              {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}
 108 
              {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}
114 
            </div>
 109 
            </div>
Línea 123... Línea 118...
123 
                })}
 118 
                })}
124 
              />
 119 
              />
125 
              {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
 120 
              {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
126 
            </div>
 121 
            </div>
127 
          </div>
 122 
          </div>
128 
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
 123 
          <div className="inputs__container">
129 
            <div className="cp-field">
 124 
            <div className="cp-field">
130 
              <label htmlFor="last_name">Email</label>
 125 
              <label htmlFor="last_name">Email</label>
131 
              <input
 126 
              <input
132 
                type="text"
 127 
                type="text"
133 
                name="email"
 128 
                name="email"
Línea 141... Línea 136...
141 
                })}
 136 
                })}
142 
              />
 137 
              />
143 
              {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
 138 
              {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
144 
            </div>
 139 
            </div>
145 
            <div className="cp-field">
 140 
            <div className="cp-field">
146 
              <label className="mb-1" htmlFor="phone">Teléfono</label>
 141 
              <label htmlFor="phone">Teléfono</label>
147 
              <PhoneInput
 142 
              <PhoneInput
148 
                name="phone"
 143 
                name="phone"
149 
                inputClass="custom-input"
 144 
                inputClass="custom-input"
150 
                value={watch("phone")}
 145 
                value={watch("phone")}
151 
                onChange={(phone) => {
 146 
                onChange={(phone) => {
Línea 153... Línea 148...
153 
                }}
 148 
                }}
154 
              />
 149 
              />
155 
              {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
 150 
              {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
156 
            </div>
 151 
            </div>
157 
          </div>
 152 
          </div>
158 
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
 153 
          <div className="inputs__container">
159 
            <div className="cp-field">
 154 
            <div className="cp-field">
160 
              <label htmlFor="gender">Género</label>
 155 
              <label htmlFor="gender">Género</label>
161 
              <select
 156 
              <select
162 
                name="gender"
 157 
                name="gender"
163 
                id="gender"
 158 
                id="gender"
Línea 170... Línea 165...
170 
                <option value="m">Masculino</option>
 165 
                <option value="m">Masculino</option>
171 
                <option value="f">Femenino</option>
 166 
                <option value="f">Femenino</option>
172 
              </select>
 167 
              </select>
173 
              {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}
 168 
              {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}
174 
            </div>
 169 
            </div>
175 
          </div>
 - 
 
176 
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
 - 
 
177 
            <div className="cp-field">
 170 
            <div className="cp-field">
178 
              <label htmlFor="timezone">Zona horaria</label>
 171 
              <label htmlFor="timezone">Zona horaria</label>
179 
              <select
 172 
              <select
180 
                name="timezone"
 173 
                name="timezone"
181 
                id="timezone"
 174 
                id="timezone"
Línea 193... Línea 186...
193 
                  </option>
 186 
                  </option>
194 
                ))}
 187 
                ))}
195 
              </select>
 188 
              </select>
196 
              {<FormErrorFeedback>{errors?.timezone?.message}</FormErrorFeedback>}
 189 
              {<FormErrorFeedback>{errors?.timezone?.message}</FormErrorFeedback>}
197 
            </div>
 190 
            </div>
198 
            <div className="col-6 mx-auto d-flex align-items-center justify-content-center">
 - 
 
199 
              <button type="submit" className="btn btn-secondary mt-4">
 - 
 
200 
                Guardar
 - 
 
201 
              </button>
 - 
 
202 
            </div>
 - 
 
203 
          </div>
 191 
          </div>
- 
 
 192 
          <SwitchInput
- 
 
 193 
            isChecked={isAdult}
- 
 
 194 
            setValue={(value) => setIsAdult(value)}
- 
 
 195 
          />
- 
 
 196 
          <button type="submit" className="btn btn-secondary">
- 
 
 197 
            Guardar
- 
 
 198 
          </button>
204 
        </form>
 199 
        </form>
205 
      </div>
 - 
 
206 
      {loading &&
 - 
 
207 
        <StyledSpinnerContainer>
 - 
 
208 
          <Spinner />
 - 
 
209 
        </StyledSpinnerContainer>
 - 
 
210 
      }
 200 
      }
211 
    </div>
 - 
 
212 
  );
 - 
 
213 
};
 - 
 
Línea 214... Línea -...
214 
 
 - 
 
Línea -... Línea 201...
- 
 
 201 
 
215 
// const mapStateToProps = (state) => ({
 202 
 
- 
 
 203 
    </div >
Línea 216... Línea 204...
216 
 
 204 
  );
217 
// })
 205 
};
218 
 
 206