Proyectos de Subversion LeadersLinked - Backend

import React, { useState, useEffect } from "react";

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

import { useDispatch } from "react-redux";

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

import { Modal } from "@mui/material";

import Datetime from "react-datetime";

import FormErrorFeedback from "../../../../shared/form-error-feedback/FormErrorFeedback";

const ConferenceModal = ({

  show = false,

  timezones = {},

  zoomUrl = "",

  onCreate = () => null,

}) => {

  const dt = new Date();

  const { handleSubmit, register, errors, reset } = useForm({ mode: "all" });

  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 [coferenceType, setConferenceType] = useState(1);

  const [isShow, setIsShow] = useState(show);

  useEffect(() => {

    setIsShow(show);

  }, [show]);

  const dispatch = useDispatch();

  const closeModal = () => {

    setIsShow(false);

    reset();

  };

  const handleChange = (value) => setConferenceType(value);

  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 = async (data) => {

    try {

      const formData = new FormData();

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

        formData.append(key, value)

      );

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

      formData.append("time", time);

      const { data: response } = await axios.post(zoomUrl, formData);

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

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

        return;

      }

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

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

          dispatch(

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

          );

        });

        return;

      }

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

      onCreate();

      reset();

    } catch (error) {

      console.log(`Error: ${error.message}`);

      return dispatch(

        addNotification({ msg: "Ha ocurrido un error", style: "danger" })

      );

    }

  };

  return (

    <Modal show={isShow} onHide={closeModal}>

      <Modal.Header closeButton>

        <Modal.Title>Crear Conferencia</Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <form onSubmit={handleSubmit(onSubmit)} autoComplete="new-password">

          <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"

              onChange={({ target }) => handleChange(target.value)}

              ref={register}

            >

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

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

            </select>

          </div>

          {coferenceType === "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" })}

            >

              <option value="" hidden>

                Zona horaria

              </option>

              {Object.entries(timezones).map(([key, value]) => (

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

                  {value}

                </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

              type="password"

              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>

          <button className="btn btn-primary" type="submit">

            Crear

          </button>

        </form>

      </Modal.Body>

    </Modal>

  );

};

export default ConferenceModal;