Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from "react";

import { useDispatch, useSelector } from "react-redux";

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

import Datetime from "react-datetime";

import { axios } from "../../utils";

import { useFetchHelper } from "@hooks";

import { addNotification } from "store/notification/notification.actions";

import Modal from "components/UI/modal/Modal";

import FormErrorFeedback from "components/UI/form/FormErrorFeedback";

import "react-datetime/css/react-datetime.css";

const ConferenceModal = ({

  show = false,

  zoomUrl = "",

  onClose = () => null,

}) => {

  const dt = new Date();

  const [date, setDate] = useState({

    year: dt.toLocaleString("default", { year: "numeric" }),

    month: dt.toLocaleString("default", { month: "2-digit" }),

    day: dt.toLocaleString("default", { day: "2-digit" }),

  });

  const [time, setTime] = useState(

    dt.toLocaleString("es", {

      hour: "numeric",

      minute: "2-digit",

      second: "2-digit",

    })

  );

  const { data: timezones } = useFetchHelper("timezones");

  const labels = useSelector(({ intl }) => intl.labels);

  const dispatch = useDispatch();

  const {

    handleSubmit,

    register,

    reset,

    getValues,

    formState: { errors },

  } = useForm({

    mode: "all",

  });

  const handleDateTime = (value) => {

    setDate({

      ...date,

      year: new Intl.DateTimeFormat("es", { year: "numeric" }).format(value),

      month: new Intl.DateTimeFormat("es", { month: "2-digit" }).format(value),

      day: new Intl.DateTimeFormat("es", { day: "2-digit" }).format(value),

    });

    setTime(

      new Intl.DateTimeFormat("es", {

        hour: "numeric",

        minute: "2-digit",

        second: "numeric",

      }).format(value)

    );

  };

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

    try {

      const formData = new FormData();

      Object.entries(conference).forEach(([key, value]) =>

        formData.append(key, value)

      );

      formData.append("date", `${date.year}-${date.month}-${date.day}`);

      formData.append("time", time);

      const response = await axios.post(zoomUrl, formData);

      const { data, success } = response.data;

      if (!success && typeof data === "string") {

        dispatch(addNotification({ msg: data, style: "danger" }));

        return;

      }

      if (!success && typeof data === "object") {

        Object.entries(data).forEach(([key, value]) => {

          dispatch(

            addNotification({ msg: `${key}: ${value[0]}`, style: "danger" })

          );

        });

        return;

      }

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

      onClose();

      reset();

    } catch (err) {

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

    }

  });

  const generatePassword = () => {

    return Math.random().toString(36).slice(-6);

  };

  return (

    <Modal

      title={labels.create_conference}

      show={show}

      onClose={onClose}

      onAccept={onSubmit}

    >

      <div className="form-group">

        <label htmlFor="first_name">Título</label>

        <input

          type="text"

          name="title"

          className="form-control"

          maxLength={128}

          ref={register({ required: "Por favor ingrese un título" })}

        />

        {errors.title && (

          <FormErrorFeedback>{errors.title.message}</FormErrorFeedback>

        )}

      </div>

      <div className="form-group">

        <label htmlFor="first_name">Descripción</label>

        <input

          type="text"

          name="description"

          className="form-control"

          ref={register({ required: "Por favor ingrese una descripción" })}

        />

        {errors.description && (

          <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>

        )}

      </div>

      <div className="form-group">

        <label htmlFor="timezone">Tipo de conferencia</label>

        <select name="type" className="form-control" ref={register}>

          <option value="i">Inmediata</option>

          <option value="s">Programada</option>

        </select>

      </div>

      {getValues("type") === "s" && (

        <div className="form-group">

          <label htmlFor="timezone">Horario</label>

          <Datetime

            dateFormat="DD-MM-YYYY"

            onChange={(e) => {

              if (e.toDate) {

                handleDateTime(e.toDate());

              }

            }}

            inputProps={{ className: "form-control" }}

            initialValue={Date.parse(new Date())}

            closeOnSelect

          />

        </div>

      )}

      <div className="form-group">

        <label htmlFor="timezone">Zona horaria</label>

        <select

          className="form-control"

          name="timezone"

          ref={register({ required: "Por favor elige una Zona horaria" })}

          defaultValue="America/Montevideo"

        >

          <option value="" hidden>

            Zona horaria

          </option>

          {timezones.map(({ name, value }) => (

            <option value={value} key={value}>

              {name}

            </option>

          ))}

        </select>

        {errors.timezone && (

          <FormErrorFeedback>{errors.timezone.message}</FormErrorFeedback>

        )}

      </div>

      <div className="form-group">

        <label htmlFor="timezone">Duración</label>

        <select className="form-control" name="duration" ref={register}>

          <option value={5}>5-min</option>

          <option value={10}>10-min</option>

          <option value={15}>15-min</option>

          <option value={20}>20-min</option>

          <option value={25}>25-min</option>

          <option value={30}>30-min</option>

          <option value={35}>35-min</option>

          <option value={40}>40-min</option>

          <option value={45}>45-min</option>

        </select>

      </div>

      <div className="form-group">

        <label htmlFor="first_name">Contraseña de ingreso</label>

        <input

          defaultValue={generatePassword()}

          type="text"

          name="password"

          className="form-control"

          ref={register({

            required: "Por favor ingrese una contraseña",

            maxLength: {

              value: 6,

              message: "La contraseña debe tener al menos 6 digitos",

            },

          })}

        />

        {errors.password && (

          <FormErrorFeedback>{errors.password.message}</FormErrorFeedback>

        )}

      </div>

    </Modal>

  );

};

export default ConferenceModal;