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;