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;
  
  const {  timezones } = props;

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

  const { register, handleSubmit, setValue, watch, setError, errors } = useForm(
    {
      defaultValues: {
        phone: "",
        timezone: "",
      },
    }
  );

  useEffect(() => {
    register("phone", {
      required: "Por favor ingrese su número de teléfono",
    });
    register("timezone", {
      required: "Por favor ingrese su zona horaria",
    });
  }, []);

  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="settings-container">
      <h2>Básica</h2>
      <div className="acc-setting_content">
        <form onSubmit={handleSubmit(handleOnSubmit)}>
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
            <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>
          <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
            <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 className="mb-1" htmlFor="phone">Teléfono</label>
              <PhoneInput
                name="phone"
                inputClass="custom-input"
                value={watch("phone")}
                onChange={(phone) => {
                  setValue("phone", phone);
                }}
              />
              {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
            </div>
          </div>
          <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
            <div className="cp-field">
              <label htmlFor="gender">Género</label>
              <select
                name="gender"
                id="gender"
                defaultValue=""
                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>  
           <div className="d-flex flex-wrap" style={{ gap: '1rem' }}>
            <div className="cp-field">
                <label htmlFor="timezone">Zona horaria</label>
                    <select
                        name="timezone"
                        id="timezone"
                        defaultValue=""
                        ref={register({
                          required: "Por favor elige una Zona horaria",
                        })}
                      >
                        <option value="" hidden>
                          Zona horaria
                        </option>
                        {Object.entries(self.timezones).map(([key, value]) => (
                          <option value={key} key={key}>
                            {value}
                          </option>
                        ))}
                      </select>
                  {<FormErrorFeedback>{errors?.timezone?.message}</FormErrorFeedback>}
            </div>
            <div className="col-6 mx-auto d-flex align-items-center justify-content-center">
              <button type="submit" className="btn btn-secondary mt-4">
                Guardar
              </button>
            </div>
          </div>
        </form>
      </div>
      {loading &&
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      }
    </div>
  );
};

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

// })

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

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