Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 345 Rev 488
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 {
56 
      const formData = new FormData();
 - 
 
57 
 
 56 
      const formData = new FormData()
58 
      Object.entries(data).forEach(([key, value]) =>
 57 
 
59 
        formData.append(key, value)
 58 
      Object.entries(data).forEach(([key, value]) =>
60 
      );
 59 
        formData.append(key, value)
61 
 
 60 
      )
62 
      formData.append("date", `${date.year}-${date.month}-${date.day}`);
 61 
      formData.append('date', `${date.year}-${date.month}-${date.day}`)
63 
      formData.append("time", time);
 62 
      formData.append('time', time)
64 
 
 63 
 
65 
      const { data: response } = await axios.post(zoomUrl, formData);
 64 
      const { data: response } = await axios.post(zoomUrl, formData)
Línea 66... Línea 65...
66 
 
 65 
 
67 
      if (!response.success && typeof response.data === "string") {
 66 
      if (!response.success && typeof response.data === 'string') {
68 
        dispatch(addNotification({ msg: response.data, style: "danger" }));
 67 
        dispatch(addNotification({ msg: response.data, style: 'danger' }))
69 
        return;
 68 
        return
70 
      }
 69 
      }
71 
 
 70 
 
72 
      if (!response.success && typeof response.data === "object") {
 71 
      if (!response.success && typeof response.data === 'object') {
73 
        Object.entries(response.data).forEach(([key, value]) => {
 72 
        Object.entries(response.data).forEach(([key, value]) => {
Línea 74... Línea 73...
74 
          dispatch(
 73 
          dispatch(
75 
            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })
 74 
            addNotification({ msg: `${key}: ${value[0]}`, style: 'danger' })
76 
          );
 75 
          )
77 
        });
 76 
        })
78 
        return;
 - 
 
79 
      }
 77 
        return
- 
 
 78 
      }
80 
 
 79 
 
- 
 
 80 
      dispatch(addNotification({ msg: response.data, style: 'success' }))
- 
 
 81 
      onClose()
81 
      dispatch(addNotification({ msg: response.data, style: "success" }));
 82 
      reset()
82 
      onClose();
 83 
    } catch (error) {
83 
      reset();
 84 
      dispatch(
84 
    } catch (error) {
 85 
        addNotification({
- 
 
 86 
          msg: 'Ha ocurrido un error',
- 
 
 87 
          style: 'danger',
- 
 
 88 
        })
- 
 
 89 
      )
Línea 85... Línea 90...
85 
      console.log(`Error: ${error}`);
 90 
      throw new Error(error)
86 
      dispatch(
 91 
    }
87 
        addNotification({ msg: "Ha ocurrido un error", style: "danger" })
 92 
  })
88 
      );
 93 
 
Línea 102... Línea 107...
102 
            <input
 107 
            <input
103 
              type="text"
 108 
              type="text"
104 
              name="title"
 109 
              name="title"
105 
              className="form-control"
 110 
              className="form-control"
106 
              maxLength={128}
 111 
              maxLength={128}
107 
              ref={register({ required: "Por favor ingrese un título" })}
 112 
              ref={register({ required: 'Por favor ingrese un título' })}
108 
            />
 113 
            />
109 
            {errors.title && (
 114 
            {errors.title && (
110 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
 115 
              <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>
111 
            )}
 116 
            )}
112 
          </div>
 117 
          </div>
Línea 114... Línea 119...
114 
            <label htmlFor="first_name">Descripción</label>
 119 
            <label htmlFor="first_name">Descripción</label>
115 
            <input
 120 
            <input
116 
              type="text"
 121 
              type="text"
117 
              name="description"
 122 
              name="description"
118 
              className="form-control"
 123 
              className="form-control"
119 
              ref={register({ required: "Por favor ingrese una descripción" })}
 124 
              ref={register({ required: 'Por favor ingrese una descripción' })}
120 
            />
 125 
            />
