Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";

import PhoneInput from "react-phone-input-2";

import "react-phone-input-2/lib/style.css";

import { useForm } from "react-hook-form";

import {axios} from '../../../utils';

import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";

import { connect } from "react-redux";

import { addNotification } from "../../../redux/notification/notification.actions";

import styled from "styled-components";

import Spinner from "../../../shared/loading-spinner/Spinner";

const StyledSpinnerContainer = styled.div`

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 300;

`;

const BasicSettings = (props) => {

  // redux destructuring

  const { addNotification } = props;

  // states

  const [loading, setLoading] = useState(false);

  const { register, handleSubmit, setValue, watch, setError, errors } = useForm(

    {

      defaultValues: {

        phone: "",

      },

    }

  );

  useEffect(() => {

    register("phone", {

      required: "Por favor ingrese su número de teléfono",

    });

  }, []);

  const handleOnSubmit = async (data) => {

    setLoading(true);

    const formData = new FormData();

    Object.entries(data).map(([key, value]) => {

      formData.append(key, value);

    });

    await axios.post("/account-settings/basic", formData).then((response) => {

      const resData = response.data;

      if (resData.success) {

        addNotification({

          style: "success",

          msg: resData.data,

        });

      } else {

        if (typeof resData.data === "object") {

          resData.data;

          Object.entries(resData.data).map(([key, value]) => {

            setError(key, { type: "manual", message: value[0] });

          });

        } else {

          const errorMessage =

            typeof resData.data === "string"

              ? resData.data

              : "Ha ocurrido un error, Por favor intente mas tarde";

          addNotification({

            style: "danger",

            msg: errorMessage,

          });

        }

      }

    });

    setLoading(false);

  };

  useEffect(async () => {

    setLoading(true);

    await axios.get("/account-settings/basic").then((response) => {

      const resData = response.data;

      if (resData.success) {

        Object.entries(resData.data).map(([key, value]) => {

          setValue(key, value);

        });

      }

    });

    setLoading(false);

  }, []);

  return (

    <div className="acc-setting" style={{ position: "relative" }}>

      <h3>Básica</h3>

      <form onSubmit={handleSubmit(handleOnSubmit)}>

        <div className="cp-field">

          <label htmlFor="first_name">Nombre</label>

          <input

            type="text"

            name="first_name"

            id="first_name"

            ref={register({

              required: "Por favor ingrese su nombre",

            })}

          />

          {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}

        </div>

        <div className="cp-field">

          <label htmlFor="last_name">Apellido</label>

          <input

            type="text"

            name="last_name"

            id="last_name"

            ref={register({

              required: "Por favor ingrese su apellido",

            })}

          />

          {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}

        </div>

        <div className="cp-field">

          <label htmlFor="phone">Teléfono</label>

          <PhoneInput

            name="phone"

            value={watch("phone")}

            onChange={(phone) => {

              setValue("phone", phone);

            }}

          />

          {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}

        </div>

        <div className="cp-field">

          <label htmlFor="last_name">Email</label>

          <input

            type="text"

            name="email"

            id="email"

            ref={register({

              required: "Por favor ingrese su apellido",

              pattern: {

                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])+)\])/,

                message: "Por favor ingrese un correo válido",

              },

            })}

          />

          {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}

        </div>

        <div className="cp-field">

          <label htmlFor="gender">Género</label>

          <select

            name="gender"

            id="gender"

            defaultValue=""

            className="form-control"

            ref={register}

          >

            <option value="" hidden>

              Seleccione un género

            </option>

            <option value="m">Masculino</option>

            <option value="f">Femenino</option>

          </select>

          {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}

        </div>

        <div className="save-stngs pd2">

          <ul>

            <li>

              <button type="submit" className="btn-save-basic">

                Guardar

              </button>

            </li>

          </ul>

        </div>

        {/* <!--save-stngs end--> */}

        {/* <?php echo $this->form()->closeTag($form); ?>	 */}

      </form>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </div>

  );

};

// const mapStateToProps = (state) => ({

// })

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

};

export default connect(null, mapDispatchToProps)(BasicSettings);