Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
/* eslint-disable no-mixed-spaces-and-tabs */
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { axios } from '../../../utils';
import { connect } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";

import Spinner from "../../../shared/loading-spinner/Spinner";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import PhoneInput from "react-phone-input-2";
import SwitchInput from "../shared/switch-input/SwitchInput";
import "react-phone-input-2/lib/style.css";

const BasicSettings = ({
  addNotification = function () { }, // Redux action
  timezones = {}
}) => {

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

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

  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();

    formData.append("is_adult", isAdult ? 'y' : 'n')
    Object.entries(data).map(([key, value]) => formData.append(key, value))

    axios.post("/account-settings/basic", formData)
      .then(({ data: response }) => {
        if (!response.success) {
          const errorMessage = typeof response.data === "string" ? response.data : "Ha ocurrido un error, Por favor intente mas tarde"
          return addNotification({ style: "danger", msg: errorMessage })
        }

        return addNotification({ style: "success", msg: response.data })
      })
      .finally(() => setLoading(false))
  };

  useEffect(async () => {
    setLoading(true);
    axios
      .get("/account-settings/basic")
      .then(({ data: response }) => {
        if (response.success) {
          Object
            .entries(response.data)
            .map(([key, value]) => {
              console.log(key, value)
              if (key === 'is_adult') {
                return setIsAdult(value === 'y' ? true : false)
              }
              return setValue(key, value)
            })
        }
      })
      .finally(() => setLoading(false))
  }, []);

  return (
    <div className="acc-setting">
      <h2>Básica</h2>
      {loading
        ? <Spinner />
        :
        <form onSubmit={handleSubmit(handleOnSubmit)}>
          <div className="inputs__container">
            <div className="cp-field">
              <label htmlFor="first_name">Nombre</label>
              <input
                type="text"
                name="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"
                ref={register({
                  required: "Por favor ingrese su apellido",
                })}
              />
              {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
            </div>
          </div>
          <div className="inputs__container">
            <div className="cp-field">
              <label htmlFor="last_name">Email</label>
              <input
                type="text"
                name="email"
                ref={register({
                  required: "Por favor ingrese su correo electrónico",
                  pattern: {
                    value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/i,
                    message: "Por favor ingrese un correo válido",
                  },
                })}
              />
              {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
            </div>
            <div className="cp-field">
              <label 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="inputs__container">
            <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 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(timezones).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
              </select>
              {<FormErrorFeedback>{errors?.timezone?.message}</FormErrorFeedback>}
            </div>
          </div>
          <SwitchInput
            isChecked={isAdult}
            setValue={(value) => setIsAdult(value)}
          />
          <button type="submit" className="btn btn-secondary">
            Guardar
          </button>
        </form>
      }


    </div >
  );
};

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

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