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;