121 
            {errors.description && (
 126 
            {errors.description && (
122 
              <FormErrorFeedback>
 127 
              <FormErrorFeedback>
123 
                {errors.description.message}
 128 
                {errors.description.message}
124 
              </FormErrorFeedback>
 129 
              </FormErrorFeedback>
Línea 129... Línea 134...
129 
            <select name="type" className="form-control" ref={register}>
 134 
            <select name="type" className="form-control" ref={register}>
130 
              <option value="i">Inmediata</option>
 135 
              <option value="i">Inmediata</option>
131 
              <option value="s">Programada</option>
 136 
              <option value="s">Programada</option>
132 
            </select>
 137 
            </select>
133 
          </div>
 138 
          </div>
134 
          {getValues("type") === "s" && (
 139 
          {getValues('type') === 's' && (
135 
            <div className="form-group">
 140 
            <div className="form-group">
136 
              <label htmlFor="timezone">Horario</label>
 141 
              <label htmlFor="timezone">Horario</label>
137 
              <Datetime
 142 
              <Datetime
138 
                dateFormat="DD-MM-YYYY"
 143 
                dateFormat="DD-MM-YYYY"
139 
                onChange={(e) => {
 144 
                onChange={(e) => {
140 
                  if (e.toDate) {
 145 
                  if (e.toDate) {
141 
                    handleDateTime(e.toDate());
 146 
                    handleDateTime(e.toDate())
142 
                  }
 147 
                  }
143 
                }}
 148 
                }}
144 
                inputProps={{ className: "form-control" }}
 149 
                inputProps={{ className: 'form-control' }}
145 
                initialValue={Date.parse(new Date())}
 150 
                initialValue={Date.parse(new Date())}
146 
                closeOnSelect
 151 
                closeOnSelect
147 
              />
 152 
              />
148 
            </div>
 153 
            </div>
149 
          )}
 154 
          )}
150 
          <div className="form-group">
 155 
          <div className="form-group">
151 
            <label htmlFor="timezone">Zona horaria</label>
 156 
            <label htmlFor="timezone">Zona horaria</label>
152 
            <select
 157 
            <select
153 
              className="form-control"
 158 
              className="form-control"
154 
              name="timezone"
 159 
              name="timezone"
155 
              ref={register({ required: "Por favor elige una Zona horaria" })}
 160 
              ref={register({ required: 'Por favor elige una Zona horaria' })}
156 
              defaultValue="America/Montevideo"
 161 
              defaultValue="America/Montevideo"
157 
            >
 162 
            >
158 
              <option value="" hidden>
 163 
              <option value="" hidden>
159 
                Zona horaria
 164 
                Zona horaria
160 
              </option>
 165 
              </option>
Línea 183... Línea 188...
183 
            </select>
 188 
            </select>
184 
          </div>
 189 
          </div>
185 
          <div className="form-group">
 190 
          <div className="form-group">
186 
            <label htmlFor="first_name">Contraseña de ingreso</label>
 191 
            <label htmlFor="first_name">Contraseña de ingreso</label>
187 
            <input
 192 
            <input
- 
 
 193 
              defaultValue={generatePassword()}
188 
              type="password"
 194 
              type="password"
189 
              name="password"
 195 
              name="password"
190 
              className="form-control"
 196 
              className="form-control"
191 
              ref={register({
 197 
              ref={register({
192 
                required: "Por favor ingrese una contraseña",
 198 
                required: 'Por favor ingrese una contraseña',
193 
                maxLength: {
 199 
                maxLength: {
194 
                  value: 6,
 200 
                  value: 6,
195 
                  message: "La contraseña debe tener al menos 6 digitos",
 201 
                  message: 'La contraseña debe tener al menos 6 digitos',
196 
                },
 202 
                },
197 
              })}
 203 
              })}
198 
            />
 204 
            />
199 
            {errors.password && (
 205 
            {errors.password && (
200 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
 206 
              <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>
Línea 204... Línea 210...
204 
            Crear
 210 
            Crear
205 
          </button>
 211 
          </button>
206 
        </form>
 212 
        </form>
207 
      </Modal.Body>
 213 
      </Modal.Body>
208 
    </Modal>
 214 
    </Modal>
209 
  );
 215 
  )
210 
};
 216 
}
Línea 211... Línea 217...
211 
 
 217