Proyectos de Subversion LeadersLinked - SPA

import React from "react";

import { useDispatch } from "react-redux";

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

import { Button, styled } from "@mui/material";

import { useFetch } from "@hooks";

import { axios } from "@app/utils";

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

import Widget from "@components/UI/Widget";

import Input from "@components/UI/inputs/Input";

import Select from "@components/UI/inputs/Select";

import Spinner from "@components/UI/Spinner";

import SwitchInput from "@components/UI/SwitchInput";

const Row = styled("div")(({ theme }) => ({

  display: "flex",

  gap: theme.spacing(0.5),

}));

const BasicSettings = () => {

  const { data: timezones } = useFetch("/helpers/timezones");

  const { data: formValues, loading } = useFetch("/account-settings/basic");

  const dispatch = useDispatch();

  const {

    control,

    handleSubmit,

    watch,

    setValue,

    formState: { errors },

  } = useForm({

    defaultValues: {

      first_name: "",

      last_name: "",

      email: "",

      phone: "",

      gender: "m",

      timezone: "",

      is_adult: "n",

    },

    values: formValues,

  });

  const watchedIsAdult = watch("is_adult") === "y";

  const onSubmit = handleSubmit(async (data) => {

    const formData = new FormData();

    Object.entries(data).map(([key, value]) => formData.append(key, value));

    try {

      const response = await axios.post("/account-settings/basic", formData);

      dispatch(addNotification({ style: "success", msg: response.data.data }));

    } catch (error) {

      dispatch(addNotification({ style: "danger", msg: error.message }));

    }

  });

  if (loading) {

    return <Spinner />;

  }

  return (

    <Widget>

      <Widget.Header title="Información básica" />

      <Widget.Body>

        <form onSubmit={onSubmit}>

          <Row>

            <Input

              label="Nombre"

              name="first_name"

              control={control}

              error={errors.first_name?.message}

              rules={{ required: "Este campo es requerido" }}

            />

            <Input

              label="Apellido"

              name="last_name"

              control={control}

              error={errors.last_name?.message}

              rules={{ required: "Este campo es requerido" }}

            />

          </Row>

          <Row>

            <Input

              label="Correo"

              name="email"

              control={control}

              error={errors.email?.message}

              rules={{ required: "Este campo es requerido" }}

            />

            <Input

              label="Teléfono"

              name="phone"

              control={control}

              error={errors.phone?.message}

              rules={{

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

                pattern: {

                  message: "Por favor ingrese un número de teléfono válido",

                  value:

                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/,

                },

              }}

            />

          </Row>

          <Row>

            <Select

              label="Género"

              name="gender"

              control={control}

              rules={{ required: "Este campo es requerido" }}

              error={errors.gender?.message}

              options={[

                { name: "Masculino", value: "m" },

                { name: "Femenino", value: "f" },

              ]}

            />

            <Select

              label="Zona horaria"

              name="timezone"

              control={control}

              rules={{ required: "Este campo es requerido" }}

              error={errors.timezone?.message}

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

                name: key,

                value,

              }))}

            />

          </Row>

          <SwitchInput

            label="Eres mayor de 18"

            isChecked={watchedIsAdult}

            setValue={(value) => setValue("is_adult", value ? "y" : "n")}

          />

          <Button color="primary" type="submit" sx={{ marginTop: 1 }}>

            Guardar

          </Button>

        </form>

      </Widget.Body>

    </Widget>

  );

};

export default BasicSettings;