Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3416 | Rev 3697 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3416 Rev 3432
Línea 1... Línea 1...
1 
import React from "react";
 1 
import React from 'react'
2 
import { useDispatch } from "react-redux";
 2 
import { useDispatch } from 'react-redux'
3 
import { useForm } from "react-hook-form";
 3 
import { useForm } from 'react-hook-form'
4 
import { Button, styled } from "@mui/material";
 4 
import { Button, styled } from '@mui/material'
5 
 
 5 
 
6 
import { useFetch } from "@hooks";
 6 
import { useFetch } from '@hooks'
7 
import { axios } from "@app/utils";
 7 
import { axios } from '@app/utils'
8 
import { addNotification } from "@app/redux/notification/notification.actions";
 8 
import { addNotification } from '@app/redux/notification/notification.actions'
9 
 
 9 
 
10 
import Widget from "@components/UI/Widget";
 10 
import Widget from '@components/UI/Widget'
11 
import Input from "@components/UI/inputs/Input";
 11 
import Input from '@components/UI/inputs/Input'
12 
import Select from "@components/UI/inputs/Select";
 12 
import Select from '@components/UI/inputs/Select'
13 
import Spinner from "@components/UI/Spinner";
 13 
import Spinner from '@components/UI/Spinner'
14 
import SwitchInput from "@components/UI/SwitchInput";
 14 
import SwitchInput from '@components/UI/SwitchInput'
15 
 
 15 
 
16 
const Row = styled("div")(({ theme }) => ({
 16 
const Row = styled('div')(({ theme }) => ({
17 
  display: "flex",
 17 
  display: 'flex',
18 
  gap: theme.spacing(0.5),
 18 
  gap: theme.spacing(0.5)
19 
}));
 19 
}))
Línea 20... Línea 20...
20 
 
 20 
 
