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, getValues } = 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]) => {
              const currentValue = getValues(key)

              if (key === 'is_adult') {
                return setIsAdult(value === 'y' ? true : false)
              }

              if (!currentValue) {
                register(key, { required: true })
              }

              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} defaultValue={watch('first_name')} />
              {errors.first_name && <FormErrorFeedback>Por favor ingrese su nombre</FormErrorFeedback>}
            </div>
            <div className="cp-field">
              <label htmlFor="last_name">Apellido</label>
              <input type="text" name="last_name" ref={register} defaultValue={watch('last_name')} />
              {errors.last_name && <FormErrorFeedback>Por favor ingrese su apellido</FormErrorFeedback>}
            </div>
          </div>
          <div className="inputs__container">
            <div className="cp-field">
              <label htmlFor="email">Email</label>
              <input type="text" name="email" ref={register} defaultValue={watch('email')} />
              {errors.email && <FormErrorFeedback>Por favor ingrese un correo electrónico valido</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)}
              />
              {errors.phone && <FormErrorFeedback>Por favor ingrese un número telefónico valido</FormErrorFeedback>}
            </div>
          </div>
          <div className="inputs__container">
            <div className="cp-field">
              <label htmlFor="gender">Género</label>
              <select
                defaultValue={watch('gender')}
                name="gender"
                ref={register}
              >
                <option value="" hidden>
                  Seleccione un género
                </option>
                <option value="m">Masculino</option>
                <option value="f">Femenino</option>
              </select>
              {errors.gender && <FormErrorFeedback>Por favor selecciona un genero</FormErrorFeedback>}
            </div>
            <div className="cp-field">
              <label htmlFor="timezone">Zona horaria</label>
              <select name="timezone" ref={register} defaultValue={watch('timezone')}>
                <option value="" hidden>
                  Zona horaria
                </option>
                {Object.entries(timezones).map(([key, value]) =>
                  <option value={key} key={key}>
                    {value}
                  </option>
                )}
              </select>
              {errors.timezone && <FormErrorFeedback>Por favor selecciona una zona horaria</FormErrorFeedback>}
            </div>
          </div>
          <div className="cp-field">
            <label htmlFor="timezone">Eres mayor de 18</label>
            <SwitchInput
              isChecked={isAdult}
              setValue={(value) => setIsAdult(value)}
            />
          </div>
          <button type="submit" className="btn btn-secondary">
            Guardar
          </button>
        </form>
      }


    </div >
  );
};

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

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