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]) =>

              key === 'is_adult'

                ? setIsAdult(value === 'y' ? true : false)

                : 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" {...register("first_name")} />

              {errors.first_name && <FormErrorFeedback>Por favor ingrese su nombre</FormErrorFeedback>}

            </div>

            <div className="cp-field">

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

              <input {...register("text")} name="last_name" />

              {errors.last_name && <FormErrorFeedback>Por favor ingrese su apellido</FormErrorFeedback>}

            </div>

          </div>

          <div className="inputs__container">

            <div className="cp-field">

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

              <input type="text" {...register("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

                {...register("gender")}

              >

                <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 {...register("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);