Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 5 Rev 344
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from "react";
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from "react-hook-form";
3 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from "react-redux";
4 
import { axios } from '../../utils'
 4 
import { axios } from "../../utils";
5 
import { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from "../../redux/notification/notification.actions";
6 
import { Modal } from 'react-bootstrap'
 6 
import { Modal } from "react-bootstrap";
7 
import Datetime from 'react-datetime'
 7 
import Datetime from "react-datetime";
8 
import FormErrorFeedback from '../UI/FormErrorFeedback'
 8 
import FormErrorFeedback from "../UI/FormErrorFeedback";
9 
import useFetchHelper from '../../hooks/useFetchHelper'
 9 
import useFetchHelper from "../../hooks/useFetchHelper";
10 
import 'react-datetime/css/react-datetime.css'
 10 
import "react-datetime/css/react-datetime.css";
Línea 11... Línea 11...
11 
 
 11 
 
12 
const ConferenceModal = ({
 12 
const ConferenceModal = ({
13 
  show = false,
 13 
  show = false,
14 
  zoomUrl = '',
 14 
  zoomUrl = "",
15 
  onClose = () => null,
 15 
  onClose = () => null,
16 
}) => {
 16 
}) => {
17 
  const dt = new Date()
 17 
  const dt = new Date();
18 
  const [date, setDate] = useState({
 18 
  const [date, setDate] = useState({
19 
    year: dt.toLocaleString('default', { year: 'numeric' }),
 19 
    year: dt.toLocaleString("default", { year: "numeric" }),
20 
    month: dt.toLocaleString('default', { month: '2-digit' }),
 20 
    month: dt.toLocaleString("default", { month: "2-digit" }),
21 
    day: dt.toLocaleString('default', { day: '2-digit' }),
 21 
    day: dt.toLocaleString("default", { day: "2-digit" }),
22 
  })
 22 
  });
23 
  const [time, setTime] = useState(
 23 
  const [time, setTime] = useState(
24 
    dt.toLocaleString('es', {
 24 
    dt.toLocaleString("es", {
25 
      hour: 'numeric',
 25 
      hour: "numeric",
26 
      minute: '2-digit',
 26 
      minute: "2-digit",
27 
      second: '2-digit',
 27 
      second: "2-digit",
28 
    })
 28 
    })
29 
  )
 29 
  );
30 
  const { data: timezones } = useFetchHelper('timezones')
 30 
  const { data: timezones } = useFetchHelper("timezones");
31 
  const labels = useSelector(({ intl }) => intl.labels)
 31 
  const labels = useSelector(({ intl }) => intl.labels);
Línea 32... Línea 32...
32 
  const dispatch = useDispatch()
 32 
  const dispatch = useDispatch();
33 
 
 33 
 
34 
  const { handleSubmit, register, errors, reset, getValues } = useForm({
 34 
  const { handleSubmit, register, errors, reset, getValues } = useForm({
Línea 35... Línea 35...
35 
    mode: 'all',
 35 
    mode: "all",
36 
  })
 36 
  });
37 
 
 37 
 
38 
  const handleDateTime = (value) => {
 38 
  const handleDateTime = (value) => {
39 
    setDate({
 39 
    setDate({
40 
      ...date,
 40 
      ...date,
41 
      year: new Intl.DateTimeFormat('es', { year: 'numeric' }).format(value),
 41 
      year: new Intl.DateTimeFormat("es", { year: "numeric" }).format(value),
42 
      month: new Intl.DateTimeFormat('es', { month: '2-digit' }).format(value),
 42 
      month: new Intl.DateTimeFormat("es", { month: "2-digit" }).format(value),
43 
      day: new Intl.DateTimeFormat('es', { day: '2-digit' }).format(value),
 43 
      day: new Intl.DateTimeFormat("es", { day: "2-digit" }).format(value),
44 
    })
 44 
    });
45 
    setTime(
 45 
    setTime(
46 
      new Intl.DateTimeFormat('es', {
 46 
      new Intl.DateTimeFormat("es", {
47 
        hour: 'numeric',
 47 
        hour: "numeric",
48 
        minute: '2-digit',
 48 
        minute: "2-digit",
49 
        second: 'numeric',
 49 
        second: "numeric",
Línea 50... Línea 50...
50 
      }).format(value)
 50 
      }).format(value)
51 
    )
 51 
    );
52 
  }
 52 
  };
Línea 53... Línea 53...
53 
 
 53 
 
54 
  const onSubmit = handleSubmit(async (data) => {
 54 
  const onSubmit = handleSubmit(async (data) => {
55 
    try {
 55 
    try {
Línea 56... Línea 56...
56 
      const formData = new FormData()
 56 
      const formData = new FormData();
57 
 
 57 
 
Línea 58... Línea 58...
58 
      Object.entries(data).forEach(([key, value]) =>
 58 
      Object.entries(data).forEach(([key, value]) =>
Línea 59... Línea 59...
59 
        formData.append(key, value)
 59 
        formData.append(key, value)
60 
      )
 60 
      );
61 
 
 61 
 
62 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
 62 
      formData.append("date", `${date.year}-${date.month}-${date.day}`);
Línea 63... Línea 63...
63 
      formData.append('time', time)
 63 
      formData.append("time", time);
64 
 
 64 
 
65 
      const { data: response } = await axios.post(zoomUrl, formData)
 65 
      const { data: response } = await axios.post(zoomUrl, formData);
66 
 
 66 
 
67 
      if (!response.success && typeof response.data === 'string') {
 67 
      if (!response.success && typeof response.data === "string") {
68 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
 68 
        dispatch(addNotification({ msg: response.data, style: "danger" }));
69 
        return
 69 
        return;
70 
      }
 70 
      }
Línea 71... Línea 71...
71 
 
 71 
 
72 
      if (!response.success && typeof response.data === 'object') {
 72 
      if (!response.success && typeof response.data === "object") {
73 
        Object.entries(response.data).forEach(([key, value]) => {
 73 
        Object.entries(response.data).forEach(([key, value]) => {
74 
          dispatch(
 74 
          dispatch(
75 
            addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' })
 75 
            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })
76 
          )
 76 
          );
77 
        })
 77 
        });
78 
        return
 78 
        return;
79 
      }
 79 
      }
80 
 
 80 
 
81 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
 81 
      dispatch(addNotification({ msg: response.data, style: "success" }));
Línea 82... Línea 82...
82 
      onClose()
 82 
      onClose();
83 
      reset()
 83 
      reset();
84 
    } catch (error) {
 84 
    } catch (error) {
85 
      console.log(`Error: ${error}`)
 85 
      console.log(`Error: ${error}`);
Línea 102... Línea 102...
102 
            <input
 102 
            <input
103 
              type="text"
 103 
              type="text"
104 
              name="title"
 104 
              name="title"
105 
              className="form-control"
 105 
              className="form-control"
106 
              maxLength={128}
 106 
              maxLength={128}
107 
              ref={register({ required: 'Por favor ingrese un título' })}
 107 
              ref={register({ required: "Por favor ingrese un título" })}
108 
            />
 108 
            />
109 
            {errors.title && (
 109 
            {errors.title && (
110 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
 110 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
111 
            )}
 111 
            )}
112 
          </div>
 112 
          </div>
Línea 114... Línea 114...
114 
            <label htmlFor="first_name">Descripción</label>
 114 
            <label htmlFor="first_name">Descripción</label>
115 
            <input
 115 
            <input
116 
              type="text"
 116 
              type="text"
117 
              name="description"
 117 
              name="description"
118 
              className="form-control"
 118 
              className="form-control"
119 
              ref={register({ required: 'Por favor ingrese una descripción' })}
 119 
              ref={register({ required: "Por favor ingrese una descripción" })}
120 
            />
 120 
            />
121 
            {errors.description && (
 121 
            {errors.description && (
122 
              <FormErrorFeedback>
 122 
              <FormErrorFeedback>
123 
                {errors.description.message}
 123 
                {errors.description.message}
124 
              </FormErrorFeedback>
 124 
              </FormErrorFeedback>
Línea 129... Línea 129...
129 
            <select name="type" className="form-control" ref={register}>
 129 
            <select name="type" className="form-control" ref={register}>
130 
              <option value="i">Inmediata</option>
 130 
              <option value="i">Inmediata</option>
131 
              <option value="s">Programada</option>
 131 
              <option value="s">Programada</option>
132 
            </select>
 132 
            </select>
133 
          </div>
 133 
          </div>
134 
          {getValues('type') === 's' && (
 134 
          {getValues("type") === "s" && (
135 
            <div className="form-group">
 135 
            <div className="form-group">
136 
              <label htmlFor="timezone">Horario</label>
 136 
              <label htmlFor="timezone">Horario</label>
137 
              <Datetime
 137 
              <Datetime
138 
                dateFormat="DD-MM-YYYY"
 138 
                dateFormat="DD-MM-YYYY"
139 
                onChange={(e) => {
 139 
                onChange={(e) => {
140 
                  if (e.toDate) {
 140 
                  if (e.toDate) {
141 
                    handleDateTime(e.toDate())
 141 
                    handleDateTime(e.toDate());
142 
                  }
 142 
                  }
143 
                }}
 143 
                }}
144 
                inputProps={{ className: 'form-control' }}
 144 
                inputProps={{ className: "form-control" }}
145 
                initialValue={Date.parse(new Date())}
 145 
                initialValue={Date.parse(new Date())}
146 
                closeOnSelect
 146 
                closeOnSelect
147 
              />
 147 
              />
148 
            </div>
 148 
            </div>
149 
          )}
 149 
          )}
150 
          <div className="form-group">
 150 
          <div className="form-group">
151 
            <label htmlFor="timezone">Zona horaria</label>
 151 
            <label htmlFor="timezone">Zona horaria</label>
152 
            <select
 152 
            <select
153 
              className="form-control"
 153 
              className="form-control"
154 
              name="timezone"
 154 
              name="timezone"
155 
              ref={register({ required: 'Por favor elige una Zona horaria' })}
 155 
              ref={register({ required: "Por favor elige una Zona horaria" })}
- 
 
 156 
              defaultValue="America/Montevideo"
156 
            >
 157 
            >
157 
              <option value="" hidden>
 158 
              <option value="" hidden>
158 
                Zona horaria
 159 
                Zona horaria
159 
              </option>
 160 
              </option>
160 
              {timezones.map(({ name, value }) => (
 161 
              {timezones.map(({ name, value }) => (
Línea 186... Línea 187...
186 
            <input
 187 
            <input
187 
              type="password"
 188 
              type="password"
188 
              name="password"
 189 
              name="password"
189 
              className="form-control"
 190 
              className="form-control"
190 
              ref={register({
 191 
              ref={register({
191 
                required: 'Por favor ingrese una contraseña',
 192 
                required: "Por favor ingrese una contraseña",
192 
                maxLength: {
 193 
                maxLength: {
193 
                  value: 6,
 194 
                  value: 6,
194 
                  message: 'La contraseña debe tener al menos 6 digitos',
 195 
                  message: "La contraseña debe tener al menos 6 digitos",
195 
                },
 196 
                },
196 
              })}
 197 
              })}
197 
            />
 198 
            />
198 
            {errors.password && (
 199 
            {errors.password && (
199 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 200 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
Línea 203... Línea 204...
203 
            Crear
 204 
            Crear
204 
          </button>
 205 
          </button>
205 
        </form>
 206 
        </form>
206 
      </Modal.Body>
 207 
      </Modal.Body>
207 
    </Modal>
 208 
    </Modal>
208 
  )
 209 
  );
209 
}
 210 
};
Línea 210... Línea 211...
210 
 
 211