21 
const BasicSettings = () => {
 21 
const BasicSettings = () => {
22 
  const { data: timezones } = useFetch("/helpers/timezones");
 22 
  const { data: timezones } = useFetch('/helpers/timezones')
23 
  const { data: formValues, loading } = useFetch("/account-settings/basic");
 23 
  const { data: formValues, isLoading } = useFetch('/account-settings/basic')
Línea 24... Línea 24...
24 
  const dispatch = useDispatch();
 24 
  const dispatch = useDispatch()
25 
 
 25 
 
26 
  const {
 26 
  const {
27 
    control,
 27 
    control,
28 
    handleSubmit,
 28 
    handleSubmit,
29 
    watch,
 29 
    watch,
30 
    setValue,
 30 
    setValue,
31 
    formState: { errors },
 31 
    formState: { errors }
32 
  } = useForm({
 32 
  } = useForm({
33 
    defaultValues: {
 33 
    defaultValues: {
34 
      first_name: "",
 34 
      first_name: '',
35 
      last_name: "",
 35 
      last_name: '',
36 
      email: "",
 36 
      email: '',
37 
      phone: "",
 37 
      phone: '',
38 
      gender: "m",
 38 
      gender: 'm',
39 
      timezone: "",
 39 
      timezone: '',
40 
      is_adult: "n",
 40 
      is_adult: 'n'
41 
    },
 41 
    },
42 
    values: formValues,
 42 
    values: formValues
Línea 43... Línea 43...
43 
  });
 43 
  })
44 
  const watchedIsAdult = watch("is_adult") === "y";
 44 
  const watchedIsAdult = watch('is_adult') === 'y'
45 
 
 45 
 
Línea 46... Línea 46...
46 
  const onSubmit = handleSubmit(async (data) => {
 46 
  const onSubmit = handleSubmit(async (data) => {
47 
    const formData = new FormData();
 47 
    const formData = new FormData()
48 
    Object.entries(data).map(([key, value]) => formData.append(key, value));
 48 
    Object.entries(data).map(([key, value]) => formData.append(key, value))
49 
 
 49 
 
50 
    try {
 50 
    try {
51 
      const response = await axios.post("/account-settings/basic", formData);
 51 
      const response = await axios.post('/account-settings/basic', formData)
52 
      dispatch(addNotification({ style: "success", msg: response.data.data }));
 52 
      dispatch(addNotification({ style: 'success', msg: response.data.data }))
Línea 53... Línea 53...
53 
    } catch (error) {
 53 
    } catch (error) {
54 
      dispatch(addNotification({ style: "danger", msg: error.message }));
 54 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
55 
    }
 55 
    }
Línea 56... Línea 56...
56 
  });
 56 
  })
57 
 
 57 
 
58 
  if (loading) {
 58 
  if (isLoading) {
Línea 59... Línea 59...
59 
    return <Spinner />;
 59 
    return <Spinner />
60 
  }
 60 
  }
61 
 
 61 
 
62 
  return (
 62 
  return (
63 
    <Widget>
 63 
    <Widget>
64 
      <Widget.Header title="Información básica" />
 64 
      <Widget.Header title='Información básica' />
65 
 
 65 
 
66 
      <Widget.Body>
 66 
      <Widget.Body>
67 
        <form onSubmit={onSubmit}>
 67 
        <form onSubmit={onSubmit}>
68 
          <Row>
 68 
          <Row>
69 
            <Input
 69 
            <Input
70 
              label="Nombre"
 70 
              label='Nombre'
71 
              name="first_name"
 71 
              name='first_name'
72 
              control={control}
 72 
              control={control}
73 
              error={errors.first_name?.message}
 73 
              error={errors.first_name?.message}
74 
              rules={{ required: "Este campo es requerido" }}
 74 
              rules={{ required: 'Este campo es requerido' }}
75 
            />
 75 
            />
76 
            <Input
 76 
            <Input
Línea 77... Línea 77...
77 
              label="Apellido"
 77 
              label='Apellido'
78 
              name="last_name"
 78 
              name='last_name'
79 
              control={control}
 79 
              control={control}
80 
              error={errors.last_name?.message}
 80 
              error={errors.last_name?.message}
81 
              rules={{ required: "Este campo es requerido" }}
 81 
              rules={{ required: 'Este campo es requerido' }}
82 
            />
 82 
            />
83 
          </Row>
 83 
          </Row>
84 
 
 84 
 
85 
          <Row>
 85 
          <Row>
86 
            <Input
 86 
            <Input
87 
              label="Correo"
 87 
              label='Correo'
88 
              name="email"
 88 
              name='email'
89 
              control={control}
 89 
              control={control}
90 
              error={errors.email?.message}
 90 
              error={errors.email?.message}
91 
              rules={{ required: "Este campo es requerido" }}
 91 
              rules={{ required: 'Este campo es requerido' }}
92 
            />
 92 
            />
93 
            <Input
 93 
            <Input
94 
              label="Teléfono"
 94 
              label='Teléfono'
95 
              name="phone"
 95 
              name='phone'
96 
              control={control}
 96 
              control={control}
97 
              error={errors.phone?.message}
 97 
              error={errors.phone?.message}
98 
              rules={{
 98 
              rules={{
99 
                required: "Por favor ingrese su número de teléfono",
 99 
                required: 'Por favor ingrese su número de teléfono',
Línea 100... Línea 100...
100 
                pattern: {
 100 
                pattern: {
101 
                  message: "Por favor ingrese un número de teléfono válido",
 101 
                  message: 'Por favor ingrese un número de teléfono válido',
102 
                  value:
 102 
                  value:
103 
                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/,
 103 
                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/
104 
                },
 104 
                }
105 
              }}
 105 
              }}
106 
            />
 106 
            />
107 
          </Row>
 107 
          </Row>
108 
 
 108 
 
109 
          <Row>
 109 
          <Row>
110 
            <Select
 110 
            <Select
111 
              label="Género"
 111 
              label='Género'
112 
              name="gender"
 112 
              name='gender'
113 
              control={control}
 113 
              control={control}
114 
              rules={{ required: "Este campo es requerido" }}
 114 
              rules={{ required: 'Este campo es requerido' }}
115 
              error={errors.gender?.message}
 115 
              error={errors.gender?.message}
116 
              options={[
 116 
              options={[
117 
                { name: "Masculino", value: "m" },
 117 
                { name: 'Masculino', value: 'm' },
118 
                { name: "Femenino", value: "f" },
 118 
                { name: 'Femenino', value: 'f' }
119 
              ]}
 119 
              ]}
120 
            />
 120 
            />
121 
            <Select
 121 
            <Select
122 
              label="Zona horaria"
 122 
              label='Zona horaria'
123 
              name="timezone"
 123 
              name='timezone'
Línea 124... Línea 124...
124 
              control={control}
 124 
              control={control}
125 
              rules={{ required: "Este campo es requerido" }}
 125 
              rules={{ required: 'Este campo es requerido' }}
126 
              error={errors.timezone?.message}
 126 
              error={errors.timezone?.message}
127 
              options={Object.entries(timezones).map(([key, value]) => ({
 127 
              options={Object.entries(timezones).map(([key, value]) => ({
128 
                name: key,
 128 
                name: key,
Línea 129... Línea 129...
129 
                value,
 129 
                value
130 
              }))}
 130 
              }))}
131 
            />
 131 
            />
132 
          </Row>
 132 
          </Row>
133 
 
 133 
 
134 
          <SwitchInput
 134 
          <SwitchInput
135 
            label="Eres mayor de 18"
 135 
            label='Eres mayor de 18'
136 
            isChecked={watchedIsAdult}
 136 
            isChecked={watchedIsAdult}
Línea 137... Línea 137...
137 
            setValue={(value) => setValue("is_adult", value ? "y" : "n")}
 137 
            setValue={(value) => setValue('is_adult', value ? 'y' : 'n')}