Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1 www 1 
import React, { useEffect, useState } from "react";
2 
import PhoneInput from "react-phone-input-2";
3 
import "react-phone-input-2/lib/style.css";
4 
import { useForm } from "react-hook-form";
2641 stevensc 5 
import { axios } from '../../../utils';
1 www 6 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
7 
import { connect } from "react-redux";
8 
import { addNotification } from "../../../redux/notification/notification.actions";
9 
import styled from "styled-components";
10 
import Spinner from "../../../shared/loading-spinner/Spinner";
11 
 
12 
const StyledSpinnerContainer = styled.div`
13 
  position: absolute;
14 
  left: 0;
15 
  top: 0;
16 
  width: 100%;
17 
  height: 100%;
18 
  background: rgba(255, 255, 255, 0.4);
19 
  display: flex;
20 
  justify-content: center;
21 
  align-items: center;
22 
  z-index: 300;
23 
`;
24 
 
25 
const BasicSettings = (props) => {
26 
  // redux destructuring
27 
  const { addNotification } = props;
28 
 
29 
  // states
30 
  const [loading, setLoading] = useState(false);
31 
 
32 
  const { register, handleSubmit, setValue, watch, setError, errors } = useForm(
33 
    {
34 
      defaultValues: {
35 
        phone: "",
36 
      },
37 
    }
38 
  );
39 
 
40 
  useEffect(() => {
41 
    register("phone", {
42 
      required: "Por favor ingrese su número de teléfono",
43 
    });
44 
  }, []);
45 
 
46 
  const handleOnSubmit = async (data) => {
47 
    setLoading(true);
48 
    const formData = new FormData();
49 
    Object.entries(data).map(([key, value]) => {
50 
      formData.append(key, value);
51 
    });
52 
    await axios.post("/account-settings/basic", formData).then((response) => {
53 
      const resData = response.data;
54 
      if (resData.success) {
55 
        addNotification({
56 
          style: "success",
57 
          msg: resData.data,
58 
        });
59 
      } else {
60 
        if (typeof resData.data === "object") {
61 
          resData.data;
62 
          Object.entries(resData.data).map(([key, value]) => {
63 
            setError(key, { type: "manual", message: value[0] });
64 
          });
65 
        } else {
66 
          const errorMessage =
67 
            typeof resData.data === "string"
68 
              ? resData.data
69 
              : "Ha ocurrido un error, Por favor intente mas tarde";
70 
          addNotification({
71 
            style: "danger",
72 
            msg: errorMessage,
73 
          });
74 
        }
75 
      }
76 
    });
77 
    setLoading(false);
78 
  };
79 
 
80 
  useEffect(async () => {
81 
    setLoading(true);
82 
    await axios.get("/account-settings/basic").then((response) => {
83 
      const resData = response.data;
84 
      if (resData.success) {
85 
        Object.entries(resData.data).map(([key, value]) => {
86 
          setValue(key, value);
87 
        });
88 
      }
89 
    });
90 
    setLoading(false);
91 
  }, []);
92 
 
93 
  return (
2641 stevensc 94 
    <div className="settings-container">
2642 stevensc 95 
      <h2>Básica</h2>
2641 stevensc 96 
      <div className="acc-setting_content">
97 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
2643 stevensc 98 
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
2641 stevensc 99 
            <div className="cp-field">
100 
              <label htmlFor="first_name">Nombre</label>
101 
              <input
102 
                type="text"
103 
                name="first_name"
104 
                id="first_name"
105 
                ref={register({
106 
                  required: "Por favor ingrese su nombre",
107 
                })}
108 
              />
109 
              {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}
110 
            </div>
111 
            <div className="cp-field">
112 
              <label htmlFor="last_name">Apellido</label>
113 
              <input
114 
                type="text"
115 
                name="last_name"
116 
                id="last_name"
117 
                ref={register({
118 
                  required: "Por favor ingrese su apellido",
119 
                })}
120 
              />
121 
              {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
122 
            </div>
123 
          </div>
2643 stevensc 124 
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
2641 stevensc 125 
            <div className="cp-field">
126 
              <label htmlFor="last_name">Email</label>
127 
              <input
128 
                type="text"
129 
                name="email"
130 
                id="email"
131 
                ref={register({
132 
                  required: "Por favor ingrese su apellido",
133 
                  pattern: {
134 
                    value: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
135 
                    message: "Por favor ingrese un correo válido",
136 
                  },
137 
                })}
138 
              />
139 
              {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
140 
            </div>
2642 stevensc 141 
            <div className="cp-field">
2645 stevensc 142 
              <label className="mb-1" htmlFor="phone">Teléfono</label>
2642 stevensc 143 
              <PhoneInput
144 
                name="phone"
2644 stevensc 145 
                inputClass="custom-input"
2642 stevensc 146 
                value={watch("phone")}
147 
                onChange={(phone) => {
148 
                  setValue("phone", phone);
149 
                }}
150 
              />
151 
              {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
152 
            </div>
2641 stevensc 153 
          </div>
2643 stevensc 154 
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
2641 stevensc 155 
            <div className="cp-field">
156 
              <label htmlFor="gender">Género</label>
157 
              <select
158 
                name="gender"
159 
                id="gender"
160 
                defaultValue=""
161 
                ref={register}
162 
              >
163 
                <option value="" hidden>
164 
                  Seleccione un género
165 
                </option>
166 
                <option value="m">Masculino</option>
167 
                <option value="f">Femenino</option>
168 
              </select>
169 
              {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}
170 
            </div>
2644 stevensc 171 
            <div className="col-6 mx-auto d-flex align-items-center justify-content-center">
2643 stevensc 172 
              <button type="submit" className="btn btn-secondary mt-4">
2642 stevensc 173 
                Guardar
174 
              </button>
175 
            </div>
2641 stevensc 176 
          </div>
177 
        </form>
178 
      </div>
179 
      {loading &&
1 www 180 
        <StyledSpinnerContainer>
181 
          <Spinner />
182 
        </StyledSpinnerContainer>
2641 stevensc 183 
      }
1 www 184 
    </div>
185 
  );
186 
};
187 
 
188 
// const mapStateToProps = (state) => ({
189 
 
190 
// })
191 
 
192 
const mapDispatchToProps = {
193 
  addNotification: (notification) => addNotification(notification),
194 
};
195 
 
196 
export default connect(null, mapDispatchToProps)(BasicSettings);